css hadas kahsay. overview what is css basic syntax of css rules how to link css style to html...
DESCRIPTION
What is CSS Stands for cascading Style Sheets (CSS) It was developed by W3C in 1996 New feature being added to html that allows web designers more control over how pages are displayed. It is a simple styling language which allows attaching style to html elements Allows designers create style sheets that define how different elements in html appear. It is used to specify styles such as fonts, background colors, margins, etc. The purpose of CSS is to separate style information from contents.TRANSCRIPT
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