Introduction to CSS

CSS, which stands for Cascading Style-Sheets, is a language used on the internet to style web pages. It is very powerful, and offers style rules for just about every conceivable part of a page’s layout.

We’ll start our examination of CSS with a few simple style properties: color, background-color, and border. We’ll also cover the first few basic selectors CSS offers, to direct the browser as to which elements should be styled.

When you want to style an element, there are a few options available to determine which set of elements are to be styled. The simplest selector is to type a tag name - for example, “a” or “table”, like so:

a {
	color: black;

table {
	background-color: green;

Here we can see the basic syntax of CSS rules. There is a selector, followed by an opening curly brace; then, the style rules are listed in the format “rule”: “value”; - then the closing brace ends the style rule. In this case, we are styling all <a> tags on the page to have a black text color, and all <table> tags on the page to have a background color of green.

There are a number of colors built-in to CSS, including black, green, white, blue, red, lime, and quite a few others. However, sometimes you’ll want to specify a custom color; you can do this using hexadecimal color numbers. Each of red, blue, and then green have two hexadecimal digits that you can use to specify a custom color - the custom color always starts with a hash or pound symbol:

a {
	color: #FF0033;

In this case, we’re specifying the brightest red that is available, with a touch of blue. If you’re not familiar with hexadecimal digits, they range from 0 to F, with F = 15, for a total of 16 numbers. Each color has two hexadecimal digits, giving a range of 16 * 16 values, or 256 values. This means that the range of colors has 256 * 256 * 256 values, or 16.7 million colors.

The first two characters after the hash symbol represent one of the 256 possible values for red; the next two characters represent one of the 256 possible values for green, and the last two values represent one of the 256 possible values for blue.

This system of hexadecimal values for colors is known as “RGB”, for “Red Green Blue”. There are other color systems, but they’re not as prominent in HTML and CSS.

So far the selectors we’ve used (the text before the opening curly brace that determines what the CSS rule applies to) have just been tag names, such as “a” and “table”. Quite often, you’ll want to style a specific element, or a particular set of elements. This is where the id and class selectors come in handy. As long as your HTML specifies classes and ids for elements that need special styling, effectively styling them is quite simple:

a#mainLink {
	color: lime;

div.wrapper {
	border: 1px solid black;

The first example above applies the CSS rule of making the color lime to the anchor with the id of “mainLink”. I say “the anchor” here because you should never give more than one element the same id.

The second CSS selector above applies the CSS rule of a border to all <div> elements with a class of “wrapper”. The “border” property is specifying a 1 pixel wide border around the entire element, with black used as the border color.

The border property has three main components: the width or thickness of the border, in pixels; the style of the border, including solid, dashed, dotted, double, and more; and the color of the border, which can be any RGB value.

These three components can be specified in three separate CSS properties, if you prefer: “border-width”, “border-style”, and “border-color”. Using the “border” property is simply a shortcut for when you want to specify all of the properties at once.

That concludes this first tutorial on CSS. This is a basic introduction to using CSS, and future tutorials will delve deeper into the many properties you can specify to make your page appear exactly as you want it to.