Cascading Style Sheets (css)

Cascading Style Sheets (CSS)

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

What is a Style Sheet? 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.

Why CSS? 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.

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.

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

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 {}.

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

Inline Style Sheet Eg. I am bold and red

Embedded Style Sheets Eg. <Title>Embedded Style Sheet <style> B {color: red} I am bold and red

Linked 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.

Linked Style Sheets

Eg. I am bold and red

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.

Adding Styles to an HTML Tag

You can apply a style rule to almost any HTML tag. Suppose you want all the text list to appear in red. In this example, the single rule OL {color:red} affects the color of <TITLE> Future Point every item listed.If you have more <STYLE> than one list, the items in those have the same effect on the elements they select. The first rule makes everything contained in tag red; second rule makes I am bold and red everything contained in every

ordered list red. To save typing,
1. I am red you can combine two rules into one:
2. So am I B, OL {color: red}

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.

<TITLE> Class Example <STYLE>

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.



<TITLE> Class Example <STYLE> 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. <TITLE>Context Example <STYLE> 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; fontstyle: italic ;color:green} P {font: bold italic 12pt verdana,arial}