How to make a web: What is CSS? [Part 2]

CSS or Cascading Style sheets is the way we have in web design to apply styles to HTML elements. Although initially it can be complex, once we become familiar with how to work and structure the rules, we will get the browser to interpret them correctly and give that custom design to each point of our website with CSS.

Let’s start this second part of the tutorial How to make a web. You can read the first part about HTML here.

CSS Versions. What is CSS3?

As with HTML, CSS has been evolving and adding new properties to its already extensive list of options. Some properties, however, stop being used or never come to be used by browsers, so it is decided to remove them. Thus, each new version of CSS incorporates new properties but also inherits most of those defined in its previous version.

Currently the standard is CSS3, since most browsers offer almost complete compatibility for most properties and effects. Does it mean that if I do not know CSS3 I will not be able to design or modify the design of my website? No it’s not true. You can work with CSS2.1 properties without problems and browsers will interpret everything correctly. However, you will not be able to apply effects like transitions, advanced shadows or degraded in backgrounds, since they are some of the properties that were incorporated in the version 3 of CSS.

Basic syntax in CSS

sintaxis-basic-css

To know how to design a web, it is necessary to know the structure in CSS, which is always the same and is made up of three well differentiated elements: selector, property and value. With the selector we indicate what elements in our HTML are going to be objects of these styles. And with the property and the value we establish these changes in pair form, for example colour: red or text size: 16px. Always property: value.

h1 { color: green; font-size: 18px; }

We can write styles on a single line or in a more structured way, to make it easier to read.

h1 {
color: green;
font-size: 18px;
}

It is important to know that each rule in CSS starts with one or several selectors and the values always fall between two braces, one for opening and one for closing. For properties and values we always use a colon to assign a value to the property, and a semicolon between each declaration.

These punctuation rules are important because an error in them can cause the rest of the rules that come next in the style sheet not to be interpreted by the browser.

Types of selectors in CSS

It is one of the most important points in CSS, so every designer should know about it. In addition, not all selector types have the same importance for the browser, so if we do not know how to correctly use the order of importance of each, the browser could apply incorrect styles inherited from another selector, which we do not want to happen in Our design.

type-selector-css

There are several types of selectors but the most common are identifier (id), class and HTML elements. Each of them, as we have discussed, has an order of importance, being from major to minor:

• Identifier (id)
• Class
• HTMLelements

In addition, these selectors can be grouped and combined to get more specific selectors and therefore with more weight when applying styles. Let’s look at each one of them.

Identifiers as selector in CSS

The id or identifier is the selector that has greater weight and whenever we use it to define a property, it will be applied above the class or element of equal level. Note that identifiers are by definition unique elements that are not repeated in HTML, so we will only be applying that style to a single element.

Assuming we have the following HTML:

<h1 id="heading" class="alert">Título del artículo</h1>

The identifier of the element will be #heading. We will always use the symbol hash in front of the identifier name.

#heading {
color: green;
}

Classes as CSS selectors

selector-css

The classes are very flexible CSS selectors. They can be repeated;therefore, we can apply a same style to several elements in the HTML simply repeating the assignment of that class. The classes are preceded by a point in front of it. Taking the same HTML as before; we will assign a colour to the class.

.alert {
color: red;
}

HTML elements as selectors in CSS

HTML elements can also be used as selectors in CSS. However,it is the least recommended, as if HTML changes in the future, some styles already defined in CSS can be applied to new ones, not having the freedom to edit HTML freely. HTML selectors are used without any external element, simply in the name of the element. We will define the yellow colour to our h1:

h1 {
color: yellow;
}

Advanced CSS Selectors

In addition to identifiers, classes and elements, there are advanced CSS selectors such as attributes [attr=value], where the attribute name is searched for having to match the value specified in the HTML.

They are also interesting to know the pseudo-selectors, where we can specify the first or last element of a group or even the first letter of an element. For example :first-child o :first-letter

Syntax error in CSS

One of the most important parts when starting to work on web design with CSS is to know the correct nomenclatures of classes and identifiers, so as not to have problems between browsers. Therefore, we should never start naming classes with numbers or use capital letters. You can find more recommendations to write a better CSS in this article.

Next steps with CSS and recommended readings

Now you have to try and experiment with CSS to familiarize yourself with the syntax, selectors and properties. The most important thing is to have a good code editor to help us and highlight the code when it is misspelled. Along with this, the inspector of your browseris a great help.

For more advanced users who want to experiment to build a web project with a view to a future, CSS frameworks are also a great help and a good starting point for not starting any project from 0. Likewise, as you will know, it is necessary that all Web interface suits both mobile devices, tablets and desktops with responsive web design. For this CSS mediaqueriesplay a fundamental role; you can read more about thishere.

I hope it has helped you. Now you know how a web works and what CSS is!

About 

Hi! My name is Ricardo Prieto and I work (and write) about web design, layout and user experience at SiloCreativo, where we help people to develop their projects with tutorials, tips and resources.

Leave a Reply

Your email address will not be published. Required fields are marked *