>> CSS Rules Selection
Recall CSS allows adding style to HTML CSS Rule = Selector + Declaration Declaration = Property + Value Types of Selectors Element/Type Selector ID Selector (#) Class Selector (.) Combining Selectors Use a “,”
Web-based Systems | Misbhauddin Source Location 1 of 3: Inline Styles <h1 style="color : red;" >Welcome to my page</h1> Style attribute Note: Affects only the tag it is in Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Source Location 2 of 3: Embedded Styles <head> <style type="text/css"> h1 { color : red; } </style> </head> Usually in the head tag Note: Affects the entire page it is on. Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Source Location style.css 3 of 3: External Styles h1 { color : red; } Usually in the head tag <html> <head> <link rel="stylesheet“ href=“style.css“ type="text/css“ /> </head> <body> </body> </html> Note: Affects any page it is linked to Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Origin Style sheets defined by the author of the HTML file Author Styles Style sheets defined by the user of the machine User Styles Every browser has a different way of displaying elements Browser Defaults Web-based Systems | Misbhauddin
Inheritance A tag can inherit styles defined by the parent tag, except for some properties such as margin, padding, ….. <div> <h1>Main</h1> <p>Hello World</p> </div div { color:red; } Main Hello World Overriding Inheritance Forcing Inheritance Use “inherit” value in the property Define another rule which is more specific Example: margin: inherit;
Order The last instance of the style declared is the one applied to the page div { color:red; } color: green; Main Hello World
Importance Forcing a style to be applied irrespective of the rules div { color:red !important; } color: green; Main Hello World
1 (# of element selectors) Specificity The more specific you are about the context of a CSS rule, the more likely it is that the style will be applied to the element. Lowest Element Selector Rule Weight Calculation 100(# of ID selectors) + 10 (# of class selectors) 1 (# of element selectors) Class Selector Highest ID Selector
Web-based Systems | Misbhauddin 2 2 2 Inline Important ID Class Element / Type Div span .class #id1 #id2 .test Div span .class Web-based Systems | Misbhauddin
Specificity - Practice <h1>This is <strong class="hilight">Amazing</strong></h1> Rule 1: h1 .hilight { color: purple; } Rule 2:.hilight { color: orange; } Which one?
The “C” in CSS Highest Lowest Inline Styles Importance Specificity Order Inherited Browser Defaults Lowest
Next on Web-based Systems Cascading Style Sheets More on CSS Selectors Using to format the layout of an HTML page Using <div>, <span> tags and CSS code