session eight
agenda
- browser extensions & tools
- importing css
- css reset
- advanced css selectors
- supplemental box model elements
- selector specificity
- bonus: advanced css techniques
- readings & resources
browser extensions & tools
- Different browsers allow you to extend their capabilities with small plug-ins.
- Firefox and Chrome allows the creation of extensions (small add-ons that add new functionality to Mozilla applications)
- sample Firefox addons for web developers and designers:
- Web Developer - adds a menu and a toolbar with various web developer tools.
- HTML validator - get warning and error reports when you view source on a page.
- Colorzilla - get a colour reading from any point in your browser.
- More Web Development Add-Ons
- sample Chrome addons for web developers and designers:
- Web Developer - adds a menu and a toolbar with various web developer tools.
- Colorzilla - get a colour reading from any point in your browser.
- More developer tools
- Chrome DevTools Overview
- Chrome DevTools Tips
- Crash Course on Chrome DevTools (video)
importing css
- often, websites will require multiple style sheets, i.e., one for fonts and colours, one for layout, one for special box model properties, one for print, etc.
- particularly useful for larger websites; may not be applicable to your immediate projects, but you may come across this approach in other sites you are exploring
- all of these get linked from the head of each page in your site:
<link rel="stylesheet" href="css/box_models.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/fonts.css"> - this adds clutter to your page and makes maintenance difficult if you need to add/delete a stylesheet, as you will need to remove the reference from every page
- using the
@import
at-rule (css statements that instruct css how to behave, e.g., @charset), you can create one style sheet that imports other style sheets - from your webpages, create a normal link to your
styles.css
page - in the body of your
styles.css
page, import as many files as you need:
@import url("box_models.css");
@import url("layout.css");
@import url("fonts.css");
css reset
- what: a short, often compressed set of CSS rules that resets the default styles for all HTML elements to a stable baseline.
- why: used to create a level playing field that wipes out variations between bowers before you start adding your own CSS
- every browser has its own default ‘user agent’ stylesheet used to make unstyled websites appear legible, e.g., default link colours of blue/red/purple
- can make it difficult to make webpages look the same in all browsers - a reset forces browsers to reset all styles to null to minimize cross-browser differences
- resources:
- What is a CSS Reset?
- Reset Reasoning - Eric Meyer (2007)
- Eric Meyer's Reset
- normalizing is a sort of partial reset and bug-fix solution - doesn't completely eliminate the variation between browsers, just smooths them over
- explicitly fixes some known bugs in different browsers, striving for a level playing field across all browsers without removing their individuality where tolerable
- resources:
- About Normalize Nicolas Gallagher (2012)
- Normalize.css - A modern, HTML5-ready alternative to CSS resets
- the reset approach is more forward compatible than normalize
advanced css selectors
- relative selectors: used to style elements based on their structural location in your HTML
- descendant selectors - A space-delimited list of selectors for selecting based on the tag's ancestry (parent tag, grandparent tag, etc)
- child selectors - A greater-than combinator (>) between selectors will select a tag based on it's parentage, e.g., select an element that is directly descended from another element
- adjacent sibling selectors - The plus sign (+) combinator is used to select sibling tags that follow the root element; used to target styles when you have a predictable sequence of tags (e.g., unique styles could be applied to the first paragraph following a new
h3
) - general sibling selectors - similar to the adjacent sibling selector, the general sibling selector uses the tilda (∼) combinator and will apply style to all sibling tags that follow the root element, instead of only the first sibling
- pseudo selectors: used to apply style to selectors based on their state or structure
- allows you to reference a specific action or attribute of an element. This is most often used when specifying
a
attributes, such as:visited
and:link
- allows you to reference a specific action or attribute of an element. This is most often used when specifying
- attribute selectors: used to style elements based on the the presence or value of it's attributes
- can also select elements by what the element's attribute contains, e.g.,
element[attribute=value]
- if you specify an attribute with no value, you will match any element that simply has the attribute present (no matter what it's value is)
img[alt] {border-color: red;}
will add a red border to any image that has analt
attribute
- can also select elements by what the element's attribute contains, e.g.,
- more on css selectors
supplemental box model elements
- several css3 properties aimed directly at extending the box model properties:
border-radius
: create rounded cornersbox-shadow
: cast shadow effect from boxtext-shadow>
: cast shadow effect from content
- box models are, by definition, "boxy" -
border-radius
allows us to break out of the boxes by rounding the corners of our elements - with the
box-shadow
provides the ability to add depth/dimension to our elements - similarly,
text-shadow
provides the same ability for text elements - resources:
css specificity
Why isn't my CSS taking effect?
- maybe you aren't looking at the HTML file it is actually loaded in?
- maybe it's a syntax error, or the property doesn't exist?
- or it might have got beaten out by other CSS that loaded after it or had greater specificity
- when a style declaration is found to be in conflict with a previously declared style, there is a method built into every web browser to determine which one will win out
- Here is how the W3C defines the process by which style order is determined:
- Discover all declarations: Look in all style sheets to locate all declarations that apply to the element and property in question, and for the target media type. Declarations apply if the associated selector matches the element in question.
- Sheet Order: Once all styles have been determined, they are applied in the sheet order: For normal declarations, author (web developer) style sheets override user (local) style sheets which override the default style sheet.
- Note: For "!important" declarations, user style sheets override author style sheets which override the default style sheet. "!important" declarations override normal declarations. An imported style sheet has the same origin as the style sheet that imported it.
- Specificity: The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
- Sort by Order: Finally, sort by order specified: If two rules have the same weight, origin and specificity, the latter specified rule wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
- Specificity, then, is a method for determining what rules are applied there is a conflict between two selectors
- by adding values when certain elements and selectors are present, a specificity number can be applied to any CSS rule
- the one with highest specificity wins and the associated rule is applied to the element(s) in question - in a tie, that's when the sort order takes over (see above)
- ruleset for specificity:
- style sheets override conflicting style sheets based on their level of specificity
- level of specificity is based on a simple calculation:
- Count the number of IDs in the selector (column 1)
- Count the number of CLASS, pseudoclass, and attribute selectors (column 2)
- Count the number of HTML tag names in the selector (column 3)
- the three numbers in exact order with no spaces or commas will return a three digit number, with the higher numbers winning out over lower numbers, i.e., the higher numbers have a greater degree of specificity
- Following is a list of selectors sorted by specificity:
#id1
/*id
=1class
=0HTML
=0 --> specificity = 100 */UL UL LI.red
/*id
=0class
=1HTML
=3 --> specificity = 013 */LI.red
/*id
=0class
=1HTML
=1 --> specificity = 011 */LI
/*id
=0class
=0HTML
=1 --> specificity = 001 */
- try this CSS Specificity Tutorial if you need help understanding how it works
- !important rule
- this declaration, when added to a rule, will override almost all other declarations, with no respect for specificity.
- it indicates that this rule should take over any previous rules that might govern a specific element.
- example:
.selector{ color:blue !important; }
- this rule can cause havoc if overused, as it will overrule any other declaration with the same selector - be careful with
!important
- resources:
- CSS Specificity - Emma Bostian
- CSS Specificity Calculator
- Specificity Explained (video)
- specificity challenge!
- selector exercise
bonus: advanced css techniques (samples)
readings & resources
- The @import rule
- CSS Specificity and When to Use the CSS Important Tag
- CSS Specificity explained (video)
- Normalize vs Reset CSS
- You Should Normalize Your CSS
- The 30 CSS Selectors You Must Memorize
- Advanced CSS selectors for common scenarios
- A Complete Guide to CSS Gradients
- An Interactive Guide to CSS Transitions