CSS
The web beauty
Instructor: Emad Elsaid
blazeeboy@gmail.com
http://www.blazeboy.com
Agenda
What is CSS?
Box model
Write Process
Selectors
Linking with HTML
Rules
Our test page
Font rules
Syntax
Background rules
Colors
Box Rules
Sizes
What is CSS?
Cascade style sheet language
Define your page appearance
Organize your website structure
Write Process
Write In any text editor
Save After every modification
Refresh Your browser
Linking with HTML
You have to add a tag for each linked file
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
This will apply the appearance to that page
Our test page
We'll use a prewritten test.html page in our
session that represent
1 image
3 paragraphs
Nested formatting elements
Syntax
Selector2 {
Rule1: value;
Rule2: value;
}
Selector2 {
Rule1: value;
Rule2: value;
}
Colors
RGB( r , g , b )
r,g,b: the value of Red,Green,Blue components
It takes 1 byte each so the value range is 0:255
Ex: rgb(255,0,0) rgb(0,255,0) rgb(0,255,255)
#rgb
r,g,b: the value of components in Hexadecimal
The values range from 00:FF
Ex: #FF0000 #00FF00 #00FFFF
Sizes
We can use the following units for distance
measuring
Absolute: px, cm, mm, in, pt, pc
Relative: em, ex, %
Box model
Selectors
* : selects all elements
tag : select all paragraphs
Ex: p , table, td
tag1 tag2: select tag2 within tag1
Ex: table img
tag1,tag2: select tag1 and tag2
Ex:
.class: select any element with class names
class
Ex: .para, .even, .odd
Rules
Rules are the styling commands of CSS
Syntax:
Rule1 : value;
Rule2: value;
Types: box, background,border,font,list...etc.
Font rules
Font-family: specify the font name
Font-size: specify font size
Font-weight: font bold
Color: specify font color
Text-align: specify the text alignment
Background rules
Background-color: specify the background color
Background-image: specify background image
Background-position: the image position
Background-repeat: the image repeat
Box rules
Margin: top,bottom,left,right
Padding: top,bottom,left,right
Border: top,bottom,left,right
Thank You