comp 1850 | introduction to web development

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

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:
  • 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:
  • 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
  • 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 an alt attribute
  • more on css selectors

supplemental box model elements

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:
    1. 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.
    2. 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.
    3. 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.
    4. 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:
      1. Count the number of IDs in the selector (column 1)
      2. Count the number of CLASS, pseudoclass, and attribute selectors (column 2)
      3. 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=1 class=0 HTML=0 --> specificity = 100 */
      • UL UL LI.red
        /* id=0 class=1 HTML=3 --> specificity = 013 */
      • LI.red
        /* id=0 class=1 HTML=1 --> specificity = 011 */
      • LI
        /* id=0 class=0 HTML=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:
  • specificity challenge!
  • selector exercise

bonus: advanced css techniques (samples)

readings & resources

contents

comp 1850 home | about the course | resources |

sessions

01 | introduction | 02 | html fundamentals | 03 | intro to css | 04 | intro to page layout | 05 | responsive web design | 06 | planning site structure | 07 | design principles | 08 | advanced css elements | 09 | advanced page layout | 10 | forms | 11 | introduction to javascript |

assignments

assignment one | assignment two | assignment three | assignment four | assignment five | assignment six | final project |

contact

dave tanchak |

associated

students on bcitwebdev | learning hub login | bcit | bcit: computing |