lecture 8 - creating styles

8/14/2019 Lecture 8 - Creating Styles

1/18

Lecture 8 Creating Styles


2/18

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

Elements class orid

Simple or complex information about the Elements 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)


3/18


4/18

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 colorproperty (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:


5/18

Constructing Selectors

The selectordetermines 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 orid 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/orvalues.

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, lets take a look at each type of criteria.


6/18

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 colorproperty (of all h1 elements) to red.

Notes:

Not all selectors specify an elements 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:


7/18

Selecting Elements by Class or ID

You may select elements by class orid

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:


8/18

Example: Basic Element Selection


9/18

Selecting by Context: Descendants

You may also select elements via context (relative location)

Based on an elements ancestor, parent, orsibling. Lets take the first term

The ancestorof 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 thedivelementcalledbackbone


10/18

Selecting by Context: Children*

You may also select elements via context:

Based on an elements 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 bythediv elementcalledbackbone

Note: successive generations may be nested. Example: p > em > b Also: child selectors are not supported by IE6.


11/18

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 elementcontained directly bythediv element

calledbackbone

The first-child part of the selector is called apseudo-class

Because it identifies a group of elements automatically.

Note: Supported by Netscape, Firefox, Opera, IE7 (but not IE6).


12/18

Selecting by Context: Siblings*

You may also select elements via context:

Based on an elements 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 allp elementswhich both:

Are contained directly bythediv elementcalledbackbone, AND

Directly follow an element of type p.

Note: supported by Netscape, Firefox, Opera, IE7 (but not IE6).


13/18

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 oftags

But, among elements we have studied, only use with the anchor (a) is currentlysupported, consistently.


14/18

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 orfirst letterof 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-letterpseudo-element :

This changes the first letter of all paragraphs to red.


15/18

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 thisTo 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).


16/18

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 orid with the (.) or (#) character

4. Next, specify a pseudo-class (orpseudo-element) if desired.

5. Finally, specify which attributes and values must be present.

Then, create the declaration (the actual format desired), asusual.

Example:

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

elements, within a division called backbone.


17/18


18/18

Summary*

In this Lecture, we have discussed Individual Style

Rules: Constructing selectors to format Elements based on:

Element type or name

Elements class orid

Simple or complex information about the Elements context

i.e., its role as a descendant, child, or sibling. The presence ofattributes and values

As well as targeting based on intangible characteristics:

pseudo-classesfirst-child;

pseudo-elementsfirst-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.

lecture 8 - creating styles

Documents