Lecture 8 – Creating Styles

Outline
 In this Lecture, we begin our discussion of CSS
 Cascading Style Sheets
 Here, we focus on constructing Individual Style Rules
 Specifically, we survey the Construction of Selectors,
 which allows pin-point application of formatting.
 As we shall see, we may target an Element for formatting
based on:
 Element type or name
 Element’s class or id
 Simple or complex information about the Element’s context
 The presence of attributes and values
 Etc…
 This will prepare us for related discussions of:
 Methods of style application (e.g., style sheets)
 Actual formatting patterns (declarations)
Introduction
 After establishing the basic structure of your page…
 You will want to apply formatting rules.
 This is accomplished separately, via Style Rules.
 Soon, we will discuss application methods:
 Applied separately, as Inline style rules.
 Applied in groups, via style sheets:
 Embedded 　 (Internal) style sheets;
 External style sheets.

 First, let’s discuss how to create style rules

 And how to apply them to selected elements.
 We will learn more about the actual properties in the next lectures.
 Today, our examples will stick to fairly obvious rules, like:
{color:red}

 which sets the color property of the targeted element(s)

 Here, to the value, red.
 Let’s take a look at style rule structure.
Constructing a Style Rule
 Each style rule in a style sheet has the structure, below:

 Each style rule consists of two main parts:

 Selector: determines the elements to be formatted (affected);
 Here, we specify all level 1 header elements (h1).
 Declaration: made up of 1 or more property/value pairs:
 Each specifies the format (what is to be done by the rule);
 Property: the element characteristic (= property) to be controlled;
 Value: the desired property setting.
 Here, we set the color property (of all h1 elements) to red.
 Note the semicolon (;) at the end of the property/value pair…
 These allow us to include several property/value pairs in one rule.
 For Example:
Constructing Selectors
 The selector determines which elements will be formatted…
 i.e., which rules our style will be applied to.
 A selector can define up to 5 different criteria for choosing the
elements to be formatted:
1. The type or name of an element;
2. The context in which the element is found;
3. The class or id of an element;
4. The pseudo-class of an element;
 Or a pseudo-element, itself.
5. Whether or not the element has certain attributes and/or values.

 The selector can include any combination of these 5 criteria…

 This allows pin-point (very specific) selection of the target element(s),
 Although we will usually use only 1 or 2.
 Note: you may also apply several selectors to the same style rule…
 More on this, a bit later.

 So, let’s take a look at each type of criteria.

1. Selecting Elements by Name
 The most common criteria for element selection is by Name:
 We saw this earlier, with our first example:

 Here, the selector is just the name of the desired type of element…
 The specified format is then applied to all such elements.
 So, here we set the color property (of all h1 elements) to red.
 Notes:
 Not all selectors specify an element’s name…
 The name will be omitted when dealing with classes;
 The wild-card selector (*) also matches any element name (more shortly…).
 You may also string these selectors together, using commas:
Selecting Elements by Class or ID
 You may select elements by class or id…
 If you have already labeled the elements appropriately…
 Using the class or id attribute, as we saw earlier (Lecture 6).
 To select elements based on membership in a class:
 Specify the element type followed by period, and the class name:

 To select ALL elements of the class, just omit the element name
 Example: .news{color ： red}
 To select an element based on its id:
 Specify the element type followed by #, and the id:
Example: Basic Element Selection
Selecting by Context: Descendants
 You may also select elements via context (relative location)
 Based on an element’s ancestor, parent, or sibling.
 Let’s take the first term…
 The ancestor of an element, y:
 Is defined as any element, x that contains element y;
 This just means y is nested within x (at some depth).
 Element y is then called a descendant of element x.

 To select for formatting any element of type y:

 Which is also a descendant of an element of type x…
 Follow this pattern, called a ‘descendant selector’:

 = ‘Select all em elements contained at any depth within the div

element called backbone’
Selecting by Context: Children*
 You may also select elements via context:
 Based on an element’s parent.
 The parent of an element, y:
 Is defined as the element, x that just contains element y;
 This just means y is nested within x (at a depth of 1).
 Element y is then called a child of element x.
 To select for formatting any element of type y:
 Which is also a child of an element of type x…
 Follow this pattern, called a ‘child selector’:

 = ‘Select all em elements contained directly by the div element called

backbone’
 Note: successive generations may be nested. Example: p > em > b
 Also: child selectors are not supported by IE6.
Selecting by Context: First-Children*
 Sometimes it is useful to select only the first child of a parent:
 But not all of its ‘siblings’ (= the others).

 This is similar to general children selection…

 Just add the keyword, first-child;

 = ‘Select the first em element contained directly by the div element

called backbone’

 The ‘first-child’ part of the selector is called a pseudo-class…

 Because it identifies a group of elements automatically.
 Note: Supported by Netscape, Firefox, Opera, IE7 (but not IE6).
Selecting by Context: Siblings*
 You may also select elements via context:
 Based on an element’s parent…
 …and the identities of nearby children (= siblings).
 To select for formatting any element of type z:
 Which is also a child of an element of type x…
 And which directly follows an element of type y…
 Follow this pattern, called an adjacent sibling selector:

 = ‘Select all p elements which both:

 Are contained directly by the div element called backbone’, AND
 Directly follow an element of type p.’
 Note: supported by Netscape, Firefox, Opera, IE7 (but not IE6).
Selecting Links Based on Their State
 You may also apply formatting to links,
 based on their current state:

 If a link happens to be in more than one state, the precedence is:

 LVFHA (in increasing order…)
 Note: These pseudo-classes were designed to work with all kinds of
tags…
 But, among elements we have studied, only use with the anchor (a) is currently
supported, consistently.
Selecting Only Part Of an Element
 You may also choose to select only part of an element.
 In particular, you may target two pseudo-elements:
 The first line or first letter of an element

 To target the first line of an element for formatting,

 Use the :first-line pseudo-element :

 This changes the first line of all paragraphs to red.

 To target the first letter of an element for formatting,
 Use the :first-letter pseudo-element :

 This changes the first letter of all paragraphs to red.

Selecting Elements Based on Attributes*
 You may also apply formatting to all elements…
 Which share a given attribute, etc.
 To select elements based on the presence of an attribute:
 Type [attribute] after the element, in the selector.
 For instance, to make all ‘class-member’ paragraph elements red:

 There are several variations on this…To specify that:

 The selected elements must also have a given value:
 Type [attribute=“value”] after the element, in the selector.
 (less strict) The actual value need only contain a keyword, ‘value’:
 Type [attribute ~=“value”] after the element, in the selector.
 (less strict) The actual value need only begin with the keyword, ‘value-’:
 Type [attribute |=“value”] after the element, in the selector.
 Note: Supported by Netscape, Firefox, Opera, IE7 (but not IE6).
Combining Selectors
 To combine any or all of the selector rules we have discussed…
 Use the following order in creating the selector:
1. Define the context of the element first (can be cascaded)
2. Next, spell out the targeted elements name/type…
 Or use the wild-card character (*).
3. Third, specify the class or id with the (.) or (#) character…
4. Next, specify a pseudo-class (or pseudo-element) if desired.
5. Finally, specify which attributes and values must be present.
 Then, create the declaration (the actual format desired), as
usual.
 Example:

 ‘Choose only the first letter of text in em elements, within list

elements, within a division called backbone.’
Summary*
 In this Lecture, we have discussed Individual Style
Rules:
 Constructing selectors to format Elements based on:
 Element type or name
 Element’s class or id
 Simple or complex information about the Element’s context
 i.e., its role as a descendant, child, or sibling.
 The presence of attributes and values

 As well as targeting based on intangible characteristics:

 pseudo-classes…first-child;
 pseudo-elements…first-line and first-letter
 Selecting link elements based on state (e.g., hover)

 This prepares us for our next lecture:

 Methods of style application (e.g., style sheets)…
 And a beginning discussion of formatting patterns,
 i.e., with Font Control.