Lecture 8 - Creating Styles

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, 



As we shall see, we may target an Element for formatting based on:     



which allows pin-point application of formatting.

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. 2. 3. 4.

The type or name of an element; The context in which the element is found; The class or id of an element; 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), 



Note: you may also apply several selectors to the same style rule… 



Although we will usually use only 1 or 2. 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… 



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 



Using the class or id attribute, as we saw earlier (Lecture 6).

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. 



The ancestor of an element, y: 

Is defined as any element, x that contains element y; 





Let’s take the first term…

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: 



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

Use the :first-line pseudo-element :





The first line or first letter of an 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: 



(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.

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.