CSS Basics

Now that you know how to load CSS code into a page, it is time to learn the basics of CSS code so you can create your own.

CSS Syntax

To start, I want to talk about CSS code syntax. Each line of CSS code you write needs to be done in a particular way to avoid errors.

I have reproduced example code below from the inline CSS example in the last chapter:

<a href="http://ryanstevensonplugins.com/" style="font-weight:bold;color:#FF0000;">Ryan Stevenson Plugins</a>

I am going to explain this CSS code to you here - mainly focusing on the syntax.

The CSS code in this example is found between the double quotes for the STYLE attribute.

All CSS code can be broken down into basic pieces: a command name, followed by a colon ':', followed by the value for the command, and ending with a semicolon ';'.

This CSS code actually includes two different commands: font-weight and color.

Notice the ending semicolon after the value for each of those commands. This semicolon separates one command from the next, so it is absolutely essential to use. Technically, the last CSS command in a line of code DOES NOT need a closing semicolon to work, but I highly recommend simply making a habit of putting it at the end of every command value.

For the font-weight command in this example, the value is set to bold - this simply makes the text be displayed bold (like using a B or STRONG HTML tag). Note that the command and value are separated by a colon, and the value is closed with a semicolon.

For the color command, I have set a value of #FF0000. This changes the text color to the value I have set (which is red). This is a hex color code - try http://colorpicker.com/ if you need help with generating the hex color code for a specific color.

CSS Identifiers

The next thing that you need to learn about CSS is how to use identifiers. When you load your CSS code using a method other than the inline method (either HTML or META tag), you will need to use identifiers to get your code to work.

An identifier is added to each line of CSS code so that it knows where to apply that CSS code to the page content, so this is very important.

Using an identifier is fairly simple, but understanding how to use them can be a bit more complicated.

To use one, simply start your line of CSS code with the identifier, then add a space and an opening curly bracket: {

Your CSS code that goes with that identifier then goes after the opening curly bracket. Finally, put a closing curly bracket at the end of your CSS code for that identifier: }

Here is the example I used previously for basic CSS code with an identifier:

a {font-weight:bold;color:#FF0000;}

There are three main types of identifiers that you can use with CSS code: tag identifiers, id identifiers and class identifiers. I have discussed each of these in detail below.

Tag Identifiers

A tag identifier makes reference to a specific type of HTML tag. When you use this type, all of the CS code that goes with the identifier will affect every instance of that HTML tag throughout your entire page.

The identifier that you use in your CSS code should be the same as the name of the HTML tag that yoi want to alter.

Using the example above, the letter 'a' is the identifier, which is for the HTML tag A (links). You coul simply replace the A in the example code with the name of another HTML tag. You are not limited to using simple HTML tag elements either - you can actually use identifiers for HTML tags like HTML or BODY (which covers basically the entire page content).

ID Identifiers

This type of identifier makes reference to the ID attribute value of an HTML tag on your page. The ID attribute value should be unique on any given page, so this particular identifier will only reference one HTML element on your site.

To use this identifier, simply use a number symbol '#' followed by the value of the ID attribute that yo want to target.

Here is some example HTML code for a link that has an ID attribute:

<a href="http://ryanstevensonplugins.com/" id="rsplink">Ryan Stevenson Plugins</a>

 If I wanted to make reference to that link in my CSS code with an identifier, I would use the following code (this code uses the same CSS code that I previously used in the other examples):

#rsplink {font-weight:bold;color:#FF0000;}

As you can see, this looks almost identical to my previous identifier example except that the identifier has changed. #rsplink is the identifier, which references the HTML tag with the ID attribute set to a value of rsplink.

Class Identifiers

This type of identifier is very similar to the previous identifier, except that it references the CLASS attribute value of an HTML tag. Since a CLASS attribute value can be used many times on a single page, this is an identifier that you can use to reference a specific group of HTML tags that you have created. This could be a single HTML tag but it could also be many of them.

To use this identifier, simply use a period '.' followed by the value of the CLASS attribute that you want to target.

Here is some example HTML code for a link that has a CLASS attribute:

<a href="http://ryanstevensonplugins.com/" class="rsplink">Ryan Stevenson Plugins</a>

If I wanted to make reference to that link in my CSS code with an identifier, I would use the following code (this code uses the same CSS code that I previously used in the other examples):

.rsplink {font-weight:bold;color:#FF0000;} 

This is almost identical to the ID identifier example, except that this uses a period in front of the identifier name and it makes reference to a CLASS attribute.

Combination Identifiers

One last identifier that I want to mention isn't really it's own type but a combination of other types. One of the things that makes CSS so powerful is the flexibility of the identifier system.

You can actually take multiple identifiers and put them together in one line of CSS code.

For example, let's say that you wanted to have CSS code to alter HTML links (A tag). However, maybe you didn't want all of the links on the page altered and didn't want to go through your code to add a 

class to each tag to use as an identifier. You may actually be able to reference those links in another way using a combination of identifiers. If the links you wanted altered were found within an HTML TABLE tag and it was the only TABLE tag on the whole page, you could use that as a partial identifer.

I have created some example code below that uses a combination of identifiers like this:

table a {font-weight:bold;color:#FF0000;}

As you can see, all I did was put two identifiers in front of the CSS code with a space between the identifiers. This CSS code would then apply to HTML links, but only those located within a table!

This same concept can also apply to mixing the identifier types. Using the same example, let's say I have more than one table on my page and only want this code to apply to links in one of the tables. If that one table has an ID attribute set, I can use that as an identifier instead of the general TABLE tag identifier.

I have created more sample code below for this situation, where my table has an ID value of rsptable:

#rsptable a {font-weight:bold;color:#FF0000;}

This concept of using multiple identifiers can also be used with more than two identifiers at a time.

I also want to show you another example of using multiple identifiers but in a different way. This can help to reduce your workload and also reduce code bloat.

What if you had CSS code that you wanted to apply to two different HTML elements on your page? This can easily be accomplished by simply separating the identifiers with a comma.

For the example below, I have applied the same CSS code to more than one element:

#rsptable a, div, table td {font-weight:bold;color:#FF0000;}

The CSS code above actually alters three different elements: A tags with the ID value of rsptable, div HTML tags, and td tags found within table tags.