h1 {
color: blue;
text-align: center;
}
Pretty simple, right? I’m sure you can make a few assumptions as to how this works, but let’s break down exactly what is going on here.
A CSS rule consists of two parts: a selector and a declaration block. The selector is where you specify which element you are targeting with your rule, while the declaration block contains the rules you wish to apply to the targeted element. Within the declaration block, which is defined using curly braces, you use name and value pairs (separated with a colon) to define your rules. These are pre-set terms that you will need to know in order to style an element effectively. You will notice that each declaration inside the declaration block ends with a semicolon. This is essential as your CSS will ‘break’ if you fail to end a declaration with a semicolon. While there are some exceptions to this rule, it’s good practice to always end your declaration with a semicolon.
And that’s all there is to it. Every CSS rule you ever write will follow this same structure of a selector and a declaration block. While the contents will change, the actual structure will always be the same. Now let’s look at the selector part in more detail.
The element selector is used to target (or ‘find’) HTML elements based on the value you specify. There are many ways of targeting elements depending on the criteria specified. Let’s first look at a way of targeting generic tags directly. To target a tag, you simply specify the tag name, be it h1, h2, p, div, span, etc. When you specify a generic tag, every occurrence of that tag within your webpage will be styled with the rules you apply. Powerful, right? With CSS, you can write just one rule, which can change the style of that element across your entire website. Look at the following example: