Upload
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
of 16

CSS

The web beauty

CSS

Instructor: Emad Elsaid blazeeboy@gmail.com http://www.blazeboy.com

Agenda
What is CSS? Write Process Linking with HTML Our test page Syntax Colors Sizes
     

      

Box model Selectors Rules Font rules Background rules Box Rules

What is CSS?
  

Cascade style sheet language Define your page appearance Organize your website structure

Write Process

Write Save Refresh

In any text editor

After every modification

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) r,g,b: the value of components in Hexadecimal The values range from 00:FF Ex: #FF0000 #00FF00 #00FFFF

#rgb
  

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 Ex: table img Ex:

tag1 tag2: select tag2 within tag1

tag1,tag2: select tag1 and tag2

.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

Documents Similar To Css