Chapter 4 Notes: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

CSS is about controlling the display characteristics of a website. It greatly simplifies what needs to be done to maintain and fix a site. With HTML code, as was discussed in Chapter 1, the browser interprets HTML tags. When you add a styling sheet with CSS, you are specifying how you want the browser to interpret it. You are essentially overriding the browser. In CSS, style rules express the style characteristics for an HTML element. A set of these rules is called a style sheet. A style rule consists of a selector and declaration. The selector determines the element to which the rule applies and the declaration, which is contained in curly brackets, shows the exact details of the property. End the value with a semicolon (;). Here is an example of a style rule:

p {color: blue;}

Color is the property and blue is the value. The p is the <p> paragraph you are styling.

You can combine CSS rules with HTML code in one of three ways: 1) inline style, 2) internal style sheet, and 3) external style sheet. External style sheets are best used when you want a set of styles to be applicable over a few pages (or many) on your site. An internal style sheet contains styles that apply only in the current sheet where the internal CSS code is. The inline style affects only the span of the words it surrounds. Any combination of these three style types gives great flexibility to web developers. A set of rules can easily apply to a span of pages in the website or just a few paragraphs on a specific page.

External style sheets are rules stored in another document (.css); it is not an HTML document. The <link> element allows you establish connection between your current working page and the external style sheet. It can only be used in the <head> section of the document.

<link href=”styles.css” rel=”stylesheet” type=”text/css”/>

“The <link> element tells the browser to find the specified style sheet. The href attribute states the relative URL of the style sheet. The rel attribute specifies the relationship between the link and current documents. The browser displays the Web page based on the CSS display information” (Sklar 155). As you can tell, an element can have many attributes listed out in that one line. As you build your website, you’ll find that an external style sheet is a VERY handy thing to have. All you need to to specify styles you want on your website, the THEME, so to speak, and any changes you want to make to your theme, you can make it in one location. The change(s) will be reflected on all the pages where you have linked this external style sheet.

Here is an example of an internal style sheet:

<head>

<title> Sample Doc </title>

<style type=”text/css”>

h1 {color: red;}

</style>

</head>

Note the attribute to the <style> element; the value “text/css” defines the style language type as Cascading Style Sheets.

Lastly, the inline style looks like this:

<h1 style=”color: blue”> Text goes here. Blah blah blah. </h1>

You generally will use the style attribute to override a style that was set earlier in the document in a higher level. In this example, the color blue will override a previously defined header color.

Write Clean Code

When a document is simple, then writing all the declarations of a property is fine, but style rules often have many declarations that makes it all too hard to read on one line. Consider this code:

p {font-family: arial, Helvetica, sans-serif; font-size: 85%; line-height: 110%; margin-left: 30px;}

It is better to write your code like this where it is much easier to find specific properties and edit. The declarations are combined into one rule:

p {

font-family: arial, helvetica, sans-serif;

font-size: 85%;

line-height: 110%;

margin-left: 30px;

}

Basic Selection Techniques

Remember that in the previous code, p, the element, is a type selector whereas the rules inside the curly brackets are the declarations. There are a few ways you can use these selectors to make changes in your document. The declared rules, using the above example again, apply to every instance of the element in the document.

To make your rules concise, you can group selectors together if the same rules apply. Instead of writing

h1 {color: red;}

h2 {color: red;}

you can write the rule in one line: h1, h2 {color: red;}.

A descendent selector is very useful when you are a chunk of code you want to edit and it is embedded deeper in the hierarchy. It lets you select elements that are the descendents of other elements. Check this out: p em {color: blue;} This rule selects only <em> elements that are contained in <p> elements. All other <em> elements are not affected. You can go a little crazier by delving deeper into the hierarchy by putting in white space between elements that are contained in each other. For example, the following rule applies to <em> elements that are within <li> elements within <ul> lists only: ul li em {color: red;}

Here’s one last bit of selector magic: You can set a universal selector that will apply changes for the entire document. This rule, though, is always overridden by more specific rules. For example, to set a default color for all elements within a document: * {color: purple;} To set all children of a certain element: div * {font-family: sans-serif;} To override the universal selector, just specify which elements to change:

* {color: purple;}

h1 {color: red;}

h2 {color: blue;}

Using Class and ID Selectors

The class selector allows you to write rules, name them, and then apply them to any element in your document. You can apply a style rule to an element by adding the class attribute to the element and set it to the name you have specified.

To declare a class, declare a style rule:

. special {color: red; margin-left: 30px;}

The period (.) flag character indicates that the selector is a class selector. The class name is “special”, and the rules contained in the curly brackets are the declarations. You can then add this rule into the document by using the class attribute:

<h1 class=”special”>This heading will be red with a 30px left margin.</h1>

Here is another example, applying a class selector to a paragraph. First, declare a style rule:

. intro {font-size: 125%; font-family: sans-serif;}

Put that into the document:

<p class=”intro”>This introductory paragraph will now be applied with the style set in the “intro” class selector.</p>

<p>This is what the normal paragraph will look like.</p>

You can limit the class attribute to certain elements by specifying which element you want it to apply. Include a prefix to the class selector:

h1.procedure {

font-family: sans-serif;

margin-left: 20px;

}

This style will not work if it is applied to elements other than <h1>.

Using the id Selector

The id attribute should be used only to refer to only one occurrence in the document, most commonly used to refer to layout sections – sidebar or footer. For example, if you want to specify that only one <p> element has the id “copyright”, you write it like this:

# copyright {width: 960px; border: solid thin black;}

# = flag character

copyright = id name

{ …} = declaration

To apply the selector, add it to your document:

<p id=”copyright”>This is the copyright information in this page.</p>

Just like the classes selector, you can specify a particular element to apply the id by doing this:

p#copyright {

font-family: times;

text-align: center;

}

Using the <div> and <span> Elements

<div> stands for division and <span> stands for span of words. They let you specify logical divisions within a document with names and style properties you’ve created. <div> is a block-level element and <span> is its inline equivalent.

The <div> is now the main content containers used to divvy up a page into sections, such as headers, footers, and columns. Here is an example of a customized column division:

div#column {

width: 200px;

height: auto;

padding: 15px;

border: thin solid;

}

To apply this rule in the document, use the id attribute to specify the exact type of division:

<div id=”column”>This division displays as a column of text in the browser window.</div>

The <span> element is much like the <em> and <strong> elements. Use it inline with the rest of the text that shows up on the page. To create a span, first write it up in the <style> element first. This example specifies a span named logo as a selector for the rule:

span.logo{

color: white;

background-color: black;

}

To use it, sandwich <span> between your text:

<p>Welcome to the <span class=”logo”>Sandwich Zone</span> Web Site.</p>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s