css hadas kahsay. overview what is css basic syntax of css rules how to link css style to html...

CSSCSSHadas KahsayHadas Kahsay

Overview Overview What is CSSWhat is CSS Basic syntax of CSS RulesBasic syntax of CSS Rules How to link CSS style to html documentsHow to link CSS style to html documents Browsers and CSSBrowsers and CSS Advantages of CSS Advantages of CSS Disadvantages of CSSDisadvantages of CSS Conclusion Conclusion

What is CSSWhat is CSS Stands for cascading Style Sheets (CSS)Stands for cascading Style Sheets (CSS) It was developed by W3C in 1996It was developed by W3C in 1996 New feature being added to html that allows New feature being added to html that allows

web designers more control over how pages are web designers more control over how pages are displayed.displayed.

It is a simple styling language which allows It is a simple styling language which allows attaching style to html elementsattaching style to html elements

Allows designers create style sheets that define Allows designers create style sheets that define how different elements in html appear. how different elements in html appear.

It is used to specify styles such as fonts, It is used to specify styles such as fonts, background colors, margins, etc.background colors, margins, etc.

The purpose of CSS is to separate style The purpose of CSS is to separate style information from contents. information from contents.

Basic syntax Rules of CSSBasic syntax Rules of CSS H1 {color: green}H1 {color: green} CSS rules consists two partsCSS rules consists two parts -Selector-Selector - Declaration- Declaration

Basic syntax Rules of CSS (cont)Basic syntax Rules of CSS (cont)

Declaration also Declaration also consists two partsconsists two parts

-Property-Property -Values-Values

Basic syntax Rules of CSS (cont)Basic syntax Rules of CSS (cont)

Setting Rule for Multiple html elementsSetting Rule for Multiple html elements H1 {color: green}H1 {color: green} H2 {color: green}H2 {color: green} H3 {color: green}H3 {color: green} Group elements togetherGroup elements together H1, H2, H3 {color: green}H1, H2, H3 {color: green}

Basic syntax Rules of CSS (cont)Basic syntax Rules of CSS (cont)

Setting Rules for one element w/multiple Setting Rules for one element w/multiple rulesrules

H1 {color: blue}H1 {color: blue} H1 {text-align: center}H1 {text-align: center} H1 {background: yellow}H1 {background: yellow}

Basic syntax Rules of CSS (cont)Basic syntax Rules of CSS (cont) Use the element onceUse the element once H1 { color: blue; text-align: center; background: H1 { color: blue; text-align: center; background:

yellow }yellow } OrOr H1 H1 { color: blue;{ color: blue; text-align: center;text-align: center; background: yellow }background: yellow }

Basic syntax Rules of CSS (cont)Basic syntax Rules of CSS (cont)

Setting CSS rules using body elementSetting CSS rules using body element body { background: yellow; font-style: italic}body { background: yellow; font-style: italic} P {font-family: Verdana; font-size: 12pt}P {font-family: Verdana; font-size: 12pt} H1,H2,H3{color:blue; background: white; H1,H2,H3{color:blue; background: white;

text-align: center}text-align: center}

Basic syntax Rules of CSS (cont)Basic syntax Rules of CSS (cont)

Background colorsBackground colors body {background: yellow; color: green}body {background: yellow; color: green} H1, p {background: white; color: blue}H1, p {background: white; color: blue} P B,UL {color: red}P B,UL {color: red}

Basic syntax Rules of CSS (cont)Basic syntax Rules of CSS (cont)

Setting colors for linksSetting colors for links a: link {color: blue; text-decoration: none}a: link {color: blue; text-decoration: none} a: visited {color: red}a: visited {color: red} a: active {color: green}a: active {color: green} a: hover {color: yellow}a: hover {color: yellow}

Linking CSS to html documentsLinking CSS to html documents

There are several ways to link CSS to html There are several ways to link CSS to html documentsdocuments

-Inline linking-Inline linking -Internal linking-Internal linking -Linking to an external style sheets-Linking to an external style sheets

Example of Inline linkingExample of Inline linking

Inline linking resultInline linking result

Internal LinkingInternal Linking Apply using style Apply using style

elementselements

ResultResult

Class attributeClass attribute Example of CSS Class attribute Example of CSS Class attribute

rulesrules

ResultResult

More example of class attributeMore example of class attribute Example of Example of

border/List rulesborder/List rules

Class attribute (cont)Class attribute (cont)

ResultResult

Linking to an externalLinking to an external Example of Linking to Example of Linking to

an external filesan external files

TestStyle.cssTestStyle.css

ResultResult

Browsers and CSSBrowsers and CSS Most browsers support CSSMost browsers support CSS for instance, Microsoft internet for instance, Microsoft internet

Explorer 4(IE4), Netscape Explorer 4(IE4), Netscape navigator4(NS4) and Opera navigator4(NS4) and Opera 3.5(O3.5) support CSS3.5(O3.5) support CSS

Some browsers don’t support CSSSome browsers don’t support CSS for instance, Netscape’s for instance, Netscape’s

Navigator 1 and Microsoft Internet Navigator 1 and Microsoft Internet Explorer 2 don’t support CSS Explorer 2 don’t support CSS style. The browsers that don’t style. The browsers that don’t support CSS just ignore the style support CSS just ignore the style but display the contents of the but display the contents of the style on the screen which is not style on the screen which is not necessary. necessary.

Browser and CSS (cont)Browser and CSS (cont)

Advantages of CSSAdvantages of CSS Web pages will load faster because of the Web pages will load faster because of the

reduced redundant coding from each pagereduced redundant coding from each page Allows designers to change colors, fonts, etc.Allows designers to change colors, fonts, etc. Easier to update web site designs.Easier to update web site designs. More control over your pageMore control over your page Structured contents in your web document and Structured contents in your web document and

well organizedwell organized Allows shared style sheets across multiple Allows shared style sheets across multiple

documentsdocuments Reduced design/development timeReduced design/development time

Disadvantages of CSSDisadvantages of CSS It is not understood by some of the browsersIt is not understood by some of the browsers It can mess up your pages if you don’t be carefulIt can mess up your pages if you don’t be careful

ConclusionConclusion

CSS improves the look and feel of your CSS improves the look and feel of your web page designsweb page designs

Reduce coding timeReduce coding time I recommend it I recommend it

Questions Questions