CSS basics

/ general / By

The Basics

  1. HTML puts a structured element on the page
  2. CSS controls the properties of those HTML elements, i.e. how it looks
  3. Javascript allows you to change HTML properties interactively

CSS Syntax

selector {property: value;}

The selector is how you connect your CSS to HTML elements. There are three primary selectors:

  1. Type (HTML tag)
  2. # (id)
  3. . (class)

 

A type selector is simply a HTML tag.

CSS... h1 {color: Blue;} 
HTML... <h1>Some heading text</h2>

In this case I want to control the color of the <h1> heading text in my HTML document. The CSS h1 type selector allows me to do this.

A # selector matches the corresponding id  attribute on a HTML element on the page

Example:

CSS... #pageTitle {font-size: 1.5em;}
HTML... <tagName id="pageTitle">Page Title Text</tagName>

Sets the font-size property of the HTML element on the page that has an
id attribute value of id=”pageTitle”
The . selector matches the corresponding class attribute on a HTML element on the page

Example:
CSS... .LeftCol {width: 15em; float: left;}
HTML... <div class="LeftCol"> Some content</div>

In this example, the div tag with a class value of LeftCol will have its width property set to 15em and it will have its float property set to left.

When to use a particular selector

Type Selectors (i.e. HTML tags) control the corresponding tags on the page. You want every paragraph to look the same? Then use a type selector

p {properties to control every paragraph tag}

ID selectors are the most specific of the selectors. They tell the browser that there is only one element on the page with an id=”mainnav”. Therefore when we use the #mainnav selector, we are controlling one specific element (and it’s children; i.e. the elements nested inside it)

#mainnav {properties that apply ONLY to the element with an id of mainnav. ids should be unique. Only one element on the page should have that id}

Class selectors are the most general of the selectors. They tell the browser that you may want to use the same property values for more than one element type on page. Since you can assign any element the same class, you can cut down on repetition by the using the same class in multiple situations

.className {General purpose properties that can be reused on any element mutliple times in the same page}

Linking the CSS to a HTML file: Inline, Embedded, External

Now that we know how to define the property value of a HTML element, how many elements do we want affected by our declarations? One element? Every element on a page? Every element on the entire web site?

There are three different ways to use CSS to control the formatting of HTML elements:

  1. Inline
  2. Embedded (or Internal)
  3. External

Inline works at the element level and contols only that element. It makes use of the style attribute on the element. <h1 style=”CSS declarations”> Some heading text</h1>

Embedded CSS is put in a style tag in the head section of the document. It controls ALL of the selected elements on the page.

In the <head> section…

<style type="text/css">
selector {CSS declarations}
selector {CSS declarations}
</style>

External CSS files have all of the declarations in one, or more, separate files with a .css extension. The external css file will not contain any HTML tags; only CSS selectors and there corresponding declarations. An external CSS file controls ALL of the selected elements on the entire web site. To make this happen, each HTML document on the site needs the following code in the <head> section.

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

The link tag is used to connect the HTML document to the CSS file.

References:

  1. Introduction to CSS. W3Schools.com. http://www.w3schools.com/css/css_intro.asp