Before reading this article, be sure you have read our articles about HTML or at least you have some knowledge of HTML, otherwise you won’t understand too much.
What you will learn in this CSS Tutorial: how to write proper CSS codes, where and how to put the CSS code, how to do a layout, using CSS, how to customize fields, and thus forms, insert transparent images from an image gallery and so on.
That being said, I invite you to read this CSS tutorial. First, let’s answer to our first question: Why do we have to use CSS? Using CSS allows us to create Web pages using simple but complex and diverse effects. The CSS can set the color, font size and text, can also create a layout (a support for the HTML elements) by adding custom colors or background images and more. In conclusion, CSS will help you to keep the Html code simple and attractive.
Cascading Style Sheets, CSS, is the name of a style used to customize HTML tags. Basically, HTML was designed to mark the elements of a page: <html> <head> <title> </ title> </ head> <body> <h1> </ h1> <p> </ p> </ body> </ html>.
With the introduction of HTML 3.2, the attributes have been introduced as personalization tags such as “font”, “color”. It was when the HTML markup language has become more attractive to Web designers. Each page of the Website changed its properties. This problem was solved in version 4.0 of HTML. All the customization brought by attributes was removed and stored in an external file with the extension .css.
In this way we can change the theme of a Website, by changing a single file that shows all the pages of a Website. We can change the text color, font, size, we can customize the div’s, forms and more. And like that we can make more CSS files. In the next chapter we move on to more practical things and we learn how to do everything we said before using CSS.
Consider a practical example which we will study. We want a big title to be green: h1 {color: green}. What does it mean exactly? “The title of size 1 is green”. We can also say:
body {color: aqua}. In free translation: “The background color is aqua”. Let’s try again: p {text-align: right; color: green}. It means “green letters on the right”. Leaving aside the example, we could say that CSS syntax is as follows: tag {attribute: value} or element {property: value}.
If the value of the element consists of two words or more, we put them between quotations: p {font-family: “Times New Roman”}. If we write more than one property, we must separate them from each other by a semicolon (;): p {text-align: right; color: green;}.
Recommendation:
We recommend you to put a semicolon after all the properties, even after the last one. Take into account this: p { text-align: right; color: black; font-family: “Times New Roman“; }. Another CSS rule says that several items with similar properties can be grouped as follows h1, h2, h3, p { font-family: arial; color: yellow; }. The comments in CSS have the same function as the HTML comments, they specify a certain expression, or if you miss something, the code will remind you what you are doing, or whatever comes to your mind.
