Intro To Cascading Style Sheets By Mario Yannakakis

Intro To Cascading Intro To Cascading Style SheetsStyle Sheets

By Mario YannakakisBy Mario Yannakakis

Why Use CSS?Why Use CSS?

Separate form and structureSeparate form and structure

Control layoutControl layout

Make smaller, faster pagesMake smaller, faster pages

Maintain and update many pages at onceMaintain and update many pages at once

Be Browser friendlyBe Browser friendly

Control text sizesControl text sizes and appearance and appearance

Separate form and Separate form and structurestructure

HTML defines the structureHTML defines the structure

CSS enables us to define the form or appearance CSS enables us to define the form or appearance within the structurewithin the structure

for examplefor example, , we could use an HTML <h1> to display heading we could use an HTML <h1> to display heading text . . .text . . .then use a CSS style to define the specific appearance then use a CSS style to define the specific appearance for the heading where we want it to appear different to for the heading where we want it to appear different to the default display for <h1> the default display for <h1>

Make smaller faster Make smaller faster pagespages

Avoid the need to add attributes to HTML tags every Avoid the need to add attributes to HTML tags every timetime

Specify the attributes for each tag in the style sheetSpecify the attributes for each tag in the style sheet

Obtain consistency of appearance Obtain consistency of appearance

Maintain and update Maintain and update pages more efficientlypages more efficiently

Link HTML pages to a Style SheetLink HTML pages to a Style Sheet

Update attributes for a single page or a site or even Update attributes for a single page or a site or even multiple sites by changing one document onlymultiple sites by changing one document only

StyleSheet

Be Browser friendlyBe Browser friendly

Users don’t get code or other errors if using a Users don’t get code or other errors if using a browser that doesn’t support the stylebrowser that doesn’t support the style

Browsers that don’t recognise the CSS, simply Browsers that don’t recognise the CSS, simply

ignore it.ignore it.

Methods for using Style Methods for using Style SheetsSheets

Place the style sheet information directly in the <head> tags of the HTML document. For adding styles one page at a time.

Link to an external style sheet from the HTML document. The external file will set the style for all linked pages

Obtain style from an external style sheet, similar to Linking, but can’t be combined with other style methods

Add the style information inline in the HTML document

1

2

3

4

EmbedEmbed

LinkLink

ImportImport

InlineInline

Adding a styleAdding a style

A style A style tagtag is added inside the <head> tags and is added inside the <head> tags and includes the includes the typetype attribute with a attribute with a valuevalue of text/css as of text/css as follows:follows:

<style type="text/css">

tag attribute value

This is then followed by the Rules for the styles. The Rules cab be placed between Comment marks.

</style>

Adding a style (cont.)Adding a style (cont.)

-->

Comment tags allow Browsers that don’t supportCSS to ignore the style sheet code altogether.Otherwise the style sheets code will display.

<style type="text/css">

</style>


RulesRulesA simple rule might be:A simple rule might be:

h1 {color:green}

This rule tells the Browser that all text surrounded by the <h1></h1> tags should be displayed as green


Each Each rulerule consists of: consists of:

SelectorSelector

DeclarationDeclaration

In the example, h1 is the selector – the HTML tag that the style is being attached to.

Defines what the style actually is and consists of two parts:

Property – in our example this is colorand is separated from the value by a colon :

Value – in our example this is green

The Declaration is enclosed in braces { }

Example h1 {color:green}


When a number of selectors share the same When a number of selectors share the same declaration, they can be grouped in one declaration, they can be grouped in one rule. Each selector is separated from the rule. Each selector is separated from the next with a comma next with a comma

h1, p, blockquote {font-family:Arial}

Style InheritanceStyle InheritanceStyle sheet rules are inherited from Style sheet rules are inherited from

Parent to Child:Parent to Child:

b {color:blue}

In the above example the italic text will inherit the blue of the bold text because the italic tags are nested within the bold tags:

<b> Testing <i>Style</i> Tags</b>

ClassesClassesAny HTML tag can serve as a selector.Any HTML tag can serve as a selector.

You can also create different You can also create different classesclasses..

The following example uses three classes for The following example uses three classes for Heading 1:Heading 1:

<style type="text/css"></style>

Always place a full-stop before the class

ClassesClasses

To use these defined class styles within a To use these defined class styles within a document:document:

<h1 class="first">Your heading</h1>

Styles to be used for Styles to be used for class exercises:class exercises:

Selectors:h1h2a:visiteda:linka:active

Declaration Properties:

font-weight:font-family:font-size:color:text-align:background-color:

Examples of values:

bold, bolder, lightmonospace, sans-serif22pt, 20px#9933CC, yellowcenter, right#9933CC, yellow

New TagNew Tag<blockquote> this is the text </blockquote><blockquote> this is the text </blockquote>

CSS SummaryCSS Summary Style sheets allow you to control the appearance of HTML pages, Style sheets allow you to control the appearance of HTML pages,

individually or many pages at a timeindividually or many pages at a time Style sheets allow you to modify data beyond the normal defaults Style sheets allow you to modify data beyond the normal defaults

of HTML tags and attributesof HTML tags and attributes Style tags <style type="text/css"></style> are placed between Style tags <style type="text/css"></style> are placed between

<head> tags<head> tags Styles are enclosed within commentsStyles are enclosed within comments

<!–- and --> so that browsers which can’t display them, ignore them<!–- and --> so that browsers which can’t display them, ignore them Style Rule components are:Style Rule components are:

Declaration{property:value}

Selector

Documents

Intro To Cascading Style Sheets By Mario Yannakakis