DIGI 220 - CSS Foundations: Selectors & Property Values

VIU Media Studies Department - Robin Davies

REVIEW - CSS Style Rules

#footer p {
	color: red;
	font-size: 0.7em;
	font-style: italic;
}

p {
	color: #336;
	line-height: 1.1em;
}

Property Values

  • Each CSS property has specific possible values
  • There are certain types of values we use in CSS:
    • Keyword (Predefined) Values
    • Length Values
    • Percentage Values
    • URLs
    • Colour Values
    • The Inherit value

Keyword Property Values

  • Most CSS properites have a few acceptable predefined values
  • For instance, the display property can be set to a number of things, such as: block, inline, list-item or none
p {
	display: block;
}
  • Similarly, the font-style property can be set to normal, italic, oblique, or inherit.

Length Property Values

  • Length values state the size/amount of a property, and may be positive, negative, or zero
  • Length values must be immediately followed by a 2-letter abbreviation of their unit
  • Zero does not need a unit, though it wouldn't hurt!
  • There are two kinds of length-value units:
    Relative
    em, ex (both relative to enclosing parent value), px (display size varies according to user agent), vw, vh...
    Absolute
    in, cm, mm, pt, pc...
  • There are many more such units described here

Percentage Property Values

  • Similar to relative length values
  • Describe a proportion relative to some other aspect of the content
  • Have a mandatory % sign, and optional sign & decimal portion
  • Like relative length values, normally relative to enclosing parent value
#footer {
	width: 70%;
}

URL Property Values

These are most typically used for background images.

<div style="height: 100px; width: 100px; 
background-image: url(swim-fish-swim.png);">
</div>

Note: url keyword, brackets, no spaces, no quotes

Note: URLs can be relative (to the CSS content) or absolute

Colour Property Values

  • Specify colour for a property, in one of a number of ways, such as a colour name, hexadecimal value, or RGB value
    • color: red;
    • color: #FF0000;
    • color: rgb(100%, 0%, 0%);

    There are other colour specification options as well

  • Check out the More Crayons website
  • Also check out the hex colour game...

Getting Started

This is only the very beginning of CSS properties; as with any language, the best way to learn vocabulary is to do some reading...

Next: CSS Selectors.

Selectors

  • Selectors determine which elements are affected by a rule
  • There are a variety of selector types:
    • element selectors
    • class & id selectors
    • contextual selectors
    • pseudo-class & pseudo-element selectors
    • attribute and value selectors
  • Selectors can include combinations of these criteria to create increasing specificity

Element Selectors

p {color:red; font-size:12px;}
  • Because we used an element name as our selector, (the p element,) we are saying that we want this rule to apply to all p elements in our document
  • We can also use a * selector to apply a rule to all elements in a document

Class & ID Selectors

class
.redText {color:red; font-size:12px;}
ID
#firstParagraph {color:red; font-size:12px;}

Remember that HTML documents can have multiple elements with the same class, but only one element with a specific ID.

You can use class and ID selectors alone or with other selector criteria:

p.redText {color:red; font-size:12px;} 

NOTE: Now we've limited the rule to only p elements that are of the class redText, excluding other elements with the same class:

<p class="redText"> ... </p> 

Contextual Selectors

Contextual selectors allows us to refer to elements that occur within a specific context:

 div#blueText p {color:blue; font-size:12px;} 
  • Only p elements within a div with the ID blueText will be affected
  • A selector based on an element's ancestor, like this one, is called a descendant selector

Contextual Selectors

  • There are also selectors to select child elements, siblings, first-child elements...
  • These are not well supported by some older browsers, and they may make your CSS harder to read, so use with caution
  • Check w3schools for exhaustive examples of Contextual Selectors

Pseudo-Element Selectors

There are two pseudo-element selectors:

  • first-line
  • first-letter
p:first-line {color:red;} 
  • These elements allow us to work with part of an element, even though the content isn't actually contained in an HTML tag
  • Examples

Pseudo-Class Selectors

  • Pseudo-class selectors allow us to access the different states of an element
    • a:link
    • a:visited
    • a:focus
    • a:hover
    • a:active
  • Note: users expect that if you hover over something and it changes, that something is a link
  • It is important to define these rules in a specific order - link, visited, focus, hover, active (LVFHA) - so the location component of the cascade can take effect

Attribute and Value Selectors

  • We can also specify selectors that apply rules to elements with a given attribute or attribute value
    • div[class] {color:red;}
  • Will only apply to div elements that have a class attribute
  • Examples

Multiple Element Selectors

This is the second last slide of the lecture, but it's an important slide!

  • If we want to apply a rule to multiple elements:
    • p, #blueText, h2:hover, .social {color:red;}
  • We use a comma to seperate the list of selectors that we want the declaration block to affect
  • Note that we can seperate selectors of any type in this way

CSS Selectors Review

So, based on its selector, to which element(s) does the following CSS rule apply?

em, #sidebar li, .review p:first-line, header a:hover {

	color: fluorescent-black;

	}