cascading style sheets (css) 1. what is css? why css? how to write a css? 2

18
Cascading Style Sheets (CSS) 1

Upload: ethel-chambers

Post on 26-Dec-2015

261 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

Cascading Style Sheets (CSS)

1

Page 2: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

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

2

Page 3: 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?

Page 4: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

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?

Page 5: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

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?

Page 6: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

Suppose you want all bold text to appear in red.<html><head><Title>My First Style Sheet</Title><style>B {color: red}</style></head><body><b> I am bold and red </b></body></html>

6

Writing your first style sheet

Page 7: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

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

Page 8: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

There are three ways to link Style Sheets to HTML, categorised as follows1) Inline Style Sheets2) Embedded Style Sheets3) Linked Style Sheets

8

Ways to Link Style sheets to HTML

Page 9: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

Eg. <html><head><title>Inline Style Sheet</title></head><body><b style=“color:red”>I am bold and red</b></body></html>

9

Inline Style Sheet

Page 10: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

Eg. <html><head><Title>Embedded Style Sheet</Title><style>B {color: red}</style></head><body><b> I am bold and red </b></body></html>

10

Embedded Style Sheets

Page 11: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

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

Page 12: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

Eg. <html><head><title>Linked Style Sheet</title><link type=“text/css” href=“mystyle.css”

rel=stylesheet title=“mystyle”></head><body><b>I am bold and red</b></body></html>

12

Linked Style Sheets

Page 13: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

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

Page 14: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

You can apply a style rule to almost any HTML tag.Suppose you want all the text list to appear in red.<HTML><HEAD><TITLE> Future Point </TITLE><STYLE><!- - B {color:red}OL {color:red}-- ></STYLE></HEAD><BODY><B> I am bold and red </B><OL><LI>I am red<LI>So am I</OL></BODY></HTML>

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 <B> 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

Page 15: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

Adding Styles to a class of HTML tagsSuppose 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 <P> 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

<HTML>

<HEAD>

<TITLE> Class Example </TITLE>

<STYLE>

<! –

P.TheFirstClass {font-size: 24pt}

P.TheSecondClass {font-size: 14pt}

-- >

</STYLE>

</HEAD>

<BODY>

<P CLASS=“TheFirstClass”>

I am the first paragraph and I am formatted with a 24 point font.</P>

<P CLASS=“TheSecondClass”>

I am the Second paragraph and I am formatted with a 14 point font.</P>

</BODY>

</HTML>

The text contained within the <P> tags appears with different font sizes. The two fonts are distinguished by their respective CLASS attributes.

Page 16: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

Adding Styles to ClassesTill 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

<HTML><HEAD><TITLE> Class Example </TITLE><STYLE><! –.FreeClass {font-size: 24pt}-- ></STYLE></HEAD><BODY><B CLASS=“FreeClass”>I am bold and I am formatted with a 24 point font.</B><P CLASS=“FreeClass”>I am in the paragraph and I am formatted with a 24 point font.</P></BODY></HTML>

Both the <B> tag and the <P> tag are associated with the same class. The text contained in both the <B> tag and the <P> 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.

Page 17: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

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 <B> 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

<HTML><HEAD><TITLE>Context Example</TITLE><STYLE><! –UL B {font-family: Courier}-- ></STYLE></HEAD><BODY><B> I am bold but not in the courier typeface </B><UL><LI> I am plain, but I am <B>bold and use Courier!</B><LI> Yes, but I am <B>bold and use Courier</B> as well!</UL></BODY></HTML>

The selector contains two HTML tags, but the tags are not separated by commas. The selector is applied only when a <B> tag is contained within a <UL> tag. Text contained within the <B> tag but not appearing in a list isn’t governed by this rule.

Page 18: Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2

ExamplesBODY {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