IS 360 Declaring CSS Styles
Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of style declaration (cascading and inheritance)
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
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
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 HTML 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" />
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 http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/ Remember that an HTML 5 document is hierarchical When positioning, we often position an element relative to its parent element
Importance The !important declaration makes certain that a rule will be applied Use only in “special” circumstances
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.
Specificity
Source Order If multiple selectors have the same importance and specificity, the last rule seen wins
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
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
Tutorial Following is a good tutorial of CSS cascading and inheritance https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance