Lesson 1: The Basics

Websites consist of many different technologies. The basis for those is HTML, which provides websites their structures. The compliment of HTML is CSS, which provides the design and look of the website.

What is CSS?

CSS stands for Cascading Style Sheets. The Style Sheet portion refers to the fact that this is a “sheet” (or document) which tells the browser how to style the HTML. The Cascading part refers to how CSS behaves in that if you set a property, like color or text, for a parent, it cascades down to each of that parents children, grandchildren, and so on.

The Basic Syntax

The basic syntax of CSS is fairly simple. You first state which element or elements you are going to affect with the specific block of CSS. Then, you place an open curly bracket ({) and after that you add each of your statements, starting with the elements to be affected, then a colon (:), then the parameters for the statement, followed by a semi-colon (;). You repeat this for each statement you want for this block, then you end the block with a closing curly bracket (}). Here are a few examples:

body {
  background: #F0F0F0 url(back.png) top left no-repeat;
  color: #333;
  padding: 0;
}

a .external_links {
  text-decoration: underline;
  color: #66FF32;
}

#content > div {
  padding: 1em 2em;
  border: 2px solid black;
}

Three Ways to Specify

There are three ways you can specify any specific elements by. The first is the element name itself, like body or p (for paragraph). When you specify like this, it will effect every element of that type.

Another way is to specify it by class. To do this, you would set the class attribute of each of the elements which you want to affect. Then, in your CSS you specify it by placing a period (.) and then the class name you gave the element. Note: Don’t put the period in the class attribute; only put the period in the CSS.

The last way to specify is by id. On any given page, there can only be one element that has a specific id. You specify the id attribute of the element you want to affect, and then in the CSS you place a pound sign (#) followed by the id name.

Since this is cascading style sheets, you can also select elements based on their parents. There are a number of ways to do this, and we will cover them all in-depth in a future lesson, but their basic syntax is simply stringing them together one after another, separated by special symbols (if needed) which cause it to react in various ways. Here are a few examples of the element name chains:

  body > div {}
  p a {}
  h1+p {}
  a~img {}

Additionally, you can also have the same block of code affect multiple things by separating the names with commas. Here is an example:

p, a, li {
  color: #F00;
}

That block would set the font color of all paragraphs, anchors, and list items to be red.

One final bit of basic syntax is comments. You can place comments in your code which are basically little notes to yourself about what each chunk means. To create a comment, you start with a slash followed by an asterisk (/*). You than type whatever you want, on as many lines as you want, and when you are done, you put another asterisk and another slash, in reverse order of the first (*/).

Here is a quick examples:

/* The following makes the background color blue. */
body { color: blue; }

In our next lesson, we’ll start taking a look at how to manipulate sizes and positions of our elements which will lead into how to arrange our divisions and spans to create our layouts: Lesson 2.1: Dimensions – Units of Measurement

If you haven’t, go ahead and read through at least the first several HTML lessons as we will be referring to many HTML elements throughout all of these lessons.