You are on page 1of 16

CSS

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