How to read and write CSS correctly – Basics of HTML/CSS #10

Todays post is part of the HTML for Beginners series, and will explain some of the basics of CSS. It’s not the most interesting, but knowing the basics of HTML and CSS will help you. It will make tweaking your blog design and figuring out errors so much easier!

What Is CSS?

CSS stands for Cascading Style Sheets. It defines the look of your site. It is separate from HTML (the structure and content of a site), but is still connected because it controls how the content in the HTML file is laid out and styled.

HTML has content (images and text) and uses HTML Tags to explain what type of content it is (paragraph, heading, image). CSS controls the appearance. It tells the web browser how to display that content.

The best practise is that CSS should only be added to a CSS file, and not directly to the HTML. Adding a style directly to the HTML like this example can complicate things.

<p style="font-size:12px;">
should not have inline css
</p>

How does it complicate things? Adding CSS directly to HTML will override any rules in the separate CSS files. This means that when you’re looking to change the style of something (or change your WordPress Theme or Blogger Template) you will have to manually remove all inline styles.

So you should keep all CSS together. On WordPress the CSS file could be called stylesheet.css or style.css. On Blogger this would be in the CSS section between <b:skin> and </b:skin>.

How to write CSS? What Are Selectors, Properties and Values?

Common CSS terms include selectors, properties and values. While it’s not necessary to know these off by heart, it can be useful to familiarise yourself with them. I use them in some tutorials throughout this blog so I wanted to mention them here as reference and explain what they mean.

The following in an example of a CSS rule-set

SELECTOR

The selector is the HTML element that you want to edit. This could be

• A HTML Tag – h1 heading tag, p paragraph tag
• A Class – .example
• An ID – #example

Using a HTML Tag changes the style of a specific type of HTML element. While using a Class or ID changes the style of anything with that class or ID.

Declaration

The declaration consists of a property, followed by a colon, and a value followed by a semi-colon. Curly Brackets are wrapped around the declaration. This structure is important, and is often where errors are found.

Property

The property is the style attribute of the HTML element you want to edit (such as the color, font-family, font-size).

Value

The value is what you are changing it to (for example #000, 12px).

An Example – Selector, Property and Value

So altogether the structure would look something like

selector1 {
property: value;
} 

selector2 {
property: value;
property: value;
}

and an example would be

p {
color: #000;
font-size: 12px;
}

This would change all paragraph text to black and change the text size to 12px.

How is CSS read? Why does it matter that it’s cascading?

Browsers read CSS starting from the very top and scan down. The CSS further down will over-ride any similar CSS at the beginning.

p {
font-color: #66ccff;
}

/* OTHER CSS */

p {
font-color: #ff99cc;
}

Taking the above example to define the text colour of paragraph text – if I had p {font-color: #66ccff;} at the top of the CSS file and p {font-color: #ff99cc;} at the bottom then the second one furthest down the CSS file will over-ride the first. Meaning my paragraph text will #ff99cc which is pink.

What does !important mean?

!important basically means “this is important, ignore subsequent CSS rules”, giving it priority to prevent it from being overruled.

Using the above example again, I could add the !important property like so

p {
font-color: #66ccff !important;
}

/* OTHER CSS */

p {
font-color: #ff99cc;
}

this would prevent the rule further down in the CSS file from over-riding the first rule. Meaning my paragraph would now be #66ccff which is blue, instead of #ff99cc. It’s best to avoid this where it’s possible to edit the original rule making your CSS file smaller.

That’s all for this post, I’ll cover more Basic CSS in future tutorials.