Cascading Style Sheets (CSS) 1

 What is CSS?  Why CSS?  How to write a CSS? 2

A Style sheet is a list of rules that determine the appearance of the elements of a web page. The term cascading refers to the styles on a Cascading Style sheet “cascade”(pass,connect) into other WebPages, and controls the fonts, spacing, colors, backgrounds and other display properties of web pages. 3 What is a Style Sheet?

Cascading Style Sheets(CSS) are great tools for separating HTML content from HTML display instead of having to code style settings in HTML for a Web page you can create a stylesheet that meets your needs and include that stylesheet. A centrally located stylesheet can be referenced from all the HTML pages for a website to ensure the same standardized look and feel for the entire site. 4 Why CSS?

If the stylesheet is centrally located, changing a body style from one font to another, a heading from one color to another, changes the display for that tag across the entire site. Style sheets not only allow you to specify the appearance of individual web page, but can also be used to provide a whole web site with a consistent overall look. 5 Why CSS?

Suppose you want all bold text to appear in red. My First Style Sheet B {color: red} I am bold and red 6 Writing your first style sheet

In this example, there is a single rule B {color:red} This rule has two parts. The first part of the rule, B, is called selector. A selector is used to select the elements in a web page that affects The second part of the rule is called the declaration. A declaration contains a property and a value. One or more selectors are used to pick out elements in the web page. The selector is followed by a single space. The property and value are separated by a colon and wrapped in {}. 7

There are three ways to link Style Sheets to HTML, categorised as follows 1) Inline Style Sheets 2) Embedded Style Sheets 3) Linked Style Sheets 8 Ways to Link Style sheets to HTML

Eg. Inline Style Sheet I am bold and red 9 Inline Style Sheet

Eg. Embedded Style Sheet B {color: red} I am bold and red 10 Embedded Style Sheets

You can place your style rules in separate files and apply the same rules to multiple documents. B {color:red} Create a new file that contains nothing but this rule.You can save the file with any name but the extension be given as.css, for example: save the file as mystyle.css. 11 Linked Style Sheets

Eg. Linked Style Sheet I am bold and red 12 Linked Style Sheets

The link tag has four attributes. The first attribute, TYPE specifies the MIME type of the linked file. Cascading style sheets have the MIME type “text/css”. The HREF attribute points to the file containing the style sheet. The REL attribute informs the browser that the linked file is a stylesheet. The TITLE attribute gives the style sheet a title. 13 Linked Style Sheets

You can apply a style rule to almost any HTML tag. Suppose you want all the text list to appear in red. Future Point <!- - B {color:red} OL {color:red} -- > I am bold and red I am red So am I 14 In this example, the single rule OL {color:red} affects the color of every item listed.If you have more than one list, the items in those lists appear in red as well. Both of the rules in this stylesheet have the same effect on the elements they select. The first rule makes everything contained in tag red; second rule makes everything contained in every ordered list red. To save typing, you can combine two rules into one: B, OL {color: red} Adding Styles to an HTML Tag

Adding Styles to a class of HTML tags Suppose you need to apply a rule to certain paragraphs in a web page, but not to all of them. For e.g., you may want the first paragraph to appear in 24-point type and the second paragraph to appear in 14-point type. To do this with style sheets, you need a way to distinguish between different instances of the tag. Using a special attribute in HTML we can achieve this. Every HTML tag has a CLASS attribute. The class attribute is used to divide tags into different classes. 15 Class Example <! – P.TheFirstClass {font-size: 24pt} P.TheSecondClass {font-size: 14pt} -- > I am the first paragraph and I am formatted with a 24 point font. I am the Second paragraph and I am formatted with a 14 point font. The text contained within the tags appears with different font sizes. The two fonts are distinguished by their respective CLASS attributes.

Adding Styles to Classes Till now we have seen, style sheet rules have been associated only with particular types of HTML tags. But you also can associate a rule with a class that is not associated with any particular tag. 16 Class Example I am bold and I am formatted with a 24 point font. I am in the paragraph and I am formatted with a 24 point font. Both the tag and the tag are associated with the same class. The text contained in both the tag and the tag is formatted with a 24-point font. The rule is not associated with any type of HTML tag. Instead the rule is associated with the class FreeClass. Note: Do not forget to add the initial period when specifying the class selector in the rule. If you forget the period, the browser thinks you are attempting to select an HTML tag for the rule rather than a class.

Adding styles to HTML tags Depending on Context Suppose you want bold text in a list to appear in the Courier typeface. However you don’t want text to appear in Courier outside the list or when the text is not bold. A number of ways you can do this. Using style sheets, you could create a special class and associate with only tags that appear in lists. In another way, we can achieve the same effect, by specifying that a rule should be applied only in certain contexts. For e.g., you can define a rule that effects text only when the text appears in bold and a list, but not in any other contexts. 17 Context Example I am bold but not in the courier typeface I am plain, but I am bold and use Courier! Yes, but I am bold and use Courier as well! The selector contains two HTML tags, but the tags are not separated by commas. The selector is applied only when a tag is contained within a tag. Text contained within the tag but not appearing in a list isn’t governed by this rule.

Examples BODY {font:10pt Arial,verdana; background: url(test.gif); margin-left: 0.5in; margin-right: 0.5in } P {font-family: verdana,arial; font-size: 12pt;font-weight: bold; font- style: italic ;color:green} P {font: bold italic 12pt verdana,arial} 18