79 views

Css

Uploaded by Emad Elsaid

Copyright: Attribution Non-Commercial (BY-NC)

Download as PDF, TXT or read online from Scribd

Flag for inappropriate content

save

Jump to Page

You are on page 1of 16

Search inside document

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>

 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