IS 360 Declaring CSS Styles

Slide 2 Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of style declaration

Slide 3 Three ways to Declare a Style Inline The style is declared as part of the element declaration in the element’s body We really don’t use these much beyond testing Embedded Declared in the header of the Web page ( ) element External The style is declared in a CSS page and used by the referencing HTML 5 page

Slide 4 Inline Style Declaration Set the style property of an element The property’s value contains a style declaration as mentioned in the previous slide See InlineStyle.htm in the corresponding chapter example

Slide 5 Inline Style Declaration (Example) The style attribute contains the style declaration <p style="padding: 10px; margin: 10px; font-family: ‘arial'; font-size: 10pt; font-weight: bold; border: thin groove #000080; width: 300px;" > Some text

Slide 6 Embedded Style Sheets Embedded (internal) style sheets appear inside of a element in the section Multiple styles can be declared You can declare styles for common HTML elements such as or anything else

Slide 7 Embedded Style Sheets (Syntax) Each style has the following syntax selector { property:value; property:value } selector contains the HTML 5 tag, class, id Note the <> characters do not appear The property:value syntax is the same as before Note that the {} characters enclose the style See EmbeddedStyle.htm

Slide 8 Embedded Style Sheets Example

Slide 9 External Style Sheets Its just a file with an extension of.css Its contents are the same as the contents of a element Reference an external style sheet using the tag in an XHTML document It’s possible to reference several external style sheets using multiple tags

Slide 10 Using the Tag The tag has 3 important attributes rel – The relationship between the current document and the linked document Always “ stylesheet ” type – MIME type Always “ text/css ” href – The URL of the linked CSS Absolute and relative URLs are permitted

Slide 11 Using the Tag (Example) Link to the CSS named using a relative directory reference <link rel=“stylesheet" href="MainStyle.css" type="text/css" /> See ExternalStyle.htm and MainStyle.css

Slide 12 Conflict Resolution It’s possible that an inline, internal, or external style element will conflict Styles are applied in the following order External style sheets Embedded style sheets Inline styles Thus, inline styles will override embedded and external styles Embedded styles will override external styles

Slide 13 What we Mean by Cascade The concept of cascade is tied to three concepts (rules) Importance Specificity Source order After these rules are applied, a weight is applied to each rule to determine which one takes precedence