IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style...

IS 360Declaring CSS Styles

Introduction Learn about the three ways to declare a

style Inline / embedded / external

Learn about the effect of style declaration

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 (<head>) element

External The style is declared in a CSS page and used by

the referencing HTML 5 page

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

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 </p>

Embedded Style Sheets Embedded (internal) style sheets

appear inside of a <style> element in the <head> section Multiple styles can be declared

You can declare styles for common HTML elements such as <p> or anything else

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

Embedded Style Sheets Example

External Style Sheets Its just a file with an extension of .css

Its contents are the same as the contents of a <style> element

Reference an external style sheet using the <link> tag in an XHTML document

It’s possible to reference several external style sheets using multiple <link> tags

Using the <link> Tag The <link> 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

Using the <Link> 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

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

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

IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style...

Documents

Transcript of IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style...