Intro To Cascading Style Sheets By Mario Yannakakis

Why Use CSS?  Separate form and structure  Control layout  Make smaller, faster pages  Maintain and update many pages at once  Be Browser friendly  Control text sizes and appearance

Separate form and structure  HTML defines the structure  CSS enables us to define the form or appearance within the structure for example, we could use an HTML to display heading text... then use a CSS style to define the specific appearance for the heading where we want it to appear different to the default display for  CSS enables us to define the form or appearance within the structure for example, we could use an HTML to display heading text... then use a CSS style to define the specific appearance for the heading where we want it to appear different to the default display for

Make smaller faster pages  Avoid the need to add attributes to HTML tags every time  Specify the attributes for each tag in the style sheet  Obtain consistency of appearance

Maintain and update pages more efficiently  Link HTML pages to a Style Sheet  Update attributes for a single page or a site or even multiple sites by changing one document only Style Sheet    

Be Browser friendly  Users don’t get code or other errors if using a browser that doesn’t support the style  Browsers that don’t recognise the CSS, simply ignore it.

Methods for using Style Sheets Place the style sheet information directly in the 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 Embed Link Import Inline

Adding a style  A style tag is added inside the tags and includes the type attribute with a value of text/css as follows: <style type= " text/css " > tagattributevalue This is then followed by the Rules for the styles. The Rules cab be placed between Comment marks.

Adding a style (cont.) <!-- h1 { color:green; font-size:37px; font-family:Arial; } --> Comment tags allow Browsers that don’t support CSS to ignore the style sheet code altogether. Otherwise the style sheets code will display. <style type= " text/css " > </style>

Adding a style (cont.)  Rules A simple rule might be: h1 { color:green } This rule tells the Browser that all text surrounded by the tags should be displayed as green

Adding a style (cont.) Each rule consists of:  Selector  Declaration 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 color and 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 }

Adding a style (cont.) When a number of selectors share the same declaration, they can be grouped in one rule. Each selector is separated from the next with a comma h1, p, blockquote { font-family:Arial }

Style Inheritance Style sheet rules are inherited from 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: Testing Style Tags

Classes Any HTML tag can serve as a selector. You can also create different classes. The following example uses three classes for Heading 1: <style type= " text/css " > <!-- h1.first {color:red} h1.second {color:orange} h1.third {color:yellow} --> Always place a full-stop before the class

Classes To use these defined class styles within a document: <h1 class="first">Your heading

Styles to be used for class exercises: Selectors: h1 h2 a:visited a:link a:active Declaration Properties: font-weight: font-family: font-size: color: text-align: background-color: Examples of values: bold, bolder, light monospace, sans-serif 22pt, 20px #9933CC, yellow center, right #9933CC, yellow New Tag this is the text New Tag this is the text

CSS Summary  Style sheets allow you to control the appearance of HTML pages, individually or many pages at a time  Style sheets allow you to modify data beyond the normal defaults of HTML tags and attributes  Style tags are placed between tags  Styles are enclosed within comments so that browsers which can’t display them, ignore them  Style Rule components are: Declaration {property:value} Selector