1 / 20

CASCADING STYLE SHEETS

CASCADING STYLE SHEETS. CSS Advantages. Lets you set up styles all in one place They can then be invoked just using the names. What CSS Can do. Change the look of your site easily since all styles are defined in one place

regina-clements
Download Presentation

CASCADING STYLE SHEETS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CASCADING STYLE SHEETS

  2. CSS Advantages Lets you set up styles all in one place They can then be invoked just using the names

  3. What CSS Can do Change the look of your site easily since all styles are defined in one place Use font sizes outside HTML’s limitation of seven reformat HTML tags– for instance, make the bold tag red with a special font Customize your link styles - get rid of the underline.

  4. Advantages of CSS You only have to enter your style components once Your site will load faster than if you coded everything separately because your CSS document will be cached on the user’s computer Allows users to override settings to make the site easier for them to use.

  5. Disadvantage of CSS work only on version 4 or later browsers The good news: more than 95% of all browsers render the basics.

  6. CSS Involve Styles : a definition of fonts, colors, etc. Selectors: your unique names for your styles

  7. Basic Types of Selectors Class : defines styles that can be used without redefining plain HTML tags Type : defines styles that modify the appearance of HTML tags ID : define styles fora single tag.

  8. Class and ID attributes The same class can be applied to multiple tags: <B class='1'> <P class='1'> BUT An ID selector should be unique for each tag: <B id='1'> <B id='2'> ....

  9. Syntax for Class Selectors .Selector {Property:Value;Property2:Value…} .NewBold {Font-Family:Arial;Color:red} applies to all the following <B class='NewBold' id='Name'>John</B> <B class='NewBold' id='LName'>Smith</B> <P class='NewBold' id='About'>...</P>

  10. Syntax for Type Selectors TAGNAME {Property:Value;Property2:Value…} B {Font-Family:Arial;Color:red} affects only the B tags <B class='NewBold' id='Name'>John</B> <B class='NewBold' id='LName'>Smith</B> <P class='NewBold' id='About'>...</P>

  11. Syntax for ID Selectors #Selector {Property:Value;Property2:Value…} #Name {Font-Family:Arial; Color:red} changes only the first tag: <B class='NewBold' id='Name'>John</B> <B class='NewBold' id='LName'>Smith</B> <P class='NewBold' id='About'>...</P>

  12. An Example <HTML> <HEAD> what follows defines a class called headline <style type="text/css"> .headline {color:red; font-size:22px; font-family:arial} </style> </HEAD> <BODY><b>This is normal bold</b><br><b class="headline">This is headline style bold</b> invokes the style defined above as headline </BODY> </HTML>

  13. What about conflicts? .NewBold {Color:red} B {Color:blue} #Name {Color:green} <B class='NewBold' id='Name'>...</B> where styles overlap, the most specific prevails: ID -> Class -> Type

  14. Tags that Invoke Styles <SPAN></SPAN> no line breaks before or after <DIV></DIV> inserts a line break before and after (like <P> or <TABLE>)

  15. Grouping Selectors Without grouping: .headlines{font-family:arial; color:black; background:yellow; font-size:14pt;}.sublines {font-family:arial; color:black; background:yellow; font-size:12pt;}

  16. With Grouping .headlines, .sublines, .infotext {font-family:arial; color:black; background:yellow;}.headlines {font-size:14pt;}.sublines {font-size:12pt;}.infotext {font-size: 10pt;}

  17. This applies Styles to one page <HTML> <HEAD> what follows defines a class called headline <style type="text/css"> .headline {color:red; font-size:22px; font-family:arial} </style> </HEAD> <BODY><b>This is normal bold</b> <b class="headline">This is headline style bold</b> invokes the style defined above as headline </BODY> </HTML>

  18. But you can define styles to apply to your entire site… By writing all CSS definitions to a text file that is loaded with the first page that a visitor sees at your site.

  19. Call your text file something.css For instance: news.css Where you’ve coded: .headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;} .headlines {font-size:14pt;}.sublines {font-size:12pt;}

  20. Then go get it Code in the HEAD SECTION of each page: <link rel=stylesheet href=“news.css" type="text/css">

More Related