Presentation is loading. Please wait.

Presentation is loading. Please wait.

Intro To Cascading Style Sheets By Mario Yannakakis.

Similar presentations


Presentation on theme: "Intro To Cascading Style Sheets By Mario Yannakakis."— Presentation transcript:

1 Intro To Cascading Style Sheets By Mario Yannakakis

2 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

3 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

4 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

5 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    

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

7 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

8 Adding a style  A style tag is added inside the tags and includes the type attribute with a value of text/css as follows:

10 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

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

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

13 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

14 Classes Any HTML tag can serve as a selector. You can also create different classes. The following example uses three classes for Heading 1: