web app development_html_css_03
DESCRIPTION
TRANSCRIPT
[email protected] July 01, 2013 Hassen poreya Trainer, Cresco Solution
Afghanistan Workforce Development Program
HTML / CSS
Divisions
As defined in the HTML 4.01 and XHTML 1.0 standards, the <div> tag divides your document into separate, distinct sections.
In fact you can organize and position your objects on the document with divisions (<div>).
A div is nothing more but a container, Similar to tables, but much more lighter and useful.
Older websites were using tables to position and organize the objects, that was complex as well as much more slower than the divisions.
Today’s websites are using division.
Divisions
Inner divs comes inside another (outer) div to split up the outer div.
You define a size for each div and place it somewhere in your document, and then put your contents inside the div.
The basic syntax is like:
<div>
…
<div>
</div>
…
</div>
CSS ( Cascading Style Sheet)
CSS
Stands for Cascading Style Sheet.
Added to HTML 4.0 to solve a problem.
It separates structure from layout.
Define how to display HTML elements.
Reduces size of HTML file.
Multiple style definitions will cascade into one.
CSS Syntax
The CSS syntax is made up of three parts:
Selector: The selector is normally the HTML element/tag
Property
Value
selector {property: value}
h1 {color: blue;}
.p {font-size: 12px;}
Selector
There are three kind of selectors
Group selector
Class selector
Id selector
Group Selector
You can set a style for a group of HTML elements.
Separate selectors from each other by a comma.
h1,h2,h3,h4,h5,h6 {color: green;}
or p, h4, title {text-align:right;}
Class Selector
define different styles for the same type of HTML element
CSS Syntax
p.center {text-align: center}
class attribute in HTML document:
<p class="center">
This paragraph will be center
</p>
Class Selector
Apply more than one class per given element.
CSS Syntax
.center {text-align: center}
Class attribute in HTML document:
<p class="center">
This paragraph will be center
</p>
<h1 class="center">
This heading will be center
</h1>
Id Selector
The id selector is defined as a #
CSS Syntax
#center {text-align: center}
Idattribute in HTML document: <p id="center">Paragraph in center</p>
<h1 id="center">
This heading will be center
</h1>
Inserting CSS to HTML
There are three ways of inserting a style sheet into a HTML document.
Inline Styles
Internal Style Sheet
External Style Sheet
Inline CSS
Style is to be applied to a single occurrence of an element.
In fact, HTML style attribute comes inside a tag and hold your CSS definitions.
<p style="color:sienna; margin-left:20px">
This is a paragraph
</p>
Internal CSS
You can define internal styles in the head section by using the <style> tag.
<head>
<style type="text/css">
p {margin-left: 20px}
body{backgroun image:url(“me.jpg")
</style>
</head>
External CSS
You can write all CSS code in one file and save it as “style.css” and then you can link this to your HTML document.
By doing this, you can bring changes in CSS file and then everything automatically will be change in your HTML document.
CSS File – style.css
p {margin-left: 20px}
HTML File <head>
<link rel="stylesheet” type="text/css” href=“style.css"/>
</head>
Basic style properties
Background-color: value;
Background-image: value;
Font-family: value;
Font-size: value;
Float: value;
Text-align: value;
Color: value;
Width: value;
Height: value;
CSS Backgrounds
CSS properties used for background effects:
background-color (Color)
background-image (Image URL)
background-repeat (Repeat to X and Y)
background-attachment (Fixed or Scroll)
background-position (top, right, left, bottom)
CSS Backgrounds
body {background-color:#b0c4de;}
p {background-color:#e0ffff;}
body {background-image:url(‘microcis.png');}
Body{ background-image:url('gradient.png');
background-repeat:repeat-x;}
Body{ background-image:url(‘logo.png');
background-repeat:no-repeat;
background-psition:right top;}
Shorthand style:
body {background:#fff url('img_tree.png') no-repeat right top;}
Order:
background-color, background-image, background-repeat, background-attachment
background-position
CSS Text Style
Some CSS properties used to style the texts.
Color (Text color)
Direction (left to right, right to left)
Text-align (left, center, right)
Text-decoration (Underline, overline, …)
Text-transform (uppercase, lowercase)
Text-indent (pixels)
Letter-spacing (pixels)
Word-spacing (pixels)
CSS Text Style
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
p.date {text-align:right;}
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
p.uppercase {text-transform:uppercase;}
p.capitalize {text-transform:capitalize;}
p {text-indent:50px;}
CSS Link Style
Almost any CSS property can be attached to links.
color, font-family, background, dir, margin, text-decoration, …
a:link – a normal, unvisited link
a:visited – a visited link
a:hover – react on mouse over
a:active – a link the moment it is clicked
CSS Link Style
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
-------------------------------------
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
CSS List Style
The CSS list properties allow you to:
Set different list item markers for ordered lists.
Set different list item markers for unordered lists.
Set an image as the list item marker. ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
--
Ul{ list-style-image: url('sqpurple.gif');}
Let’s code something
