Learn CSS: Basic syntax to style an HTML element
CSS is the language used to style your web page. Learning CSS will serve to make your site (or that of your clients) more readable, improve its usability and, in essence, make it prettier.
Contents
Ways to use CSS
There are 3 ways to use CSS in your HTML document:
Internal CSS styles
You can add CSS to your HTML by writing the tag and declaring the desired CSS inside it. This tag should be between the opening and closing tag of the element .
Inline CSS Styles
Another way to use CSS is to apply it to the HTML element in question. To do it, you will only have to write the HTML attribute style="" and add the CSS code between the two quotes.
External CSS styles
This is the recommended way to use CSS on your website. To do this, you will have to create an external file in the folder where your project is and with the label <link rel="stylesheet" src=""> call that file from the HTML where you want those CSS rules to take effect. It would be like this:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Hola</p>
</body>
</html>Basic structure of a CSS declaration
Once the CSS style sheet is called, the next thing we will do is give styles, following the basic structure of a CSS declaration, which would be the following:
selector {
propiedad: valor;
}Selector
Indicates the element to which we want to give styles. Right now we will focus on 3 basic selectors:
- Label selector: It is written like the tag of an HTML document but without the greater and lesser symbols. To style the paragraph in the example above, we would simply write a p.
p {
propiedad: valor;
}- class selector: To call an element with a specific CSS class, we would write the name of the class preceded by a point (.). To style a paragraph with the "text" class, we would write .text.
.texto {
propiedad: valor;
}- id selector: To call an element with a specific id, we would do it the same as with the class selector but changing the point for a pound (#).
#texto {
propiedad: valor;
}property and value
Both form what is known as a ruler, which is nothing more than an indication in CSS language to modify an HTML element.
- Intellectual: In the property we will indicate the characteristic that we want to modify of the HTML element. There are many of them, but in future posts I will show you the most basic ones to be able to play with 90% of the styles in your project. ????
- Market: Once the CSS property is declared, we need to indicate what changes we want to make. That is where the value comes in. This varies depending on the property and we can find everything from numbers (to declare a font size, for example) to color codes or words (to change the color of the text or background of an element).
NOTE: After declaring the property you must write two points (:) and after writing the value, you should end up with semicolon (;).
Final example: Taking our first step
Before I gave the example of the basic structure without talking about CSS itself, but here is a small spoiler:
The color property is used to change the text color of an HTML element. Its attribute can be declared in three ways: Using the default name of the color (you can find lists with CSS color names), using a hexadecimal code or using its rgb code. So, to make the paragraph in the previous example red, we could use one of the following 3 options:
p {
color: red;
}
p {
color: #ff0000;
}
p {
color: rgb(255,0,0);
}And that would be all! If you manage to stick with everything you have read in this article, you already have almost half of the work done when it comes to using CSS ????
If you want to continue learning, take a look at the CSS tag from our blog and subscribe to our newsletter.
See you at the next entry!
¡Subscribe to our newsletter and receive our offers, news and discounts directly to your email!
