CSS: Basic Syntax

The basic syntax of a CSS rule is as follows:

selector {property: value;}

The selector is simply the HTML tag you wish to style, the property is what you want to change and the value is the new setting. Curly brackets start and end the selectors rule for all properties.

There is also two key punctuation marks that are used within your CSS:

selector {property(colon) value(semicolon)}

The colon is used to separate properties from their values. Semicolons are used to end that particular property. If you have multiple properties for a selector, you will need to end it with a semicolon before giving another property.

Take this basic example:

p {color: red;}

In the above example, all <p> tags will be given a text color of red.

You can apply multiple properties to one selector:

p {color: red;}

Note: Notice after each value there is a preceding semicolon.

If you have one selector that has a lot of properties, you can also separate your CSS on multiple lines:

p {
color: red;
text-align: left;
}

This makes it easier to read selectors with lots of different properties. It should be noted that “whitespace” (blank spaces) increases the size of any file. So while multi-line CSS may make developing a website easier. If you are concerned at all about file size and bandwidth, you may want to minimize as much “whitespace” as possible to make your CSS files smaller.

Grouping Selectors

What if you wanted all your heading tags (<h1> to <h6>) styled roughly the same way (in Arial font), you could group them all together by separating each selector with a comma.

h1,h2,h3,h4,h5,h6 {
CSS rule here
}

This can save you time as well as creates more manageable CSS.

Adding Comments To Your CSS

Adding comments to your CSS files is a good practice to use. It allows you to document changes and they help give you insight as to why you are setting (or have set) something the way you did. It also can serve to help other CSS professionals better understand your CSS rules.

Adding comments to your CSS is simple and straightforward:

/* This is a comment */

Everything in between the /* */ will be ignored by web browsers when rendering the web page. You can add comments almost anywhere within your CSS.

Examples:

/* All paragraph classes */
p.alert {color:red;}
p.message {color: black; background-color: yellow;} /* Warning paragraph */

As you can see you can add comments on their own line, with nothing else or you can add it after a CSS rule to comment on that particular rule.

Give Your CSS Selectors Some Class

What if you want to give one of your HTML elements multiple looks? Say for example you want to give all your paragraph tags located within the middle of the page one look but want to format all your paragraphs in a sidebar differently. CSS allows you to create “classes” for your HTML elements. These classes allow you to filter out some of your HTML tags and style them with pinpoint accuracy.

Using classes is a relatively simple procedure. All you need to to is add  one HTML attribute:

<p>Default paragraph</p>
<p class=”red”>This paragraph has been given the class of 'red'</p>
<p class=”blue”>This paragraph has been given the class of 'blue'</p>

Now that we have our HTML set up properly we will need to add the proper CSS rules to style them.

p.red {color: red;}
p.blue {color: blue;}

Using these CSS rules will make it so all <p> tags with the class of 'red' will have a text color of red and all <p> tags with blue will have blue text.

Using Classes Without Selectors

What if you wanted to create a CSS rule and have it apply to multiple selectors? One example would be  highlighting certain text within your content. The problem is you don't want to duplicate countless rules for each selector. With CSS it is a rather easy task.

First lets create our HTML:
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<p>This paragraph has <span class=”highlight”>highlighted text</span></p>
<p class=”highlight”>This whole paragraph will be highlighted</p>

Now we create our CSS rules:

p.highlight {background-color: yellow; color: black;}
span.highlight {background-color: yellow; color: black;}

As you can see, we are duplicating each rule for each HTML element (selector). We can simplify this by excluding the selector and only leaving the class name. .highlight {background-color: yellow; color: black;} Note: There is a period (.) before the word “highlight”.

This makes it so every class named “highlight” will be colored the same regardless of what selector is used. Using this technique can make it easier to define content that should be styled differently (highlighting, warnings, errors, etc..) regardless of how you are marking up your HTML documents. Just add class=highlight” to any HTML tag and the above rule will style it correctly.

Permalink