[PPT] - Presented By: Anwar Babita Introducing Cascading Style PowerPoint Presentation

SLIDE 1

Presented ¡By: ¡ Anwar ¡ ¡ Babita ¡

SLIDE 2

Introducing Cascading Style Sheets(CSS)

 Style ¡sheets ¡are ¡declara(ons ¡that ¡describe ¡the ¡layout ¡

and ¡appearance ¡of ¡a ¡document ¡

 Cascading ¡Style ¡Sheets ¡(CSS) ¡is ¡a ¡style ¡sheet ¡language ¡

used ¡on ¡the ¡Web ¡

 CSS ¡specifica(ons ¡are ¡maintained ¡by ¡the ¡World ¡Wide ¡

Web ¡Consor(um ¡(W3C) ¡

 Several ¡versions ¡of ¡CSS ¡exist: ¡CSS1, ¡CSS2, ¡CSS ¡2.1, ¡

and ¡CSS3. ¡

 Typical ¡CSS ¡file ¡is ¡a ¡text ¡file ¡with ¡an ¡exten(on.css ¡and ¡

contains ¡a ¡series ¡of ¡commands ¡or ¡rules. ¡These ¡rules ¡ tell ¡the ¡HTML ¡how ¡to ¡display. ¡

¡

SLIDE 3

 CSS1 ¡introduced ¡styles ¡for ¡the ¡following ¡document ¡

features ¡like ¡Fonts, ¡Text, ¡Color, ¡Backgrounds ¡and ¡Block-‑ level ¡Elements. ¡

 CSS2 ¡introduced ¡styles ¡like ¡Posi(oning, ¡Visual ¡FormaPng, ¡

Media ¡Types ¡and ¡Interfaces. ¡

 CSS3 ¡introduced ¡styles ¡for ¡the ¡following ¡document ¡

features ¡like ¡User ¡Interfaces, ¡Accessibility, ¡Columnar ¡ layout, ¡Interna(onal ¡Features, ¡Mobile ¡Devices ¡and ¡ Scalable ¡Vector ¡Graphics ¡

SLIDE 4

¡1. ¡Separates ¡structure ¡from ¡presenta(on ¡ ¡ ¡2. ¡Provides ¡advanced ¡control ¡of ¡presenta(on ¡ ¡ ¡3. ¡Easy ¡maintenance ¡of ¡mul(ple ¡pages ¡ ¡ ¡4. ¡Faster ¡page ¡loading ¡ ¡ ¡5. ¡BeXer ¡accessibility ¡for ¡disabled ¡users ¡ ¡ ¡6. ¡Easy ¡to ¡learn ¡

Cascading ¡Benefits ¡

SLIDE 5

HTML ¡without ¡CSS ¡

¡ Without ¡CSS, ¡HTML ¡ elements ¡typically ¡ flow ¡from ¡top ¡to ¡ bottom ¡of ¡the ¡page ¡ and ¡position ¡ themselves ¡to ¡the ¡left ¡ by ¡default. ¡ With ¡CSS ¡help, ¡we ¡can ¡ create ¡containers ¡or ¡ DIVs ¡to ¡better ¡

rganize ¡content ¡ ¡and ¡

make ¡a ¡Web ¡page ¡ visually ¡appealing. ¡

SLIDE 6

Understanding ¡Style ¡Rules ¡

A ¡Style ¡Rule ¡is ¡composed ¡of ¡two ¡parts: ¡a ¡selector ¡ and ¡a ¡declaration. ¡

¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡

¡ ¡ TH ¡{color: ¡red;}. ¡

¡ ¡

The ¡Selector ¡indicates ¡the ¡element ¡to ¡which ¡the ¡rule ¡is ¡applied. ¡ The ¡Declaration ¡determines ¡the ¡property ¡values ¡of ¡a ¡selector. ¡ The ¡Property ¡ ¡specifies ¡a ¡characteristic, ¡such ¡as ¡color, ¡font-‑family, ¡ position, ¡and ¡is ¡followed ¡by ¡a ¡colon ¡(:). ¡

¡

Selector Declaration Property

SLIDE 7

Applying ¡a ¡Style ¡Sheet ¡

Three ¡ways ¡to ¡apply ¡a ¡style ¡to ¡an ¡HTML ¡or ¡XHTML ¡ document: ¡ ¡

¡Inline ¡Styles ¡
Embedded ¡Style ¡Sheet ¡
External ¡Style ¡Sheet ¡

¡

SLIDE 8

Designing Simple html Page

<h1><a ¡href="index.htm"> ¡ Guide ¡to ¡Web ¡Designing</a></h1> ¡ ¡ ¡ ¡ ¡ ¡ ¡<ul> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<li><a ¡href="sites.htm">Sites</ a></li> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<li><a ¡href="topics.htm" ¡>Topics</ a></li> ¡ ¡ ¡ ¡ ¡ ¡ ¡</ul> ¡ ¡ ¡ ¡ ¡ ¡ ¡<h2> ¡Guide ¡to ¡Web ¡Designing ¡: ¡ About</h2> ¡ ¡ ¡ ¡ ¡ ¡ ¡<p> ¡ ¡ ¡ ¡ ¡ ¡ ¡Welcome ¡to ¡the ¡site ¡dedicated ¡to ¡ ¡ ¡ ¡ ¡ ¡ ¡learning ¡of ¡CSS ¡and ¡JavaScript ¡

Styles. ¡

¡ ¡ ¡ ¡ ¡ ¡We ¡hope ¡you ¡find ¡ www.webhut.com ¡useful. ¡ ¡ ¡ ¡ ¡ ¡ ¡</p> ¡

¡

SLIDE 9

Inline ¡style ¡

Inline ¡styles ¡are ¡easy ¡to ¡use ¡and ¡interpret ¡ because ¡they ¡are ¡applied ¡directly ¡to ¡the ¡ elements ¡they ¡affect. ¡ <element ¡style=“style1: ¡value1; ¡style2: ¡ value2; ¡style3: ¡value3;…”> ¡ <p ¡style="color:sienna;margin-‑le`:20px">This ¡is ¡ a ¡paragraph.</p> ¡ ¡ This ¡is ¡fine-‑grain ¡style, ¡which ¡defeats ¡the ¡ purpose ¡of ¡style ¡sheets ¡-‑ ¡uniform ¡style ¡ ¡

¡

SLIDE 10

<html> ¡ <body ¡background="C:\Users\samreen \Desktop\webdesign.jpg"> ¡ <h1> ¡ ¡ ¡ ¡<img ¡src="C:\Users\samreen\Desktop \basics-‑of-‑web-‑design ¡(1).jpg" ¡ ¡ width="200" ¡height="150“ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡alt="Guide ¡to ¡Web ¡Designing“ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡style="float:right"/> ¡ ¡ ¡ ¡Guide ¡to ¡Web ¡Designing ¡: ¡About</h1> ¡ ¡<p> ¡ ¡ ¡ ¡Welcome ¡to ¡the ¡site ¡dedicated ¡to ¡ ¡ ¡ ¡learning ¡the ¡Google ¡Application ¡

Engine. ¡

¡ ¡ ¡We ¡hope ¡you ¡find ¡ ¡ ¡ ¡ ¡www.appenginelearn.com ¡useful. ¡ ¡ ¡ ¡</p> ¡ ¡ </body> ¡ </html> ¡

SLIDE 11

Embedded ¡style ¡sheet ¡

You ¡can ¡embed ¡style ¡definitions ¡in ¡a ¡document ¡head ¡using ¡the ¡following ¡ form: ¡ ¡ <style type=“text/css”> style declarations </style> ¡ Where ¡style ¡declarations ¡are ¡the ¡declarations ¡of ¡the ¡different ¡styles ¡to ¡be ¡ applied ¡to ¡the ¡document ¡ ¡ Example: ¡ ¡ <head> ¡ <style> ¡ hr ¡{color:sienna;} ¡ p ¡{margin-‑left:20px;} ¡ body ¡{background-‑image:url("images/back40.gif");} ¡ </style> ¡ </head> ¡

¡ ¡

¡

SLIDE 12

<html ¡xmlns="http://www.w3.org/1999/ xhtml"> ¡<head> ¡ ¡ ¡ ¡<title>Learning ¡the ¡Google ¡App ¡Engine</ title> ¡ ¡ ¡<style ¡type="text/css"> ¡ ¡ ¡ ¡ ¡ ¡ ¡body ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡font-‑family: ¡arial, ¡sans-‑serif; ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡</style> ¡ ¡</head> ¡ ¡<body> ¡ ¡ ¡ ¡ ¡ ¡ ¡<h1><a ¡href="index.htm"> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡AppEngineLearn</a></h1> ¡ ¡ ¡ ¡ ¡ ¡ ¡<ul> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<li><a ¡href="sites.htm">Sites</a></li> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<li><a ¡href="topics.htm" ¡ >Topics</a></li> ¡ ¡ ¡ ¡ ¡ ¡</ul> ¡

SLIDE 13

External ¡style ¡sheet ¡

 Because ¡an ¡embedded ¡style ¡sheet ¡only ¡applies ¡to ¡the ¡content ¡of ¡

ne ¡file, ¡you ¡need ¡to ¡place ¡a ¡style ¡declaration ¡in ¡an ¡external ¡

style ¡sheet ¡to ¡apply ¡to ¡the ¡rest ¡of ¡the ¡Web ¡site ¡

 An ¡external ¡style ¡sheet ¡is ¡a ¡text ¡file ¡that ¡contains ¡style ¡

declarations ¡

 It ¡can ¡be ¡linked ¡to ¡any ¡page ¡in ¡the ¡site, ¡allowing ¡the ¡same ¡

style ¡declaration ¡to ¡be ¡applied ¡to ¡the ¡entire ¡site ¡

 You ¡can ¡add ¡style ¡comments ¡as ¡you ¡develop ¡an ¡external ¡style ¡

sheet ¡ /* comment */

 Use ¡the ¡link ¡element ¡to ¡link ¡a ¡Web ¡page ¡to ¡an ¡external ¡style ¡

sheet ¡

 You ¡can ¡import ¡the ¡content ¡of ¡one ¡style ¡sheet ¡into ¡another ¡  Example: ¡ ¡ ¡

¡ ¡<head> ¡ <link ¡rel="stylesheet" ¡type="text/css" ¡href="mystyle.css"> ¡ </head> ¡

SLIDE 14

Con(nue… ¡

<html ¡xmlns="http://www.w3.org/1999/xhtml"> ¡ ¡<head> ¡ ¡ ¡ ¡<title>Learning ¡the ¡Google ¡App ¡Engine</title> ¡ <link ¡type="text/css" ¡rel="stylesheet" ¡href="glike.css"> ¡ </head> ¡ ¡<body> ¡ ¡<h1><a ¡href="index.htm"> ¡ ¡ ¡AppEngineLearn</a> ¡ <link ¡type="text/css" ¡rel="stylesheet" ¡href="glike.css"> ¡</h1> ¡ <ul> ¡ ¡<li><a ¡href="sites.htm">Sites</a></li> ¡ ¡<li><a ¡href="topics.htm" ¡>Topics</a></li> ¡ ¡ ¡</ul> ¡ ****************************************************** ¡ glike.css: ¡ body ¡{ ¡ ¡ ¡ ¡ ¡font-‑family: ¡arial, ¡sans-‑serif;} ¡ ¡

SLIDE 15

Selector ¡ ¡Forms ¡

 Selectors ¡are ¡used ¡to ¡target ¡which ¡HTML ¡to ¡style. ¡

Properties ¡and ¡values ¡are ¡used ¡to ¡set ¡the ¡style ¡rules. ¡

SLIDE 16

Selector ¡Forms ¡

 Simple ¡Selector ¡Forms: ¡The ¡selector ¡is ¡a ¡tag ¡name ¡or ¡a ¡list ¡

f ¡tag ¡names, ¡separated ¡by ¡commas. ¡Examples:h1, ¡h3, ¡p. ¡

Contextual ¡selectors ¡like ¡ol, ¡li. ¡

 Class ¡Selectors: ¡Used ¡to ¡allow ¡different ¡occurrences ¡of ¡the ¡

same ¡tag ¡to ¡use ¡different ¡style ¡specifica(ons. ¡A ¡style ¡class ¡ has ¡a ¡name, ¡which ¡is ¡aXached ¡to ¡a ¡tag ¡name. ¡For ¡example, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡p.narrow ¡{property/value ¡list} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡p.wide ¡{property/value ¡list} ¡

SLIDE 17

 Generic ¡ ¡Selectors: ¡ ¡Designed ¡to ¡use ¡ ¡on ¡more ¡than ¡one ¡kind ¡of ¡

tag. ¡This ¡class ¡must ¡be ¡named ¡and ¡the ¡name ¡must ¡begin ¡with ¡a ¡
period. ¡For ¡example: ¡

¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<h1 ¡class ¡= ¡"sale"> ¡Weekend ¡Sale ¡</h1> ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡<p ¡class ¡= ¡"sale"> ¡… ¡</p> ¡ ¡

 Id ¡Selectors: ¡An ¡id ¡selector ¡allow ¡the ¡applica(on ¡of ¡a ¡style ¡to ¡

ne ¡specific ¡element. ¡

General ¡form: ¡#specific-‑id ¡{property-‑value ¡list} ¡ Example: ¡#sec(on14 ¡{font-‑size: ¡20} ¡ ¡

 Universal ¡Selectors ¡-‑ ¡Applies ¡to ¡all ¡elements ¡in ¡the ¡document ¡

¡ ¡ ¡*{color: ¡red;} ¡

SLIDE 18

SOME ¡EXAMPLES ¡

Examples ¡1:HTML ¡tag ¡selector: ¡ <p>Sample ¡paragraph.</p> ¡ HTML ¡tag ¡selector ¡CSS: ¡ p ¡{color: ¡red; ¡font-‑size: ¡200%;} ¡ IN ¡ACTION: ¡ ¡Sample ¡paragraph. ¡ Examples ¡2: ¡Class ¡selector ¡HTML: ¡ <p ¡class="warning">This ¡is ¡a ¡paragraph ¡with ¡a ¡ class="warning".</p> ¡ <p ¡id="danger">This ¡is ¡a ¡paragraph ¡with ¡id="danger".</ p> ¡ ¡ ¡ ¡

SLIDE 19

This ¡is ¡a ¡paragraph ¡with ¡a ¡class=”warning”. ¡ This ¡is ¡a ¡paragraph ¡with ¡id="danger". ¡

SLIDE 20

 Examples ¡3: ¡ID ¡selector ¡HTML: ¡

<div ¡id="header"> ¡ <h1 ¡id="site-‑title">Introduction ¡to ¡HTML</h1> ¡ <h2 ¡id="site-‑description"> ¡With ¡HTML ¡you ¡can ¡create ¡ your ¡own ¡Web ¡site. ¡</h2> ¡ </div> ¡ ID ¡selector ¡CSS: ¡ #site-‑title ¡{ ¡ ¡ ¡font-‑size: ¡3em;} ¡ #site-‑description ¡{font-‑size: ¡2em; ¡color: ¡#777;} ¡ IN ¡ACTION: ¡ ¡ ¡ ¡

Introduction ¡to ¡HTML ¡

With ¡HTML ¡you ¡can ¡create ¡your ¡own ¡Web ¡site. ¡

SLIDE 21

Pseudo ¡Selectors ¡

 Pseudo ¡classes ¡are ¡styles ¡that ¡apply ¡when ¡something ¡happens, ¡rather ¡

than ¡because ¡the ¡target ¡element ¡simply ¡exists ¡

Ø Names ¡begin ¡with ¡colons ¡

‑ ¡hover ¡classes ¡apply ¡when ¡the ¡mouse ¡cursor ¡is ¡
ver ¡the ¡element ¡
‑ focus ¡classes ¡apply ¡when ¡an ¡element ¡has ¡focus. ¡

A ¡pseudo-‑class ¡is ¡similar ¡to ¡a ¡class ¡in ¡HTML, ¡but ¡it’s ¡not ¡specified ¡ explicitly ¡in ¡the ¡markup. ¡Some ¡pseudo-‑classes ¡are ¡dynamic—they’re ¡ applied ¡as ¡a ¡result ¡of ¡user ¡interaction ¡with ¡the ¡document. ¡ ¡

SLIDE 22

 <!-‑-‑ ¡pseudo.html ¡– ¡Does ¡not ¡work ¡with ¡IE ¡-‑-‑> ¡  <html ¡xmlns ¡= ¡"http://www.w3.org/1999/xhtml"> ¡  <head> ¡<title> ¡Checkboxes ¡</title> ¡  <style ¡type ¡= ¡"text/css"> ¡  input:hover ¡{color: ¡red;} ¡  input:focus ¡{color: ¡green;} ¡  </style> ¡  </head> ¡  <body> ¡  <form ¡action ¡= ¡""> ¡  <p> ¡  Your ¡name: ¡  <input ¡type ¡= ¡"text" ¡/> ¡  </p> ¡  </form> ¡  </body> ¡  </html> ¡

SLIDE 23

<html> ¡ <head> ¡ <(tle>Pseudo ¡classes</(tle> ¡ <style ¡type="text/css"> ¡ a:link ¡{color: ¡green;} ¡ a:visited ¡{color: ¡blue; ¡} ¡ a:hover{color: ¡gray; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ background-‑color: ¡#f0f8ff; ¡ text-‑decora(on: ¡none;} ¡ a:ac(ve ¡{color: ¡black;} ¡ </style> ¡ </head> ¡ <body> ¡ <a ¡href="hXp://www.html.net/" ¡target="_blank">HTML.net ¡main ¡page</a> ¡ <br ¡/> ¡ <a ¡href="hXp://www.html.net/tutorials/html/" ¡target="_blank">HTML ¡tutorial</a> ¡ <br ¡/> ¡ <a ¡href="hXp://www.html.net/tutorials/css/">CSS ¡tutorial</a> ¡ <br ¡/> ¡ <a ¡href="hXp://www.html.net/tutorials/javascript/" ¡target="_blank">JavaSript ¡ ¡tutorial</a> ¡ </body> ¡ </html> ¡

SLIDE 24

SLIDE 25

Property ¡Value ¡Forms ¡

 There ¡are ¡several ¡different ¡proper(es ¡in ¡7 ¡categories: ¡

‑ ¡Fonts ¡
‑ ¡Lists ¡
‑ ¡Alignment ¡of ¡text ¡
‑ ¡Margins ¡
‑ ¡Colors ¡
‑ ¡Backgrounds ¡
‑ ¡Borders ¡

SLIDE 26

Font ¡Proper(es ¡

 A ¡specific ¡font ¡is ¡a ¡font ¡such ¡as ¡Times ¡New ¡Roman, ¡Arial, ¡or ¡Garamond. ¡ ¡

The ¡font ¡is ¡installed ¡on ¡a ¡user’s ¡computer ¡

 A ¡generic ¡font ¡refers ¡to ¡the ¡font’s ¡general ¡appearance. ¡  CSS ¡allow ¡us ¡ ¡to ¡specify ¡a ¡list ¡of ¡specific ¡fonts ¡along ¡with ¡a ¡generic ¡font. ¡  The ¡style ¡to ¡change ¡the ¡font ¡size ¡of ¡text ¡within ¡an ¡element ¡is: ¡

¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡font-‑size: ¡length ¡ ¡where ¡length ¡is ¡a ¡length ¡of ¡measure.. ¡

 Many ¡Web ¡page ¡designers ¡opt ¡to ¡use ¡rela(ve ¡units, ¡which ¡are ¡expressed ¡

rela(ve ¡to ¡the ¡size ¡of ¡other ¡objects ¡within ¡the ¡Web ¡page ¡includes ¡Em ¡unit, ¡ Percentages, ¡Rela(ve ¡keywords ¡: ¡Larger ¡and ¡Smaller. ¡

 To ¡specify ¡font ¡styles, ¡use ¡the ¡following ¡style: ¡ ¡

¡font-‑style: ¡type ¡

 To ¡control ¡font ¡weight ¡for ¡any ¡page ¡element, ¡use ¡the ¡following ¡style: ¡ ¡

font-‑weight: ¡weight ¡

SLIDE 27

Examples: ¡

Example ¡1: ¡ h4 ¡{ ¡color: ¡red; ¡} ¡ h5 ¡{ ¡color: ¡#9000A1; ¡} ¡ ¡ h6 ¡{ ¡color: ¡rgb(0, ¡220, ¡98); ¡} ¡ Output ¡Display: ¡ ¡ This ¡is ¡a ¡red ¡h4 ¡header. ¡ This ¡is ¡a ¡hexadecimal ¡#9000A1 ¡ h5 ¡header. ¡ This ¡is ¡an ¡rgb(0, ¡220, ¡98) ¡h6 ¡

header. ¡

Example ¡2: ¡ ¡ h4 ¡{ ¡font-‑family: ¡sans-‑ serif; ¡} ¡ h5 ¡{ ¡font-‑family: ¡serif; ¡} ¡ ¡ h6 ¡{ ¡font-‑family: ¡arial; ¡} ¡ Display: ¡ ¡ Example ¡3: ¡ h1 ¡{font-‑size:40px;} ¡ h2 ¡{font-‑size:30px;} ¡ p ¡{font-‑size:14px;} ¡

SLIDE 28

LIST ¡Proper(es ¡

 In ¡HTML, ¡there ¡are ¡two ¡types ¡of ¡lists: ¡  unordered ¡lists ¡-‑ ¡the ¡list ¡items ¡are ¡marked ¡with ¡bullets. ¡

Bullet ¡can ¡be ¡a ¡disc ¡(default), ¡a ¡square, ¡or ¡a ¡circle. ¡

 ordered ¡lists ¡-‑ ¡the ¡list ¡items ¡are ¡marked ¡with ¡numbers ¡or ¡

letters. ¡On ¡ordered ¡lists ¡-‑ ¡list-‑style-‑type ¡can ¡be ¡used ¡ ¡to ¡

change ¡the ¡sequence ¡values. ¡

 For ¡example: ¡ ¡

¡ ¡ ¡ ¡ul.a ¡{list-‑style-‑type: ¡circle;} ¡ ul.b ¡{list-‑style-‑type: ¡square;} ¡ ¡

l.c ¡{list-‑style-‑type: ¡upper-‑roman;} ¡
l.d ¡{list-‑style-‑type: ¡lower-‑alpha;} ¡

 With ¡CSS, ¡lists ¡can ¡be ¡styled ¡further, ¡and ¡images ¡can ¡be ¡

used ¡as ¡the ¡list ¡item ¡marker. ¡

 For ¡Example: ¡ ¡

¡ ¡ ¡ ¡ul{list-‑style-‑image: ¡url('sqpurple.gif');} ¡

SLIDE 29

<head> ¡ <style> ¡ ul.a ¡{list-‑style-‑type:circle;} ¡ ul.b ¡{list-‑style-‑type:square;} ¡

l.c ¡{list-‑style-‑type:upper-‑roman;} ¡
l.d ¡{list-‑style-‑type:lower-‑alpha;} ¡

</style> ¡ </head> ¡ <body> ¡ <p>Example ¡of ¡unordered ¡lists:</p> ¡ <ul ¡class="a"> ¡ ¡ ¡<li>Coffee</li> ¡ ¡ ¡<li>Tea</li> ¡ ¡ ¡<li>Coca ¡Cola</li> ¡ </ul> ¡ <ul ¡class="b"> ¡ ¡ ¡<li>Coffee</li> ¡ ¡ ¡<li>Tea</li> ¡ ¡ ¡<li>Coca ¡Cola</li> ¡ </ul> ¡ <p>Example ¡of ¡ordered ¡lists:</p> ¡ <ol ¡class="c"> ¡ ¡ ¡<li>Coffee</li> ¡ ¡ ¡<li>Tea</li> ¡ ¡ ¡<li>Coca ¡Cola</li> ¡ </ol> ¡ <ol ¡class="d"> ¡ ¡ ¡<li>Coffee</li> ¡ ¡ ¡<li>Tea</li> ¡ ¡ ¡<li>Coca ¡Cola</li> ¡ </ol> ¡ </body> ¡ </html> ¡

SLIDE 30

Text ¡Alignment ¡

 The ¡text-‑align ¡property ¡is ¡used ¡to ¡set ¡the ¡horizontal ¡

alignment ¡of ¡a ¡text. ¡

 Text ¡can ¡be ¡centered, ¡or ¡aligned ¡to ¡the ¡left ¡or ¡right, ¡or ¡

justified. ¡

 When ¡text-‑align ¡is ¡set ¡to ¡"justify", ¡each ¡line ¡is ¡stretched ¡

so ¡that ¡every ¡line ¡has ¡equal ¡width, ¡and ¡the ¡left ¡and ¡ right ¡margins ¡are ¡straight ¡ ¡For ¡Example: ¡ ¡ ¡ ¡ ¡ ¡ ¡h1 ¡{text-‑align:center;} ¡ p.date ¡{text-‑align:right;} ¡ p.main ¡{text-‑align:justify;} ¡

SLIDE 31

<!DOCTYPE ¡html> ¡ <html> ¡ <head> ¡ <style> ¡ h1 ¡{text-‑align:center;} ¡ p.date ¡{text-‑align:right;} ¡ p.main ¡{text-‑align:justify;} ¡ </style> ¡ </head> ¡ ¡ <body> ¡ <h1>CSS ¡text-‑align ¡Example</h1> ¡ <p ¡class="date">May, ¡2009</p> ¡ <p ¡class="main">this ¡is ¡text ¡alignment ¡</p> ¡ </body> ¡ ¡ </html> ¡

SLIDE 32

SLIDE 33

Colors ¡

 CSS ¡colors ¡are ¡defined ¡using ¡a ¡hexadecimal ¡(hex) ¡

notation ¡for ¡the ¡combination ¡of ¡Red, ¡Green, ¡and ¡Blue ¡ color ¡values ¡(RGB). ¡The ¡lowest ¡value ¡that ¡can ¡be ¡given ¡ to ¡one ¡of ¡the ¡light ¡sources ¡is ¡0 ¡(hex ¡00). ¡The ¡highest ¡ value ¡is ¡255 ¡(hex ¡FF). ¡

 Hex ¡values ¡are ¡written ¡as ¡3 ¡double ¡digit ¡numbers, ¡

starting ¡with ¡a ¡# ¡sign. ¡

 W3C ¡has ¡listed ¡16 ¡color ¡names ¡that ¡will ¡validate ¡with ¡

an ¡HTML ¡validator. ¡

 The ¡color ¡names ¡are: ¡aqua, ¡black, ¡blue, ¡fuchsia, ¡gray, ¡

green, ¡lime, ¡maroon, ¡navy, ¡olive, ¡purple, ¡red, ¡silver, ¡ teal, ¡white, ¡and ¡yellow. ¡

 For ¡Example: ¡p{background-‑color:#ff0000;} ¡

SLIDE 34

<!DOCTYPE ¡html> ¡ <html> ¡ <head> ¡ <style> ¡ body ¡ { ¡ background-‑color:#996633; ¡ } ¡ h1 ¡ { ¡ color:orange; ¡ text-‑align:center; ¡ } ¡ p ¡ { ¡ font-‑family:"Times ¡New ¡Roman"; ¡ font-‑size:20px; ¡ } ¡ </style> ¡ </head> ¡ ¡ <body> ¡ ¡ <h1>CSS ¡example!</h1> ¡ <p>This ¡is ¡a ¡paragraph.</p> ¡ ¡ </body> ¡ </html> ¡

¡

SLIDE 35

BOX ¡MODEL ¡

 In ¡CSS, ¡the ¡term ¡"box ¡model" ¡is ¡used ¡when ¡talking ¡about ¡design ¡

and ¡layout. ¡

 The ¡CSS ¡box ¡model ¡is ¡essen(ally ¡a ¡box ¡that ¡wraps ¡around ¡HTML ¡

elements, ¡and ¡it ¡consists ¡of: ¡margins, ¡borders, ¡padding, ¡and ¡the ¡ actual ¡content. ¡

 The ¡box ¡model ¡allows ¡us ¡to ¡place ¡a ¡border ¡around ¡elements ¡

and ¡space ¡elements ¡in ¡rela(on ¡to ¡other ¡elements. ¡

¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡Margin ¡ ¡ ¡ ¡ ¡ ¡ ¡Border ¡ Padding ¡ Background-‑ ¡Color ¡

SLIDE 36

Borders ¡

 Borders ¡– ¡every ¡element ¡has ¡a ¡border-‑style ¡property ¡

¡Controls ¡whether ¡the ¡element ¡has ¡a ¡border ¡and ¡if ¡so, ¡the ¡style ¡of ¡the ¡border ¡

‑ ¡border-‑style ¡values: ¡none, ¡doXed, ¡dashed ¡and ¡double ¡
‑ ¡border-‑width ¡– ¡thin, ¡medium ¡(default), ¡thick, ¡or ¡a ¡length ¡value ¡in ¡pixels ¡
‑ ¡Border ¡width ¡can ¡be ¡specified ¡for ¡any ¡of ¡the ¡four ¡borders ¡(e.g., ¡border-‑top-‑width) ¡
‑ ¡border-‑color ¡– ¡any ¡color ¡
‑ Border ¡color ¡can ¡be ¡specified ¡for ¡any ¡of ¡the ¡four ¡borders ¡(e.g., ¡border-‑top-‑color). ¡

For ¡Example: ¡ p.one ¡{border-‑style:solid; ¡

¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡border-‑width:5px; ¡ ¡

¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡border-‑color:red;} ¡ p.two ¡{border-‑style:solid; ¡

¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡border-‑width:medium; ¡ ¡

¡ ¡ ¡ ¡ ¡ ¡border-‑color:#foffff;} ¡

SLIDE 37

Margins ¡

 The ¡margin ¡clears ¡an ¡area ¡around ¡an ¡element ¡(outside ¡

the ¡border). ¡The ¡margin ¡does ¡not ¡have ¡a ¡background ¡ color, ¡and ¡is ¡completely ¡transparent. ¡

 The ¡top, ¡right, ¡bottom, ¡and ¡left ¡margin ¡can ¡be ¡changed ¡

independently ¡using ¡separate ¡properties. ¡A ¡shorthand ¡ margin ¡property ¡can ¡also ¡be ¡used, ¡to ¡change ¡all ¡ margins ¡at ¡once. ¡

 For ¡Example: ¡ ¡

¡ ¡ ¡margin-‑top:100px; ¡ margin-‑boXom:100px; ¡ margin-‑right:50px; ¡ margin-‑le`:50px; ¡

SLIDE 38

Padding ¡and ¡Background ¡Images ¡

 The ¡padding ¡clears ¡an ¡area ¡around ¡the ¡content ¡(inside ¡the ¡border) ¡of ¡an ¡

element. ¡The ¡padding ¡is ¡affected ¡by ¡the ¡background ¡color ¡of ¡the ¡element. ¡

¡ ¡ ¡ ¡ ¡The ¡top, ¡right, ¡boXom, ¡and ¡le` ¡padding ¡can ¡be ¡changed ¡independently ¡using ¡ separate ¡proper(es. ¡A ¡shorthand ¡padding ¡property ¡can ¡also ¡be ¡used, ¡to ¡change ¡ all ¡padding's ¡at ¡once. ¡

 ¡For ¡Example: ¡padding:25px ¡50px; ¡  Background ¡Images: ¡The ¡background-‑image ¡property ¡specifies ¡an ¡image ¡to ¡use ¡

as ¡the ¡background ¡of ¡an ¡element. ¡ ¡ ¡ ¡ ¡By ¡default, ¡the ¡image ¡is ¡repeated ¡so ¡it ¡covers ¡the ¡en(re ¡element. ¡ ¡ ¡ ¡ ¡ ¡Repe((on ¡can ¡be ¡controlled ¡ ¡ ¡ ¡ ¡background-‑repeat ¡property: ¡repeat ¡(default), ¡no-‑repeat, ¡repeat-‑x, ¡or ¡repeat-‑y ¡ ¡ ¡ ¡ ¡background-‑posi(on ¡property: ¡top, ¡center, ¡boXom, ¡le`, ¡or ¡right ¡ ¡ ¡ ¡For ¡example: ¡body ¡{ ¡background-‑image:url('img_tree.png'); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡background-‑repeat:no-‑repeat; ¡} ¡

¡

SLIDE 39

<!DOCTYPE ¡html> ¡ <html> ¡ <head> ¡ <style> ¡ div.ex ¡ { ¡ width:220px; ¡ padding:10px; ¡ border:5px ¡solid ¡gray; ¡ margin:0px; ¡ } ¡ </style> ¡ </head> ¡ ¡ <body> ¡ ¡ <img ¡src="C:\Users\samreen \Desktop\webdesign.jpg" ¡ width="250" ¡height="250" ¡/> ¡ <div ¡class="ex">The ¡picture ¡above ¡ is ¡250px ¡wide. ¡ The ¡total ¡width ¡of ¡this ¡element ¡is ¡ also ¡250px.</div> ¡ ¡ </body> ¡ </html> ¡

SLIDE 40

<span> ¡and ¡<div> ¡tags ¡

 The ¡DIV ¡tag ¡creates ¡sec(ons ¡of ¡blocks ¡in ¡the ¡webpage, ¡whose ¡

shape ¡and ¡graphic ¡content ¡can ¡be ¡manipulated ¡separately. ¡ ¡It ¡ has ¡only ¡one ¡HTML ¡attribute ¡-‑ ¡align ¡ ¡

 The ¡<div></div> ¡tag ¡is ¡one ¡of ¡the ¡most ¡used ¡HTML ¡elements, ¡

because ¡in ¡combina(on ¡with ¡CSS ¡proper(es ¡it ¡can ¡create ¡ special ¡graphical ¡effects, ¡and ¡inside ¡it ¡you ¡can ¡include ¡any ¡HTML ¡ elements: ¡tables, ¡forms, ¡paragraphs, ¡lines ¡or ¡other ¡DIVs. ¡The ¡ area ¡of ¡the ¡DIV ¡block ¡can ¡have ¡its ¡own ¡background, ¡length, ¡ height ¡and ¡borders ¡with ¡different ¡lines. ¡

 For ¡Example: ¡

¡ ¡ ¡ ¡ ¡<div ¡style="color:#0000FF"> ¡ ¡ ¡<h3>This ¡is ¡a ¡heading</h3> ¡ ¡ ¡<p>This ¡is ¡a ¡paragraph.</p> ¡ ¡ ¡</div> ¡

SLIDE 41

 SPAN ¡tag ¡creates ¡the ¡possibility ¡of ¡changing ¡a ¡

separated ¡portion ¡from ¡a ¡context, ¡it ¡can ¡also ¡be ¡used ¡as ¡ a ¡"class" ¡with ¡CSS. ¡Alone ¡it ¡has ¡no ¡proper ¡visual ¡effect ¡ and ¡it ¡does ¡not ¡use ¡any ¡special ¡HTML ¡attribute. ¡

 With ¡the ¡<span></span> ¡tag ¡you ¡can ¡add ¡different ¡

graphic ¡styles ¡to ¡a ¡certain ¡portion ¡of ¡content. ¡This ¡ should ¡be ¡used ¡together ¡with ¡CSS ¡properties ¡that ¡can ¡ be ¡added ¡by ¡an ¡attribute ¡"style" ¡inside ¡the ¡label ¡ "<span>" ¡(or ¡style ¡sheets). ¡

 For ¡Example: ¡ ¡

<p>My ¡mother ¡has ¡<span ¡style="color:blue">blue</ span> ¡eyes.</p> ¡ ¡ ¡

SLIDE 42

¡

<html> ¡ <head> ¡ <(tle>Pseudo ¡classes</(tle> ¡ <style ¡type="text/css"> ¡ a:link ¡{color: ¡green;} ¡ a:visited ¡{color: ¡blue; ¡} ¡ a:hover{color: ¡gray; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ background-‑color: ¡#f0f8ff; ¡ text-‑decora(on: ¡none;} ¡ a:ac(ve ¡{color: ¡black;} ¡ </style> ¡ </head> ¡ <body> ¡ <div ¡id="header"> ¡ ¡ ¡ ¡ ¡<div ¡id="lntroduc(on ¡to ¡HTML ¡and ¡CSS"> ¡ ¡ ¡ ¡ ¡ ¡<h1> ¡lntroduc(on ¡to ¡HTML ¡and ¡CSS ¡ ¡ ¡ ¡<img ¡src="C:\Users\samreen\Desktop\basics-‑of-‑web-‑design ¡(1).jpg" ¡ ¡width="1400" ¡height="300“ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡alt="Guide ¡to ¡Web ¡Designing“ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡style="float:right"/> ¡</h1> ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡<div ¡id="tagline"> ¡ ¡ ¡ ¡ ¡ ¡<h3>click ¡on ¡the ¡links ¡below:</h3> ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡<ul ¡id="menu"> ¡ ¡ ¡<li><a ¡href="hXp://www.html.net/" ¡target="_blank">HTML.net ¡main ¡page</a></li><br ¡/> ¡ ¡<li><a ¡href="hXp://www.html.net/tutorials/html/" ¡target="_blank">HTML ¡tutorial</a></li><br ¡/> ¡ ¡ ¡<li><a ¡href="hXp://www.html.net/tutorials/css/">CSS ¡tutorial</a></li><br ¡/> ¡ ¡ ¡ ¡ ¡<li><a ¡href="hXp://www.html.net/tutorials/javascript/" ¡target="_blank">JavaSript ¡ ¡tutorial</a></li> ¡ </ul> ¡ </div><!-‑-‑end ¡header ¡-‑-‑> ¡ </body> ¡ </html> ¡ ¡ ¡

Example ¡Using ¡<div> ¡tag ¡

SLIDE 43

Output ¡using ¡<Div> ¡tag ¡

SLIDE 44

Example ¡using ¡Span ¡tab ¡

<html> ¡ <head> ¡ <(tle>Pseudo ¡classes</(tle> ¡ <style ¡type="text/css"> ¡ a:link ¡{color: ¡green;} ¡ a:visited ¡{color: ¡blue; ¡} ¡ a:hover{color: ¡gray; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ background-‑color: ¡#f0f8ff; ¡ text-‑decora(on: ¡none;} ¡ a:ac(ve ¡{color: ¡black;} ¡ </style> ¡ </head> ¡ <body> ¡ <div ¡id="header"> ¡ ¡ ¡ ¡ ¡<div ¡id="lntroduc(on ¡to ¡HTML ¡and ¡CSS"style="float: ¡le`; ¡background: ¡#eee; ¡ color: ¡#4f4f4f; ¡font-‑family: ¡Verdana, ¡Arial, ¡Helve(ca;"> ¡ ¡ ¡ ¡ ¡<span ¡style="color: ¡#777778; ¡font-‑weight: ¡bold;">HERE ¡YOU ¡GO!!!!!!! ¡ ¡<h1> ¡lntroduc(on ¡to ¡HTML ¡and ¡CSS ¡ ¡ ¡ ¡<img ¡src="C:\Users\samreen\Desktop\basics-‑of-‑web-‑design ¡(1).jpg" ¡ ¡width="1400" ¡height="300“ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡alt="Guide ¡to ¡Web ¡Designing“ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡style="float:right"/> ¡ ¡</h1> ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡<div ¡id="tagline"> ¡ ¡ ¡ ¡ ¡ ¡<h3>click ¡on ¡the ¡links ¡below:</h3> ¡ ¡ ¡ ¡ ¡</div> ¡ ¡ ¡ ¡ ¡<ul ¡id="menu"> ¡ ¡ ¡<li><a ¡href="hXp://www.html.net/" ¡target="_blank">HTML.net ¡main ¡page</a></li><br ¡/> ¡ ¡<li><a ¡href="hXp://www.html.net/tutorials/html/" ¡target="_blank">HTML ¡tutorial</a></li><br ¡/> ¡ ¡ ¡<li><a ¡href="hXp://www.html.net/tutorials/css/">CSS ¡tutorial</a></li><br ¡/> ¡ ¡ ¡ ¡ ¡<li><a ¡href="hXp://www.html.net/tutorials/javascript/" ¡target="_blank">JavaSript ¡ ¡tutorial</a></li> ¡ </ul> ¡ </div><!-‑-‑end ¡header ¡-‑-‑> ¡ </body> ¡ </html> ¡

SLIDE 45