Any html document, no matter how many elements it contains, will be essentially “dead” without the use of styles. Styles or better to say cascading style sheets ( Cascading Style Sheets ) or simply CSS define the presentation of the document, its appearance. Let’s take a quick look at applying styles in the context of HTML5.
A style in CSS is a rule that tells the web browser how to format an element. Formatting can include setting the background color of an element, setting the font color and type, and so on.
A style definition consists of two parts: a selector that points to an element, and a style declaration block , a set of commands that set the formatting rules. For example:
div{
background-color:red;
width: 200px;
height: 200px;
}
In this case, the selector is div. This selector specifies that this style will be applied to all div elements.
After the selector in curly braces comes the style declaration block . Commands are defined between the opening and closing curly braces that indicate how to format the element.
Each command consists of a property and a value . So, in the following expression:
background-color:red;
background-color represents a property and represents a red value. The property defines a specific style. There are many CSS properties. For example, background-color defines the background color. The colon is followed by the value for that property. For example, the above command sets the property background-color to red. In other words, the background color of the element is set to “red”, i.e. red.
Each command is followed by a semicolon, which separates that command from others.
Sets of such styles are often called style sheets or CSS ( Cascading Style Sheets or cascading style sheets). There are various ways to define styles.
style attribute
The first way is to embed the styles directly on the element using the style attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3</title>
</head>
<body>
<h2 style="color:blue;">CSS3</h2>
<div style="width: 200px; height: 200px; background-color: red;"></div>
</body>
</html>
Two elements are defined here – the h2 heading and the div block. The heading has a blue text color defined using the color. The div block has width ( width), height ( height), and background color ( background-color) properties.
The second way is to use the element style in the html document. This element tells the browser that the data inside is CSS code, not html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3</title>
</head>
<body>
<h2>CSS3</h2>
<div></div>
</body>
</html>
The result in this case will be exactly the same as in the previous case.
Often the element style is defined within the element head, but it can also be used in other parts of the HTML document. The element style contains style sets. Each style has a selector first , followed by the same CSS property definitions and their values in curly braces that were used in the previous example.
The second way makes the html code cleaner by putting the styles in the style. But there is also a third way, which is to put the styles in an external file.
Let’s create a text file in the same folder with the html page, which we will rename to styles.css and define the following content in it:
h2{
color:blue;
}
div{
width: 100px;
height: 100px;
background-color: red;
}
These are the same styles that were inside the style. And also change the code of the html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>CSS3</h2>
<div></div>
</body>
</html>
There is no longer an element here style, but there is an element link that includes the styles.css file created above:
Thus, by defining styles in an external file, we make the html code cleaner, the structure of the page is separated from its styling. When defined this way, styles are much easier to modify than if they were defined within elements or on the element style, and this is the preferred method in HTML5.
Using styles in external files allows you to reduce the load on the web server using a caching mechanism. Since the web browser can cache the CSS file and retrieve the desired CSS file from the cache the next time the web page is accessed.
It is also possible that all these approaches are combined, and for one element, some CSS properties are defined inside the element itself, other CSS properties are defined inside the element style, and still others are in an external included file. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div style="width:320px;"></div>
</body>
</html>
And in the style.css file , the following style is defined:
div{
width:500px;
height:500px;
background-color:red;
}
In this case, the property is defined for the element in three places width, with different values. What value will be applied to the element in the end? Here we have the following priority system:
- If the element has inline styles defined, then they have the highest priority, that is, in the example above, the total width will be 320 pixels.
- Next in order of precedence are the styles that are defined on the element.
- The least prioritized styles are those defined in the external file.
html attributes and CSS styles
Many html elements allow you to set display styles using attributes. For example, on a number of elements, we can apply the width and attributes height to set the width and height of the element, respectively. However, this approach should be avoided and CSS styles should be used instead of inline attributes. It is important to clearly understand that HTML markup should only provide the structure of the html document, and its entire appearance, styling should be determined by CSS styles.
CSS Code Validation
In the process of writing CSS styles, questions may arise whether it is correct to define styles in this way, whether they are correct. And in this case, we can use the CSS validator, which is available at http://jigsaw.w3.org/css-validator/ .