Presented ¡By: ¡ Anwar ¡ ¡ Babita ¡
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. ¡ ¡
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 ¡
Cascading ¡Benefits ¡ ¡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 ¡
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 ¡ organize ¡content ¡ ¡and ¡ make ¡a ¡Web ¡page ¡ visually ¡appealing. ¡
Understanding ¡Style ¡Rules ¡ A ¡Style ¡Rule ¡is ¡composed ¡of ¡two ¡parts: ¡a ¡selector ¡ and ¡a ¡declaration. ¡ ¡ Property Declaration Selector ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ 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 ¡(:). ¡ ¡ ¡
Applying ¡a ¡Style ¡Sheet ¡ Three ¡ways ¡to ¡apply ¡a ¡style ¡to ¡an ¡HTML ¡or ¡XHTML ¡ document: ¡ ¡ • ¡Inline ¡Styles ¡ • Embedded ¡Style ¡Sheet ¡ • External ¡Style ¡Sheet ¡ ¡
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> ¡ ¡
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 ¡ ¡ ¡
<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> ¡
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> ¡ ¡ ¡ ¡
<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> ¡
External ¡style ¡sheet ¡ Because ¡an ¡embedded ¡style ¡sheet ¡only ¡applies ¡to ¡the ¡content ¡of ¡ one ¡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> ¡
Recommend
More recommend
