Download presentation
Presentation is loading. Please wait.
1
>> CSS Rules Selection
2
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 “,”
3
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
4
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
5
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
6
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
7
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;
8
Order The last instance of the style declared is the one applied to the page div { color:red; } color: green; Main Hello World
9
Importance Forcing a style to be applied irrespective of the rules div { color:red !important; } color: green; Main Hello World
10
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
11
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
12
Specificity - Practice
<h1>This is <strong class="hilight">Amazing</strong></h1> Rule 1: h1 .hilight { color: purple; } Rule 2:.hilight { color: orange; } Which one?
13
The “C” in CSS Highest Lowest Inline Styles Importance Specificity
Order Inherited Browser Defaults Lowest
14
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
Similar presentations
