CSS Introduction

Cascading Style Sheets

HTML stands for Hyper Text Markup Language. Markup is the key word in HTML, because HTML describes the content of the page.

CSS stands for Cascading Style Sheets. Here, Style is the key word. CSS styles the page’s contents.

CSS files end with the extension .css and are linked to your HTML page using the <link> tag:

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

The <link> tag should always live inside the of your HTML document, as seen here:

          <title>Core Interaction</title>

CSS Syntax

CSS syntax has three main components: selectors, properties, and values. Selectors can be any HTML element, for example: p, a, hr, strong, and h1 are all selectors. For each selector, you can specify properties, such ascolor, font-family, font-size, etc. Each property is given a value, such as blue, Arial, 17px, etc. In the example below, p is our selector, color, font-family, and font-size are the properties, and blue, Arial, and 17px, are the values.


Keep in mind, if this CSS file were attached to this page, it would apply the above styling to every paragraph within the document. CSS, like HTML, can contain comments. To open a comment, type /*. To close, type */.

Classes and IDs

You can also define your own selectors using classes and IDs. Classes and IDs are HTML attributes, like src or href. The big difference between classes and IDs is that classes are repeatable, whereas IDs can be used only once. You can attach a class or an ID to any HTML element like this:

          <pid="intro">Hi, I'm an introduction!</p>
          <pclass="normal">I'm a 'normal' block of text.</p>
          <pclass="indent">I'm a special block of text.</p>

To reference an ID in your CSS document, you must use a hash tag as a prefix (ie: #intro). To reference a class, use a period as a prefix (ie: .normal).Now I can use the selector #intro to control the appearance of the first paragraph, the selector .normal to control the second, and the selector .indent to control the third. For example:

          font-family:"Times New Roman",serif;