In this section, we will learn the basic steps that are needed to style an HTML element using CSS.
Styles in CSS: CSS Syntax:
There are a couple of steps we need to do when it comes to styling an HTML element. For example, first we need to select the target HTML element using CSS selectors, then create a body in CSS specifically for that HTML element. Now within this body we invoke the CSS properties we want to use to style the target HTML element/s.
In this section, we will give an overall view on these topics and see what they are and how to use them in CSS.
- CSS Selectors
- CSS Declaration Block
- CSS Declaration
- CSS Property
- CSS Value
CSS Selectors
Selectors are the CSS methods we use to access elements in an HTML document!
For example, let’s say there are multiple <p> elements in an HTML document. One of them has an id attribute with the value “p1”, a couple of those elements have the class attribute with the value “para” and the rest are just simple <p> element without any id or class attribute.
Now, let’s say we want to access the <p> element that has the id attribute with the value “p1”. How do we do that? Well, the answer is: with the help of CSS selectors!
For example, CSS has a type of selector called attribute selector that we can use to bring HTML elements into CSS code area using their attribute values! For example, we can select an element based on the value of the id attribute in CSS. Or we can target those elements that have a specific value for their class attribute (like the value “para”) and apply a CSS style to those elements specifically.
Alright, enough with theory. Now let’s go and see the syntax of CSS selectors.
CSS Selectors Syntax:
This is where we bring CSS selectors:
<style>
selector{
}
</style>
The `selector` here is a pointer to the target HTML element/s and browsers use the value we set as the replacement of this word to find the target element/s that we want to apply to the CSS styles.
The pair of curly braces that comes after the `selector` is called declaration block and it’s the place we use to write CSS styles for the target element/s. (We will talk about the declaration block in just a moment).
For example, let’s say we want to select all the <p> elements in an HTML document and change their background color to light-blue color. Well, to do that, all we need to do is to replace the “selector” word with the value “p” like:
p {
//body…
}
This statemet tells CSS that the target of the styles in the “declaration-block” is the entire <p> elements of the page!
Or let’s say we want to select those HTML elements that have the value “para” set for their class attribute and set a red border for them. Well, to do that, we can replace the “selector” with “.para” like:
.para{
//body...
}
Note that here we’ve prefixed the value `para` with a dot. This tells the browsers that the target of the styles we are writing in this declaration-block are those elements that have the value `para` set as their class attribute. (Selectors is a lengthy topic and the next few chapters are all about selectors. So for now, just try to grasp the concept and in those next chapters we will explain the ways of using selectors in great details).
Note: if you’re writing your code in an external file and use the <link> element to bring the file into an HTML document, then you don’t need to use the <style> element in that file anymore.
Example: using selectors in CSS
See the Pen using selectors in CSS by Omid Dehghan (@odehghan) on CodePen.
Here, there’s only one declaration block and its selector is set to `p`. This means the target of the styles written in this declaration block are the entire <p> elements in this document.
CSS Declaration Block
The curly braces that comes after the selector is called the declaration-block. This is the block we use to bring CSS properties and create different styles for the target element/s.
Note that within a declaration block, we can invoke more than just one CSS property and all those properties will affect the target element/s that this declaration block is written for.
Alright, now let’s move on into the declaration block and see exactly what we can write in this block and more importantly, how!
CSS Declaration: What is a Declaration?
Within the body of a declaration block, we can invoke CSS properties and set a value for them! For example, there’s a CSS property called `font-size` by which we can change the size of a text content (like the content of a <p> element) in a document. Now, in a declaration block we can bring this property, set a value for it and as a resultm change the font size of an element in an HTML document.
Note: the process of invoking a CSS property and setting a value for it is called declaration.
This is the syntax of CSS declaration:
property-name: value ;
`property-name`: The property-name refers to the CSS properties we can use in a declaration block. For example, the `font-size` property is a CSS property and could be used as the replacement of the `property-name`.
`value`: this is the value we use for the target property. Depending on the property we use, the range of values is different. For example, if the property is `font-size`, then the value could be `12px` or `3em` etc. (The font-size property is explained in greater details in later sections.)
`:` we separate each CSS property from its value by using a comma `:`.
`;`: each declaration within the declaration block must be ended using a semicolon `;`. If you don’t put this symbol, your style won’t work.
Example: using CSS property
See the Pen using CSS property by Omid Dehghan (@odehghan) on CodePen.
Example: styling HTML div element
See the Pen styling HTML div element by Omid Dehghan (@odehghan) on CodePen.
