When starting CSS, as I have recently, you may be wondering what the structure or format of CSS is. More experienced developers would refer to this as the syntax of a language, which refers to the rules that define a language.
The basic syntax of CSS is made up of two elements, namely a selector, and a declaration, which is made up of a property and a property value. While these may sound technical and intimidating, once you understand each component, you will be able to style your webpage with ease.
The rest of this article will explain each of the elements that make up the CSS syntax in a beginner-friendly way.
What is the structure of CSS?
Before we dive into each element of the basic CSS syntax, let us first look at a very simple code example, so you know what you will be dealing with.
selector{
property: property value;
property: property value;
}
The first element of the above syntax is the selector. The next is your declaration. Declarations are made up of the property – this is what you want to style. Your property can be a range of things from border padding to font size, colour, and even background settings.
Lastly, you have your property value. Your property value is what style you want to be applied to the property. For example, if your property were font-size, your property value would be the font size that you want to be applied. There are also various units for different properties such as pixels, REM and EMs – you can learn more about the measurement units in CSS here
Your CSS declaration is normally contained between two curly brackets {}.
What is the use of a selector in CSS?
A selector is the first part of the basic syntax of CSS.
Selectors tell the browser which elements should be selected. For example, if you have a <h1> tag in your HTML document and you want to style this element in a specific way, you would select the <h1> tag in your CSS as the selector.
Using h1 as your selector is making use of the type selector. One of the other more popular selectors is the class selector. If you are unsure what a class is in HTML and how to create one click here to read our article “What is a class in HTML”.
How to use the type selector, with code example
In our above example we can now replace “selector” with our actual selector, the <h1> tag.
h1{
property: property value;
property: property value;
}
How to use the class selector, with code example
Let us assume that we allocated the class “heading” to our <h1> tag in our HTML file.
We can now replace “selector” with the class name “heading” as our actual selector. As can be seen in the below code example.
.heading{
property: property value;
property: property value;
}
When you are using a class name as a selector, you include a period (.) before the class name, and your class name needs to be exactly the same as it is in the HTML document as it is case sensitive.
How many CSS selectors are there?
When you start learning CSS, you will likely be using the type and class selectors the most, however, according to the Mozilla developer docs there are nine other types of selectors that you can use, we touch on some of these in this article.
How do you write CSS declarations
Declarations are often referred to as “declaration blocks”. Each declaration block is contained between two curly brackets {}, with the contents of the brackets being your property and property value. Each declaration includes two elements, a property name and a value, separated by a colon (:).
Declarations or declaration blocks can be written in numerous ways. You can write multiple declarations in one line and separate them by semi-colons, commonly called single-line formatting. Alternatively, you can write your declarations over multiple lines, known as multiple line formatting.
Single-line CSS formatting:
Single line formatting involves writing multiple declarations in one line and separating them by semi-colons, as can be seen below:
.heading{
property: property value; property: property value;
}
Single line formatting has its advantages and disadvantages. On the plus side, it is generally easier to find selectors in your CSS file, but it is often harder to find the specific property in the selector. Single line CSS formatting can also result in long lines of code that wrap on your screen, which can be difficult to read.
Multi-line CSS formatting
An alternative to single-line is multi-line formatting, where you write each property and property value on a new line as shown below:
.heading{
property: property value;
property: property value;
}
Multi-line formatting makes it easier to find a specific property, but it results in a longer CSS file, which involves scrolling around your document more than with the single line alternative.
There are also different ways to indent your code.
For the most part, choosing between single or multi-line formatting or even how to indent your code comes down to personal preference and what you can read easier.
I prefer the multi-line option as I find this easier to read, but it means I scroll around a fair amount. As a beginner, it is important to remember that coding is more valuable than not coding and only following tutorials. When you actually write code, you learn your personal preferences and what you can read easier. You don’t learn this stuck behind a tutorial wall, unfortunately.
CSS properties
The first part of your declaration is a property. The property you select depends on what aspect of the element you want to style. Do you want to change the font size? Do you want to change the colour of the text? Do you want to add padding?
As you can tell, there is a vast range of properties that you can select. The properties available to you would depend on the element you are selecting. Some properties are only applicable to text, while others can only be applied to images.
Because there is such a vast range of properties that you can choose, we are not going to cover every property and its corresponding value in this article; however, to complete our block of code, we are going to assume that we want to change the font-size and colour of our <h1 class =”heading”> element.
To do this we will add the font-size and color property and apply appropriate values.
.heading{
font-size: 24px;
color: green;
}
That’s it – you just coded your very first line of CSS, now it is time to explore all of the properties that you have available to you and start working on some challenges.
Click here to get our FREE CSS Properties Cheat Sheet for Beginners to help you on your coding journey!
