Download presentation
Presentation is loading. Please wait.
1
IS 360 Declaring CSS Styles
2
Introduction Learn about the three ways to declare a style
Inline / embedded / external Learn about the effect of style declaration (cascading and inheritance)
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 (<head>) element External The style is declared in a CSS page and used by the referencing HTML 5 page
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
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 </p>
6
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
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
8
Embedded Style Sheets Example
9
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 HTML document It’s possible to reference several external style sheets using multiple <link> tags
10
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
11
Using the <link> Tag (Example)
Link to the CSS named using a relative directory reference <link rel=“stylesheet" href="MainStyle.css" type="text/css" />
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
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 Remember that an HTML 5 document is hierarchical When positioning, we often position an element relative to its parent element
14
Importance The !important declaration makes certain that a rule will be applied Use only in “special” circumstances
15
Specificity A measure how specific a selector is
How many elements it could match Thousands: Score one in this column if the declaration is inside a style attribute (such declarations don't have selectors, so their specificity is always simply 1000.) Otherwise 0. Hundreds: Score one in this column for each ID selector contained inside the overall selector. Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector. Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.
16
Specificity
17
Source Order If multiple selectors have the same importance and specificity, the last rule seen wins
18
What we Mean by Inheritance
Some properties applied to an element will be applied to an element’s children Others are not Font-family and color are inherited You would not want to set the foreground color for every segment of text Border does not If you had a page border, everything inside a page would inherit (render) a border
19
Controlling inheritance
The inherit value makes an element inherit a property The initial value forces the element to use the browser default if there is on unset resets the property to it’s natural inheritance value
20
Tutorial Following is a good tutorial of CSS cascading and inheritance
Similar presentations
