Hang on, it's loading.

Blog

Design Talk.

Blurbs and rants about graphic design

CSS Syntax

CSS “commands”, style rules is the proper name, are composed of:

selector {property:value}

The selector is the HTML element to be specified, i.e., the element that will be affected by the rule which is expressed in between curly brackets. The rule is composed of a property, which is the “part” of the HTML element that you want to modify, and the value of the property. Property and value compose the declaration.

So if you want a paragraph to be red, you take the paragraph selector (p) and specify that its color property (color) has the red value (red). In CSS it translates:

p {color:red}

This is the result:

This is a red paragraph. It’s a short paragraph, but it’s stil la paragraph. So stop arguing about it!

Property and value are separated by a colon. If you are specifing more than one property, they have to be separated by a semi-colon:

p {color:red;align:left}

The example above will result in a left aligned red paragraph.

If the value is composed of more than one word, set the value between quotation marks:

p {font-family: “sans serif”}

This paragraph will use only sans serif fonts. Which font you will see is usually specified in one of the preferences of your browser (or of the browser of the person that will look at the page). If your browser’s preference says that you will see Helvetica every time it finds the “sans serif” value you will see Helvetica, but if someone else’s preferences are set to Arial, they will see Arial.

You can group selectors so they all have the same properties. If you want all of your headings to have the same colour, whether they are h1, h2 and so on, you can either write it like this:

h1 {color:red}
h2 {color:red}
h3 {color:red}

Or you can write it like this:

h1, h2, h3 {color:red}

The last method is much faster and more orderly. Each selector is to be separated by a comma.

While it isn’t necessary, if you are specifying several rules, you can put them on different lines, so it’s easier for you to locate them at a later stage. So the previous example with the red, right aligned paragraph would be written like this:

p
{
color:red;
align:left
}

When using inline styles (explained in What is CSS?) the syntax changes slightly. You have to say that you are about to apply a style (using style=). The rule then follows within quotation marks instead of curly brakets. Here is an example:

<h1 style=”color:red;font:arial”>This is a heading</h1>

The result is this:

This is a heading

Web Graphics

    Leave Your Comment Here.

    Leave a Reply