CHAPTER 3Selector Basics: Identifying What to Style

COMMENTS

Comments: /* comments */ = used to divide sections on

an external .css sheet, or make comments within a web page or style sheet giving instructions or reasons for the style.

<!– comment or hide -- > = used to hide sections of your web page, or to make comments regarding the page. Great when editing code and you are just experimenting with new code to see how it will affect a web page.

WHEN TO USE COMMENTS:

/* comments */ Best used in your .css code file or in an .html file

if the comment is more than one line long.

<!– comment or hide -- > Best used in .html file when the comment is only

one line long.

INTERNAL VS EXTERNAL STYLE SHEET LINKS

Internal: <style type= “text/css”> </style>

External: <link href=“global.css” rel=“stylesheet” type=

“text/css”/> <style type=“text/css”>

@import url(global.css) </style>

SELECTORS:

Tag Selector: Easy to spot in a CSS rule as they bear the same name as the tag they style—p, h1, table, img, etc. They are the basic HTML selectors and come first

in a style sheet Class Selector: Pinpoints control. You decide

what to name a class selector. Can be used with multiple elements. (same name multiple times on a page)

ID Selector: Look and act like class selectors, but you can apply only one (with the same name) per page.

BASIC PARTS

Every CSS style has two basic parts A selector A declaration block

Declaration blocks carry the formatting properties—text color, font name, and so on

A Selector is the magic wand—tells CSS what you want to format/style

h1 {font-family: Arial, sans-serif;color: #ccccff;

}

TagSelector:

Declaration;

CLASS SELECTORS

Pinpoints Control: Create with a name of your choosing making

sure the name you use is relevant, then selectively apply it to certain bits of HTML Example: .copyright (then apply it to a sentence

containing a copyright reference)

Pinpointsan exact element on a page regardless of its tag. You want to format a word inside a <p> tag, or a

couple of words, or a phrase. Use a class selector to apply the same

formatting to multiple elements that have different HTML tags.

SOME RULES

Notice the period that starts every class selector’s name, such as .copyright. All class selector names in a CSS file MUST start

with a period CSS permits only letters, numbers, hyphens, and

underscores in a class name. After the period, the name must always start

with a letter. Example: .9lives is not a valid class name.

Class names are case sensitive. Example: .SIDEBAR and .sidebar are two different

class names.

Apart from the name, class styles are created exactly like tag styles.

PROCESS

Using class selectors is a two-step process 1. After creating a class rule, you must indicate

where you want to apply that formatting. 2. To do this, you add a class attribute to the

HTML tag you wish to style. Example: you create a class named .special

You add this class to the <p> tag Like so: <p class=“special”> Notice that the class’s name is .special, but when

placed within a tag, the period is not used, just quote marks. (The period is used in the CSS file when styling the class)

Apart from the name, you create a class style exactly like a tag style.

ID SELECTORS

When deciding when to use a class or an ID, follow these rules: To use a style several times on a page, use

classes Use IDs to identify sections that occur only once

per page. Consider using an ID to sidestep style conflicts,

since web browsers give ID selectors priority over class selectors.

A # (pound) symbol identifies an ID Selector In the web page = <div id=“wrapper”> </div> In the style sheet = #wrapper

STYLING TAGS WITHIN TAGS

Do I use a tag selector or a class selector? Tag selectors = fast and easy but make every

occurrence of the tag appear the same. Class and ID selectors = give you flexibility to

style individual page elements independently.

We need a way to combine the ease of tag selectors with the precision of classes and IDs

Descendent Selectors Allow you to format a tag based on its

relationship to other tags.

HTML FAMILY TREE

html

head body

title h1 p

strong

DESCENDENT SELECTORS (CONT’D)

Let you take advantage of the HTML family tree by formatting tags differently when they appear inside certain other tags or styles. Solution to the h1 strong dilemma is:

h1 strong { color: red; }

Descendent selectors style elements that are nested inside other elements following the ancestors and decedents as the tags in the HTML family tree.

Create a descendent selector by tacking together selectors according to the part of the family tree you want to format.

Place the most senior ancestor on the left, and the actual tag you are targeting on the far right.

SEE PAGE 59

You do not always have to describe the entire lineage of the tag you want to format.

You can build complex descendent selectors combining different types of selectors.

p. intro a {color: yellow; } = very specific .intro a {color: yellow; } = more flexible

Descendent selectors are very powerful weapons. They pinpoint specific elements as if you just grabbed your mouse, selected the text, and applied the desired styles.

GROUP SELECTORS

To work with selectors as a group, simply create a list of selectors separated by commas.

h1, h2, h3, h4, h5, h6 { color: #f1cd33; } h1, p, .copyright, #banner { color: #f1cd33; }

UNIVERSAL SELECTOR

The Asterisk ( * )

Selects every single tag You want all of your tags to appear in a bold type

* { font-weight: strong; }

You can use the universal selector as part of a descendent selector. #banner * = selects every element to which you have

applied the #banner ID.

HOWEVER, since the universal selector doesn’t specify any type of tag, it is hard to predict its effect on an entire Web site.

STYLING PARAGRAPH PARTS

:first-letter Drop Cap Color, size,

appearance, etc.

:first-line All caps, small caps,

appearance, etc.

#contact-info:first-letter{

text-transform: uppercase;

font-size: 2em;color: red;

}

#contact-info:first-line{

text-transform: uppercase;

font-size: 1.3em;font-weight: bold;

}

PSEUDO-CLASSES AND PSEUDO-ELEMENTS

Sometimes you need to select parts of a Web page that don’t have tags per se, but are easy to identify (i.e.) the first line of a paragraph or a link as you move over. (mouse-over options).

Four (4) pseudo-classes let you format links in four different states based on how a visitor has interacted with that link. .a:link = no action .a:visited = selected previously .a:hover = pass over .a:active = when clicked

MORE PSEUDO SELECTORS

:before Allows adding

content BEFORE a given element

: after Adds generated

content AFTER the element

:focus Applies focus to an

area of a web page such as when filling out a form, as the user tabs from one line/box to another, the area changes appearance.

p.tip:before {content: “HOT TIP!”}

input:focus{ background-color: #ffffcc;}

ADVANCED SELECTORS

Uses an additional symbol > to indicate a relationship between two elements

Example: h2 is a child of body

The second h2 is inside the div

They have different parents and can be styled differently

Child Selectors Family Tree

body

h1 div h2

h2 p

body > h2 {color: red;}

Work best when styling a list within a list

ADVANCED SELECTORS (CONT’D)

Adjacent siblings use a + sign to join one element to the next

h2 + p { color: blue;}

The p gets the style, but only when it is next to its brother

Formatting tags based on their attributes img [title] .photo [title] a[href=

http://www.cosmofarmer.com] {color: red; font-weight: bold;}

Adjacent Siblings Attribute Selectors

COMPLETE THE CHAPTER 3 TUTORIAL

Page 70 in your textbook

Once completed, work on the assignment 2 document – Press Release. You will need to download the necessary files,

which you will find in assignment 2 You will use the pressrelease-start.htm file, but

do not change anything on that page, you will interact with a .css file that you create from scratch, and try to make the start page look the same as the finished page (which is also provided).