Pedro Valente | Ricardo Costa [pvalente|rcosta]@upt.pt 07/10/2015 - [week4] - TP Linguagens e Tecnologias Web CSS Fundamentals: Selectors and Properties IMP.GE.87.0 Licenciatura em Informática 2º Ano, 1º Semestre Licenciatura em Tecnologias e Sistemas de Informação 3º Ano, 1º Semestre
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Pedro Valente | Ricardo Costa[pvalente|rcosta]@upt.pt
07/10/2015 - [week4] - TP
Linguagens e Tecnologias Web CSS Fundamentals: Selectors and Properties
IMP.GE.87.0
Licenciatura em Informática 2º Ano, 1º SemestreLicenciatura em Tecnologias e Sistemas de Informação 3º Ano, 1º Semestre
Agenda
CSS – Cascading Style Sheets
CSS Rules
CSS Selectors
Inheritance & Cascade
2
CSS
Cascading Style Sheets
3
Img src: http://blog.formstack.com
4
The CSS Saga
Starts in 1994 Writers of web pages were complaining that
they didn’t have enough influence over how their pages looked…In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."
This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementers
More info: http://www.w3.org/Style/LieBos2e/history/
Separation of document structure from the document’s layout (also been a goal of HTML from its inception in 1990)
Tim Berners-Lee wrote his NeXT browser/editor as being possible to determine the style of a simple style sheet…• …but he didn´t publish the syntax for the style sheet, considering is a matter for each browser
to decide how to best display pages to its users!
Declaration-based language.
CSS applies presentation styles to the HTML content through rules.
• Should therefore be written after marking up the content.• Otherwise it leads to poor semantic HTML: constrained by the needs of the design rather than
the content.
CSS has a particular behaviour that allows a lot of flexibility in creating the presentation rules.
5 More info: Tim Berners-Lee's original World Wide Web browser
To support IE8 only the first three colour formats should be used. The same property can be repeated with different colour formats because only the last one (recognised by the browser) will be used (see cascade).
CLASS: Using special names given to the class attribute of HTML elements.
ID: Using unique identifiers given to the id attribute of a single element.
p { … }h2 { … }input { … }
.special { … }
.example { … }
#hero { … }#user { … }
19
Types
IDs and classes (HTML)
<h1 id=“hero”>Welcome!</h1><p class=“special”>This is blue text</p><p id=“user” class=“special”>This is blue text with blue border</p>
IDs: only 1 HTML element may have each id (per page). It’s recommended they start with a letter, have no spaces and
avoid special symbols. Classes:
It’s recommended they start with a letter, have no spaces and avoid special symbols.
20
p {color: blue;
}
.special {color: blue;
}
If it’s necessary to apply the same style (property+value) using several selectors it’s possible to write all in the same rule, separating each selector with a comma:
p, .special {color: blue;
}21
Grouping selectors (Even of different types)
2 selectors separated by a comma
Complicating Combining selectors
We may wish to apply styles to HTML elements depending on the existence or certain value of attributes:input[type='submit'] { ... }input[required] { ... }
Only apply a style when an element is a child of another:article p { … }div form input { … }
22
Complicating Combining selectors (cont.) When an element is a first-level child of
another:article > p { … }div form > input { … }
When an element is a direct sibling of another:p + p { … }div form > label + input { … }
When an element is a sibling of another:p ~ p { … }div form > label ~ span { … }
23
Complicating Combining selectors (cont.)
When an HTML element has a specific class or id:a#user { … }div.special { … }
When an HTML element with a specific class has a certain attribute and it’s a first-level child of another element which has a specific id:#user > .special[required] { … }
24
Complicating Combining selectors (cont.)
Pseudo-classes: only apply a style rule when a certain state is achieved and can be combined with any type of selector: When the mouse is hovering over the element:
a:hover { … }
When the element with the specific class is selected:.bigbutton:active { … }
When the element with the specific id is the first child:li#me:first-child { … }
Even more:::before::first-letter::first-line::selection
26
Other
Even with this dynamic functions, CSS is still NOT a programming language!
Take note
The * selector should be used sparingly. Performance problems. The following is also bad:
div.grande fieldset * { … }
Pseudo-classes should also be used sparingly for the same reason.
The following selector is not only correct but also useful (why?): img#user { … }
27
Browsers parse selectors
right to left!
INHERITANCE & CASCADE
28
Img src: https://upload.wikimedia.org
Inheritance
In HTML elements are represented as as tree. The CSS styles of an element are, in most cases, inherited by its children.
This means that:<p>Hello <em>World</em>!</p>p { color: blue; }
Even the World word will be presented in blue, because the EM element is a child of the P element and the colour property in inherited.
29
Inheritance
Some CSS properties are not inherited, for instance an element’s 50% width does not force its children to also have a 50% width. If this was true it would lead to the following situation:
Assuming the following tree: body > main > article > pbody { width: 50%; }
30
body
mainarticlep
The inherit value may be used in all properties to force inheritance and create the effect on the
left
Inheritance
Even for inherited properties, it’s always possible to override the rules in the children when the inherited styles are not desired.
body {color: blue;
}
p {color: black;
}
31
Cascade
While inheritance shows how a single rule can be applied to many different elements depending on the HTML tree…
…the cascade shows how two or more contradictory rules are applied by browsers.
The cascade is influenced by the following mechanisms: Importance Specificity Order
32
Cascade – Importance
Depends on where and how the rule is defined: By the browser (called User Agent, or UA) By the user with normal declarations By the website (author) with normal
declarations By the website (author) with important
declarations By the user with important declarations
33
More importan
t
Important declarations
The “!important” keyword may be placed at the end of a CSS style value to turn it into an important rule declaration:
p {color: green !important;
}
This should be avoided at all costs! It’s very easy to paint ourselves into a corner where it becomes nearly impossible to create more important rules even when they’re needed!
34
Cascade – Specificity
Equation that chooses between two contradictory rules and applies one of them.
The equation has four terms (coloured different here). The browser resolves for each rule and then
compares the results. The comparison is performed left to right. Larger numeric values are more specific.
The most specific rule is the one that is applied by the browser.
35
, , ,More info: Inheritance and Cascading Styles in CSS ExplainedCSS: the cascade, specificity, and inheritance
Once the importance and specificity is calculated, there’s one last mechanism to remove a tie between contradictory rules.
Rules declared afterwards in a single CSS file have precedence.
Rules declared in a CSS file loaded afterwards have precedence.
For this reason, CSS files should be loaded in order from most generic to most particular, for instance:<link rel=“stylesheet” href=“global.css” /><link rel=“stylesheet” href=“application.css” /><link rel=“stylesheet” href=“xmas.css” />