CSS: The Ultimate Beginner’s Guide

What is CSS?

CSS is called the Cascading Style Sheet language and is used to style elements written in a markup language such as HTML. CSS separates the content from the visual representation of the website. Think about decorating your page. Using CSS it is possible to change the text and background color, font and spacing between paragraphs. You can also create tables, use layout variations, adjust images for their respective screens, and so on.

CSS was developed by the W3C (World Wide Web Consortium) in 1996, for a very simple reason. HTML was not designed to have tags that would help to format the page. You should just write the markup for the website.

Tags like <ipto were introduced in version 3.2 of HTML and caused a lot of problems for developers. As the sites had different fonts, colours and styles, it was a long, painful and expensive process to rewrite the code. Thus, CSS was created by the W3C to solve this problem.

The relationship between HTML and CSS is very strong. Since HTML is a markup language (the foundation of a website) and CSS is focused on style (the whole aesthetic of a website), they go together.

CSS is not technically a necessity, but you probably would not want to look at a website that uses only HTML, as that would seem completely abandoned.

Advantages of CSS

The difference between a website that implements CSS and one that does not use it is huge and remarkable.

You may have seen a site that doesn’t load completely or has a white background with blue and black text. This means that the CSS part of the website has not been loaded correctly or does not exist.

And this is what an HTML-only site looks like. I believe you will agree with me that this is not very beautiful, right?

Before using CSS, all styling had to be included in the HTML markup. This means that you should separately describe the entire background, font colours, alignments, etc.

But CSS allows you to style everything in a different file, thus creating the style separately. And, later, integrate the CSS file at the top of the HTML markup. This keeps the HTML markup clean and easy to maintain.

In short, with CSS you no longer need to repeatedly write what the individual elements look like. This saves time, shortens the code and reduces the chance of errors.

CSS allows you to have multiple styles on an HTML page, making the customization possibilities almost endless. Nowadays, this is becoming more of a necessity than a simple resource.

How CSS Works
CSS is a very powerful tool that makes it possible to create several functionalities instead of using JavaScript or another heavier language. If used sparingly, CSS can provide a great experience for developers and web page users.

With Cascading Style Sheets it is possible to create complex animations, create effects using parallax, which makes it seem that the background image has different depth from one another, create interactive websites and also games with HTML5 and CSS3.

 

See other amazing works on this site and get inspired.

CSS uses a simple English-based syntax with a set of rules that govern it. As we mentioned earlier, HTML was never intended to use style elements, just the page markup. It was created to describe only the content. For example: <p> This is a paragraph. </p>.

But how do you style the paragraph? The structure of the CSS syntax is quite simple. It has a selector and a declaration block. You select an element and then state what you want to do with it. Simple enough, right?

But there are some rules that you need to know. This is also simple, don’t worry.

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon and the declaration blocks are surrounded by curly braces.

Let’s see an example:

All <p> elements will be styled and colored in blue and bold.

<style>
P {
color: blue;
text-weight: bold;
}
<style>
In another example, all <p> elements will be centered, 16x in size and pink.

<style>
P {
text-align: center;
font-size: 16px;
color: pink;
}
</style>

Anatomy of a CSS command

CSS stipulates rules for the html file. With each rule it is possible to style the entire content or only certain elements. So understand, a basic command is composed of selector and declarations, which contains property and value.

SELECTOR {PROPERTY: VALUE}

The CSS syntax is very simple to learn. The selector selects which elements in html will receive the property. It can be p (paragraph) or body (body of your page). The property can be the color or something more specific as the background color. And finally, the value, which determines the value of the property.

Let’s simulate an example. Let’s say the goal is to change the source of an h1 tag. For this we can use h1 {font-size: 20px;}

  • h1 – is the selector. In this case we select h1.
  • font-size – is the declaration that contains the property (font-size) and the value is (20px).

List of basic CSS commands

There are so many options between selectors, properties and values ​​that it can be very difficult for a developer to remember them all just relying on memory. So we decided to create a Basic CSS Command List (CSS3 Included) that will help you who are learning about what CSS is.

This document has been strategically structured and divided into sections to make it easier to read. Download the List of CSS Commands in PDF by clicking here and deepen your knowledge of what CSS is.

Internal, External and Inline CSS Styles

We will analyze each style quickly! For a detailed explanation, visit the link that we will provide below.

Let’s start with the internal style. CSS styles made in this way are loaded each time a website is updated, which can increase the loading time. In addition, you will not be able to use the same CSS style on multiple pages, as it is contained on a single page. But the advantage of this is that having everything on one page makes it easy to share the model for viewing.

The external method may be the most convenient. Everything is done externally in a .css file. This means that you can do all the style in a separate file and apply CSS to any desired page. The external style can also improve the loading time.

Finally, there is also the Inline CSS style. Inline works with specific elements that have the <style> tag. Each component must be styled, so it may not be the best or the fastest to handle CSS. But it can be useful, for example, to change a single element, quickly view the changes or if you don’t have access to the CSS files.

For more information on the different styles of CSS, see the full article here.

How to Create a Style Sheet

To create a style sheet is very simple. Just open your code editor, like Sublime, and create a new document.

Once created, save as style.css, even without having written anything (this .css is what defines a file to be recognized by the browser as the style sheet).

How to create a CSS style sheet

Once saved, the text editor will be able to read the file more easily, even with suggestions for auto-complete while typing the style sheet codes, as shown in the print below:

How to integrate CSS in HTML?

After saving as style.css we need to put the file in our HTML file because it is he who will load the CSS, CSS alone does not make a website! And it is with reference tags that you tell the HTML that there is a style file for it, see:

<link rel = ”stylesheet” type = ”text / css” href = ”style.css”>

This tag will tell the HTML that it has a CSS file to be added to the page. This should be added inside the <head> </head> tag of your HTML, as you can see in that print below.

How to Embed CSS in Html

Now open the .css-style document with Sublime, which is probably in the same folder as our HTML.

Embedding CSS in HTML

From this last image, we will understand how CSS works with three basic parameters:

Basic CSS Elements

The elements are HTML tags, #id and .class.

1. HTML tags

  • body
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • span
  • P

2. CSS classes

Creating and using a CSS class is simple. In the CSS document, just put .name-of-the-class-that you want. Below we created the title class:

Creating classes in CSS

Note that there is a period (.) Before the class name. This makes the CSS understand that a class is being created to be used in HTML.

To add this class that we created inside the CSS, just in the HTML tag it has the parameter class = ””.

Note: inside the quotation marks, you don’t need to use the period (.) Before the class because the name class in HTML already warns the CSS that it is for it to search for the class name with “.”

Creating a title class in CSS

Remembering that an HTML tag, like h1 or any other, can have more than one class, just separate them with space as shown in the example below:

<h1 class = ”source-large title underlined”> Best website </h1>

In this tag, three classes were used: “title”, “big font” and “underline”.

But for all of these classes to take effect, you need to create them in CSS. See how we created these classes:

Creating several classes in HTML

When we open our HTML the title should look like this: Example of using CSS

3- Creating CSS IDs:
The use of ID’s in CSS is similar to classes, but the main differences are that id’s are identified with # and only one id can be used per HTML tag. To add an ID to HTML, add as parameter id = ””.

Note that when we use HTML, we also exclude the # from the id in the same way that we exclude the. from class.

CSS3

Although launched in 2010, CSS3 is the latest version of the Cascading Style Sheet and has come to add in an improved way from previous versions.

The best news is in relation to the flexibility in creating layouts, bringing more autonomy for web designers and also developers, who in a way are linked to the look of the site.

With CSS3, it is possible to create rounded corners, shadows, gradient effects, animations and transition effects, among other options.

Some examples:

@keyframes example {
0% {background-color: red;} / * the animation starts red * /
50% {background-color: yellow;} / * the animation comes in half in yellow * /
100% {background-color: red;} / * the animation ends red again * /

}
div {
width: 100px; / * element width * /
height: 100px; / * element height * /
background-color: red; / * element’s initial color * /
animation-name: example; / * here comes the name of the animation * /
animation-duration: 4s; / * duration time from start to finish * /
animation-iteration-count: infinite;
}
And in the html just put the <div> </div> tag and the animation will start as soon as the content style of the site is loaded.

If you still need to know more about HTML, we recommend that you read our Complete Guide, which also includes a list of basic HTML commands.

 

About Sergio

This is Sergio 👋. Writing in my spare time about geeky stuff 👨‍💻. Trying to keep up with the ever-evolving world of home tech, will it be gaming, computer hardware or home cinema set up 📀. Then writing about it here. I hope you're enjoying your stay 😀.

Leave a Comment