CSS for beginners
CSS stands for Cascading Style Sheets. CSS is used to style web pages by altering the font, colour, size and layout of the content or adding animations and other decorative features.
The purpose of CSS is to style markup languages (like HTML or XML).When you get to start styling your pages with CSS, this does not only mean that the fun part of coding begins but also it is when some difficulties appear. Setting typography and colors might be easy, however, positioning will be a little bit more challenging. Anyway, we will get to that later.
In short, I will explain the basics of CSS, how it works, what are CSS rules and how to apply it to HTML. In addition, I recommend you to search for other sources to learn how to specify length, colour, and other units in CSS, to understand inheritance, and debugging CSS.
How to apply CSS to your HTML document?
There are three methods to apply CSS that you should know. However, there is only one recommended to use.
CSS as an attribute
You can write CSS directly on an HTML element, by using the style attribute.
Example:
<p style=”color: red;”>This text is a paragraph.</p>
CSS in the <head>
You can use a <style> tag in the <head> of your HTML document.
Example:
<html>
<head>
<title>Hello World</title>
<style>
p{ color: red;}
</style>
</head>
<body>
<p>This paragraph will be red.</p>
</body>
</html>
CSS in a separate file
You can write your CSS in a separate file with a .css extension, and then link it to your HTML by using the <link>HTML tag.
Example:
<html>
<head>
<title>Hello World</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>
<p>This paragraph will be red.</p>
</body>
</html>
It is the HTML document who calls the CSS file, in this case a file called main.css located in the same folder as the HTML file.
This last method is preferred since it is a separated CSS file and you will need to distinguish the content from your HTML document and its styles. Furthermore, this method makes maintenance easier as well, because the same CSS file can be used for several pages that conform a website.
How does CSS work?
CSS works by selecting an HTML element e. g. a paragraph, choosing a property to alter e. g. the color, and applying a certain value e. g. red.
selector{ property: value;}
CSS is a 3-part process:
- the selector defines which HTML element(s) is targeted
- the property defines what charateristic to alter
- the value defines how to alter that charateristic
This whole block (selector/property/value) is a CSS rule.
Remember that you can set as many properties as you want for any set of selectors in the same rule. You should put each property/value pair on one line. To make a valid rule, it is important to write the property/value pair inside the curly braces separated by a colon and closed by a semicolon as it is in the example, so the syntax remains valid.
Classes
It is very useful to set classes for the elements on your HTML document to differentiate styles for them.
Of all HTML attributes, the class attribute is the most important for CSS. It allows us to define a group of HTML elements that we can target specifically. You create them starting with a dot . in front of the class name you want to use:
.date {
color: red;}
You can also use the id attribute in your HTML, and target it with a hash # in your CSS, which can be used only for one the HTML elements.
As next step, I recommend:
Search for tutorials about Inheritance and Pseudo-class selectors
