CSS Code Tutorial

This CSS code tutorial provides a basic overview of CSS codes, and how they can be used to change the appearance of a web page. When design attributes were added to markup language (HTML, XHTML, etc) specifications, it became a long and expensive nightmare for web developers. To solve this issue, all formatting options were removed and CSS was created.

Although CSS codes may seem overwhelming at first, believe us, it's not as complicated as it looks!

What Are CSS Codes?

Cascading Style Sheets, or CSS codes, allow you to further change the appearance of a web page's colors, fonts, and layout. Just as Microsoft Word lets you change the appearance of a document, the visual appeal of a raw HTML (or other markup language) document can also be altered.

CSS Code Attributes

In order to be readable and writable by humans, CSS language uses basic desktop publishing terminology - such as that of HTML coding language.

CSS codes contain rules - with each rule (or rule-set) consisting of three parts: - a selector, a property and a value:

Selector - the link between the HTML document and the style sheet

Property - the attribute you want to change

Value - the change of style that you want to make

As a whole, a CSS code looks like this: selector {property:value}. Note that the "property" and "value" are separated by a colon and surrounded by curly braces.

CSS Code Design Tips

CSS codes can either be attached as a separate document, or embedded in the HTML document. Either way, it is a smart choice to save your CSS codes in another location other than your web page.
To make CSS codes more readable, you can describe one property per line, like this:
p
{
text-align:right;
color:green;
font-family:arial
}
You can save time by grouping "selectors" with commas. For example, you can group all header elements to be displayed in the same color:
h1,h2,h3,h4,h5,h6
{
color:red
}
When more than one "property" needs to be specified, each property should be separated with a semicolon: p {text-align:center;color:green}

If the "value" contains more than one word, then quotes should be put around it: p {font-family:"times new roman"}

CSS has different levels and variations - with new features being added and higher levels being reached every year. Even though this post reviews only the basic elements of CSS codes, it's important to keep in mind that more advanced CSS codes are also possible. Check out this advanced Cascading Style Sheets (CSS) Tutorial to learn even more about CSS codes!

CSS Code Tutorial

What Are CSS Codes?

CSS Code Attributes

CSS Code Design Tips

Comments

My Famous Website Articles