In this article, we will look at the basics of CSS and see how it all looks in practice.
If you still don’t know why you need CSS and why it is used to create websites, then I recommend that you familiarize yourself with the lesson What is CSS?
Once You have decided to learn the basics of CSS then you probably already know that HTML consists of tags, each of tags by default, display its contents (that which is contained between the tags) in a certain way, i.e. it has its own kind of style. With the help of CSS, we can change this style and give a particular object a form that we need.
Description of the different styles and elements is between the tags <STYLE></STYLE>. The way of writing CSS is not the same as writing tags in HTML. Assign properties to any element is done using the following entries:
selector { property: value; }
where the selector is the tag, class, or ID to which we want to assign certain properties a property is a property of the tag we want to change and value is the value we want to assign that property.
The property and value are written in curly brackets after a property is a colon and the values after the semicolon. Throughout the rest of the CSS is not case sensitive, line wrapping, whitespace, ie, the recording you can exercise as you see fit.
Here’s an example so You can see how this works in practice. In this example, using CSS set the text color. Create this HTML page. To do this, copy the code, paste it into a text editor “Notepad” and then go to the menu item File >> “Save as…” and save the file with the extension .html then open the saved file with your browser and You will see that the text is blue.
<html>
<head>
<title>My first page using CSS</title>
<STYLE >p {color:#330099;}</STYLE>
</head>
<body>
<p>An example of using CSS in the design of the text</p>
</body>
</html>
Here’s what You should have:
Please note that the description of the styles in the html code placed between the tags <head></head>, and the p tag which is assigned property is written without angular brackets. In addition, we can extend the properties of our p tag and specify our text not only color but size and background, etc.
Add properties that exist in the code located below (or just replace the old code with the code below) and see what happens with your text.
<html>
<head>
<title>My first page using CSS</title>
<STYLE >p {color:#330099;background-color:#FFFF99;font:14px Verdana, Arial, Helvetica, sans-serif;}</STYLE>
</head>
<body>
<p>An example of using CSS in the design of the text</p>
</body>
</html>
The result is the following:
There are three ways to use style, in the above two cases, we considered a variant when the description of styles is in the html file and at the top between the <head></head>.
In addition, the description of styles can be located in the html code. For example, let’s create the same style for the p tag, just change the size and color of the text. The code, in this case, would look like this:
<P STYLE="color: #009900; background-color:#FFFF99; font:18px Verdana, Arial, Helvetica, sans-serif;">2nd example of using CSS when styling text</P>
Copy and paste it anywhere between <body>and</body>. Get the following:
Please note that we have previously set the style to the <p> tag and the logic everywhere on this page we will use the <p> tag it should be displayed as we had planned in advance. However, the browser always gives the preference to that style, we asked directly in the html code before the text. Therefore, in the second case, You can see that the color and the text size have changed.
And the third-way style is used is when they endure in a separate file, and in html code just leave a link to the file. This method is most preferred, because when using it the page is not loaded with unnecessary code, and if you need to change the form of an element, then you will only need to change the style in one CSS file and this change will appear on all pages, which are associated with this file.
To see how this works, do the following: in the same folder where is your page that we created previously, create a text document, then from the code we previously created page cut what is between the tags <STYLE></STYLE> and paste it in the newly created text document and then save it with the name of the style and extension .css. The tags <STYLE></STYLE> in html document, remove, and instead paste the following code:
<link rel="stylesheet" href= "style.css">
This code is the reference to your CSS file which the browser will find your styles and display the page content properly. If you make everything correctly, You should have two files lying in one folder, one with the extension .html and contains the code:
<html> <head> <title>My first page using CSS</title> <link rel="stylesheet" href= "style.css"> </head> <body> <p>An example of using CSS in the design of the text</p> </body> </html>
And the second style file.css that contains the styles, the code should look like this:
p {color:#330099;
background-color:#FFFF99;
font:14px Verdana, Arial, Helvetica, sans-serif;}
Then run the html page and You will see the same text layout as before but now it is taken from a separate style file.css. The last option to use styles when they are placed in a separate file is the most convenient and preferred.
So often used this method when creating Internet pages. That’s all regarding the basics of CSS. Learn more about how to use styles for their pages read in other lessons devoted to CSS.