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

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.

Advantages of CSSYou 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.

Disadvantage of CSS

work only on version 4 or later browsers

The good news: more than 95% of all browsers render the basics.

CSS Involve

Styles : a definition of fonts, colors, etc.

Selectors: your unique names for your styles

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 for a single tag.

Class and ID attributesThe same class can be applied to multiple tags:





BUT

An ID selector should be unique for each tag:





....

Syntax for Class Selectors

.Selector {Property:Value;Property2:Value…}

.NewBold {Font-Family:Arial;Color:red}

applies to all the following

John

Smith

...

Syntax for Type Selectors

TAGNAME {Property:Value;Property2:Value…}

B {Font-Family:Arial;Color:red} affects only the B tags

JohnSmith...

Syntax for ID Selectors

#Selector {Property:Value;Property2:Value…}

#Name {Font-Family:Arial; Color:red}

changes only the first tag:

John

Smith

...

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>This is normal bold This is headline style bold invokes the style defined above as headline

</BODY>

</HTML>

What about conflicts?

.NewBold {Color:red}

B {Color:blue}

#Name {Color:green}

...

where styles overlap, the most specific prevails:ID -> Class -> Type

Tags that Invoke Styles



no line breaks before or after

<DIV></DIV> inserts a line break before and after

(like or <TABLE>)

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;}

With Grouping

.headlines, .sublines, .infotext

{font-family:arial; color:black; background:yellow;}

.headlines {font-size:14pt;}

.sublines {font-size:12pt;}

.infotext {font-size: 10pt;}

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>This is normal bold

This is headline style bold invokes the style defined above as headline

</BODY>

</HTML>

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.

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;}

Then go get it

Code in the HEAD SECTION of each page:

<link rel=stylesheet href=“news.css" type="text/css">

CASCADING STYLE SHEETS

Documents

Transcript of CASCADING STYLE SHEETS