CSS BASICS

CSS Rules

Components of a CSS Rule

Selector: Part of the rule that targets an element to be styled

Declaration: Two or more parts: a property and a value

Property: Aspect of an element that is modified, e.g., color, width, etc.

Value: The specific style applied to the selected element

CSS Selectors

CSS selectors can specify from one to many elements

The Universal Selector* { color: blue; }

Selects all foreground (text) elements on the page

and colors them blue

Element Selector

Selects all elements specified by a tag name

More specific than the universal selector Still, not very specific since it selects ALL

occurrences of the chosen element

em { color: red; }will color each instance of the em

(emphasize) element on the page red

Class Selector

Targets any element with the class name in its class attribute

Can be applied to almost every element Any number of elements can belong to

the same class…not very specific

.info { color: purple; }will color any text in the class info purple

ID Selector

Will select ONLY the element with the specified ID

Almost any element can have an ID attribute The value of that attribute can be used only

ONCE per page Since an ID selector can only be used once per

page, the ID selector is more specific than the class selector

#introduction { color: green; }

Will give the element with the ID introduction a green foreground

Pseudo Class Selectors

Like a class selector, but selects an element in a particular state

The same specificity as the class selector Preceded by a colon ( : ) Order is important :link { color: blue; } selects all hyperlinks

and colors the text blue :visited { color: purple; } selects all

previously selected hyperlinks and colors the text purple

:hover { color: green; } selects an element (usually a hyperlink) and colors the text green

Pseudo Classes (continued)

:active { color: red; } selects links that are being clicked by a mouse (or the RETURN key being pressed) and colors the text red

:focus { color: orange; } selects an element that has the focus and colors the text orange…not supported by all browsers

Descendant (Contextual) Selectors Created from two or more of the

previously described basic selector types separated by spaces

Will select elements matching that position in the document tree

Descendant (Contextual) Selectors Examples

#introduction em { color: yellow; }will color any em element within the ID

#introduction yellow#introduction .info p * { color: pink; }Will color the foreground of anything pink

that is in a P element that is within the .info class, that is within the ID #introduction

Combining Selectors

Two or more selector types can be combined, e.g., an element and an ID, or and ID and a class

p.info { color: green; }the foreground of anything in element p within

class .info is colored green

p#introduction a.info:hover { color: silver; }

Selects hovered links (a elements) belonging to the .info class that are within the p element of the ID #introduction

Grouping Selectors

Selectors can be grouped together to form a single rule

Selectors are separated by commas

p, h1, h2 { color: blue; }

Colors any p element, h1 or h2 element blue

p#introduction em, a.info:hover, h2.info { gold; }

Selects all em elements within the paragraph element with ID #introduction, all hovered links with class info, and h2 elements in the info class

Specificity and Cascading

Given:h2 { color: orange; }.title { color: blue; }<h2 class=“title”>Specificity and the

Cascade</h2>

What will happen?

Because classes are more specific than elements, the class takes precedence and the text color is blue

Specificity and Cascading

Rules of specificity (in reverse order):1. Universal selector: not specific at all2. Element selector: more specific than a

universal selector3. Class or pseudo class selector: more

specific than an element selector4. ID selector: more specific than a class or

pseudo class selector5. Properties in an inline style attribute are

the most specific of all

Cascading

Given:.info h2 { green; }h2.title { orange; }

In this case, h2 in the title class is a descendent of h2 in the info class.

Both of the above rules should apply to h2 because the selectors are equal in specificity

But, style declarations are applied in the order they are received, so later declarations override earlier ones

Cascade Order

Since style declarations are applied in the order they are received, later declarations override prior ones

This is true whether the declarations occur in the same rule, in a separate rule in the same style sheet, or in a separate style sheet downloaded after a prior one

p { color: black; color: green; }color: green will override color: black because

it is declared after (later than) color: black

In-line Styles

<html> <head>

<title>HTML and CSS</title> </head> <body> <h1 style="color: black; text-align:center">Inline

Styles</h1> <h1 style="color: red; text-align:left">It is easy to use CSS</h1>

<h1 style="color: blue; text-align:center">It is easy to use CSS</h1><h1 style="color: green; text-align:right">It is easy to use CSS</h1>

</body> </html>

Embedded Styles Using Classes<html>

<head>

<style>

h1.left {text-align:left;color:red;}

h1.center {text-align:center;color:black;}

h1.right {text-align:right;color:green;}

</style>

<title>HTML and CSS</title>

</head>

<body>

<h1 class="center">Embedded Styles</h1>

<h1 class="left">It is easy to use CSS</h1>

<h1 class="center">It is easy to use CSS</h1>

<h1 class="right">It is easy to use CSS</h1>

</body>

</html>

Embedded Styles Using IDs

<html><head>

<style type="text/css">#myid {border-width: 1; border: solid; text-

align: center} </style>

</head><body>

<h1 class="myclass"> This h1 is not affected </h1><h1 id="myid"> This h1 is affected by style </h1><h1> This h1 is not affected </h1>

</body></html>

Why Not Inline Styles?

The browser has to process too much redundant code

If an inline style has to be changed, you’ll have to find every instance of that style and change it

This can be tedious work with a large website

Inline styles apply to only one line at a time

Inline styles are not constructed as rules, defeating the purpose of CSS

Why Not Embedded Styles?

They only apply to one page at a time

Other pages in the website have to have their own embedded styles…more redundant code

External Style Sheets

Contents of mystyle.css:h1 {color: black; text-align: center;}h2 {color: blue; text-align: center;}

Contents of ExternalStyle.html:<html> <head> <link type="text/css" rel="stylesheet" href="mystyle.css"> <title>A Web Page Using an External Style Sheet</title> </head> <body> <h1>A Web Page Using an External Style Sheet</h1> <h2>It is easy to use HTML</h2> </body></html>

Why External Style Sheets?

Since external style sheets are downloaded only once, then cached, pages load faster

Presentation and structure are completely separated

Allows your entire site’s visual design to be controlled by one style sheet

Cascade Order

Browser Style Sheet

User style sheet

Author style sheets (in the order that they are linked or embedded)

Inline author styles

A Rule of Thumb

The style closest to the content wins

Whichever value is declared last will be the one applied when the content is rendered

!important

!important will force the browser to honor that value above all others

The !important directive must be placed at the end of the value before the semicolon

h1 { color: red !important; }

Formatting CSS

Two general formats:1. extended

2. compacted

Extended Formatting

h1, h2, h3 {color: red;

}

h1 { font-size: 160%;

}

h2 { font-size: 130%;

}

Compacted Format

h1, h2, h3{color:red;}h1{font-size:160%;}h2{font-size:140%;}h3{font-size:120%;margin-bottom:.5em;}

Semicompacted Format

h1, h2, h3 { color: red; }h1 { font-size: 160%; } h2 { font-size: 140%; }h3 { font-size: 120%; margin-

bottom: .5em; }

CSS Comments

/* these base styles apply to all headings */h1, h2, h3, h4, h5, h6 { color: red; }

/* adjust some sizes */h1 {font-size: 180%; }h2 { font-size: 160%; } h3 { font-size: 140%; }

/* hide these rulesh4 {font-size: 120%; }h5 { font-size: 100%; } h6 { font-size: 80%; }End hiding */

Font Families

A rule for setting the Font Family of an Element

Body { font-family: Georgia, “Times New Roman”,

Times, serif}Note double quotes…

Using CSS with Anchors

<head> <style type="text/css"> a:link { color: red; text-decoration:

underlined; font- size: 180%; } a:visited { color: green; text-decoration:

none; font- size: 180%;} a:hover {color: blue; text-decoration:

none; font- size: 250%;} </style> <title>Using CSS with Anchors</title> </head>

Using CSS with Anchors <html> <head> <style type="text/css"> a:link { color: red; text-decoration: underlined; font-size: 180%; } a:visited { color: green; text-decoration: none; font-size: 180%;} a:hover {color: blue; text-decoration: none; font-size: 250%;} </style> <title>Using CSS with Anchors</title> </head> <body> <p> <a href=“http://analog.net/”>analog24.net</a> </p> </body> </html> run StyleLinks.html

Using Links - Changing Backgrounds <head> <style type="text/css"> a {color: black; font: 12px Arial,Helvetica,sans-serif; text-decoration: none; border: 2px solid black; display: block; width: 200px; padding: 3px 10px; background: #dcdcdc;} a:hover, a:active, a:focus { background: #4169E1; font-weight: bold;} </style> <title>Using Links - Changing Backgrounds</title> </head>

Using Links - Changing Backgrounds <html>

<head>

<style type="text/css">

a {color: black;

font: 12px Arial,Helvetica,sans-serif;

text-decoration: none;

border: 2px solid black;

display: block;

width: 200px;

padding: 3px 10px;

background: #dcdcdc;

}

a:hover, a:active, a:focus {

background: #4169E1;

font-weight: bold;

}

</style>

<title>Using Links - Changing Backgrounds</title>

</head>

<body>

<p>

Options:<br/>

<a href="home.html">Home</a><br />

<a href="menu.html">Menu</a><br />

<a href="locations.html" >Locations</a>

</p>

</body>

</html>

run BackgroundLinks.html

Buttons for Links <head> <style type="text/css"> a {color: black; font: 12px Arial,Helvetica,sans-serif; text-decoration: none; display: block; width: 200px; height: 22px; padding-top:8px; text-align:center; background-image: url('btnOn.gif');} a:hover { background-image:url('btnOff.gif'); font-weight: bold;} </style> <title>Using Links with Background Images</title> </head>

Using Buttons for Links <html>

<head>

<style type="text/css">

a {color: black;

font: 12px Arial,Helvetica,sans-serif;

text-decoration: none;

display: block;

width: 200px;

height: 22px;

padding-top:8px;

text-align:center;

background-image: url('btnOn.gif');}

a:hover {

background-image:url('btnOff.gif');

font-weight: bold;}

</style>

<title>Using Links with Background Images</title>

</head>

<body>

<p>

Options:

<a href="home.html">Home</a><br />

<a href="news.html">News</a><br />

<a href="menu.html">Menu</a><br />

<a href="locations.html">Locations</a>

</p>

</body>

</html>

run ButtonLinks.html

CSS and Tables

TableBorder.html TableAlignment.html TableBackground.html