CSS

CSS NOTES

CSS, or Cascading Style Sheets, is used to apply visual design to HTML elements. The use of style sheets came about in an effort to separate content from design in web documents. In the early days of HTML, all of the visual information was contained inside the HTML tags themselves, cluttering up the code with lots of information that wasn’t related to the core content of the document. With CSS, the design information is usually stored outside of the main HTML, so that an HTML document can focus on the information it intends to deliver.

As an added advantage, an HTML page can change its entire look by just applying a different style sheet. CSS Zen Garden is a popular site that demonstrates this concept — it provides designers with an HTML document and invites them to submit CSS that implements a design without changing the original HTML. A quick look at the site shows you how vastly differently the same piece of HTML can look based on CSS styles.

CSS lets you select particular tags within an HTML document and apply a style. The style might define the background color, the font, or the layout of an element on a page. The tag/s you choose to style might be every link on the page, or one particular paragraph out of many. CSS syntax controls which tags you select, and hence, these rules are called “selectors”.

Cascading?

Cascading refers to the parent-child structure of CSS. A style set on a parent element will also apply to its child elements, unless a child has style rules that override that of the parent. For example, if the body has a text color set of dark gray, and no other elements have text colors set, then all text on the page will display in dark gray. If, though, the list item tag sets its text color to red, then it will be red and not gray.

Selectors

Tag Selectors

The simplest type of selectors are tag selectors. These allow you to apply the same style to every tag of a particular type. For example, you might apply the same font to all paragraphs, or the same color to all links.

To target a particular tag, start by writing the name of the tag, followed by curly brackets.

p{

 }

Properties

The information that goes inside the brackets is made up of a collection of properties. There are properties for most visual elements you can think of, from font and color to layout.

We’ll set the text color on the paragraph tag:

 p{
  	color: #990000;
  }

The name of the property is followed by a colon, then the value of the property. Each line ends with a semicolon. For the color property, the value is represented here as a hexadecimal color code.

Some Properties to Start with:

  • color
  • background-color
  • border

Colors in CSS

Colors in CSS can be expressed in hexadecimal (as in #ff3366) or RGB (as in rgb(255,51,102) ) values. To find hexadecimal and RGB values for color, see this color picker.

Colors can be applied to many different properties. Here’s an example of tags with background and border colors:

li{
	border:1px solid #333333;
  }
  p {
    background-color: rgb(81,138,196);
  }

Borders

To create a border in CSS, you need to specify the size of the line, the style of border, and the line color — in that order. The <li> tag in the code above has a border defined. Size is expressed in pixels here, but can be expressed in any unit that CSS allows. The border style is a choice of a few properties: solid, dotted, dashed, double, and a few others. The color value works as in the rest of CSS, and can be in hexadecimal or RGB.

Set-up: adding CSS to HTML

Internal CSS

To make the HTML respond to our CSS styles, there are a few options. The first is to use the style attribute inside a tag, as we did in last week’s HTML class. A big advantage of CSS, though, is being able to separate style from content, so using this “inline” method is not ideal. The second way is to put our CSS definitions inside a 

<head>
	<style type="text/css">
		h1 { 
			color: #990000; 
		}
		h2 { 
			color:#ccff66; 
		}
		p { 
			color: #3333333;
		}
	</style>
</head>

External CSS

This method is preferable to inline styles, but we still have the style definitions in our HTML file. Ideally, the CSS should be completely separate from the HTML. We can do this by creating a CSS file and then linking it to the HTML file. The link to the stylesheet will go inside the <head> area of the page.

<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

ID and Class Selectors

Often, you’ll want more specific control over which tags are styled, beyond all paragraph tags, or all link tags. CSS selectors provide a great deal of precision. Some of the more common selectors allow you to select a tag based on its id or class attribute.

For example, a div tag like this:

<div id="navigation">
	nav bar goes here
</div>

would be styled in CSS using the pound sign (#) like this:

#navigation{
  	background-color: #ccc;
}

A paragraph tag with the following class attribute:

<p class="highlight">My paragraph here</p>

will be styled using the period (.) like this:

.highlight{
  	border: 1px solid #333;
  	background-color: yellow;
}

Pseudo-class selectors

The link tags have special selectors because a link can be in various states of activity — for example, a link tag changes color by default when its been visited. The states of a link are as follows:

  • Normal – the default state for a link the user has not visited
  • Visited – a link to a page the user has been to
  • Hover – when the user rolls the mouse over the link
  • Active – the moment the link is clicked

Most browsers default the normal links to blue, the visited ones to purple, and active to red. They generally will underline the link text as well. But you can change all that!

a:link{
  	color: #990000;
    	text-decoration: none;
}
a:visited{
  	color: #ccc;
    	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
a:active{
  	color: #99ff00;
}

Order matters. This is one of the few places in CSS where the order in which you list the selectors matters. They should go in the order: link, visited, hover, active. The pneumonic device to remember this is “Love Hate” or “L.V.H.A.”