What is CSS? Learn about CSS with this Basic Guide

How to install Putty
How to Add Push Notifications in WordPress (4 Steps)

Surely you are in your first steps as a web developer and come here to know what is CSS, right?

CSS is the acronym for the English term Cascading Style Sheets , which translated into Portuguese means Style Sheets Falls. CSS is easy to learn and understand and is easily used with HTML markup languages or XHTML. But what really mean? What is CSS beyond acronym?

Get ready for this Complete Guide where you will know what is CSS, the main features and what you can do with CSS in developing a website.

What is CSS?

CSS is a style sheet language which has the role to make a presentable web page, directly related to the design and appearance. That is, the CSS is a layer that is used to control the style of your web page.

To understand what is CSS think of the decor of your page. Using CSS you can change the text and background color, font, spacing between paragraphs, create tables, use variations of layouts, adjust images to their respective screens and so on. We can say that all the visual part of your page will be set to the CSS.

The CSS illustrates how the HTML elements of a website should be presented on the screens. In a direct way, it is the CSS that determines the look of your site. Since the font size to the background image, it can be changed with CSS.

Why cascade? The term occurs because of the method of use. You can use multiple CSS documents to be composed of the look of the page, each with a different rule.

HTML & CSS

To sum up, let’s make an analogy for you to understand why we talk about HTML in an article about what is CSS. Imagine building a house.

In your home, HTML is responsible for the structure. Define how many rooms, number of rooms and garage. This happens header, title and paragraphs of text. To serve this markup languages and you can learn more about HTML in this article .

Once ready, you will surely want to decorate your home. At this time you need the CSS. It is the CSS who will determine the colors of the walls, which style of decoration, the carpets and curtains. Hence, it means the decor of your page: font color, number of rows and columns, font style, layout, shadow effects buttons, animations elements and even depth. For this serves the layer style language.

And last, but we will not delve into this text, enters the automated part of your home. Facilities facilitators as heater, air conditioning, automatic music system or buzzer, that that’s what serves the programming language, such as JavaScript, JSON, Ruby on Rails, for example.

How Did?

The history of CSS began in 1994 when H Akon Wium was faced with a situation where, to publish a web page there was no possibility of creating a layout similar to a paper journal. And so it was created the style sheet language, to style pages.

Before you know what is CSS, when Tim Berners-Lee created HTML, hoped it would come to pass, but did not publish the syntax of the style sheet, which has become a problem for each browser to have to decide how to present the pages for users.

There was a charge by the web of writers about the lack of control the appearance of your pages, with a tone of hostility between them, as we can see in this email programmer Marc Adreessen.

H Akon, with the help of Bert Bos, published the first draft of a style sheet in layers and the original is still available online .

CSS Features

CSS is very well received by current browsers. It becomes relatively easy to learn and create a more efficient and code clean that applies in all your HTML pages.

Who uses CSS is able to style your page in the same way that programmers modulate code software. This makes CSS a new standard in creating web pages. Browsers use the CSS commands to change the way a document is presented.

Benefits and Advantages of CSS

We highlight that the main benefits of CSS to build pages are:

  • More code clean the HTML , which needs to meet and monitor the internet, presenting solutions through new tags, thus polluting the background of sites.
  • Ease of maintenance and update throughout the document with only one command sheet, which is also gaining work time.
  • Separation Style Sheet and marking sheet , which allows writers and developers to work simultaneously and independently, eliminating the need to create and apply the layout for each new page created.
  • Greater possibility of formatting including control spacing, alignment and positioning on the page; autonomy in the size of fonts, colors and styles of the texts; and allows the automatic generation of ordered lists and unordered, markings and tables.
  • Flexibility regarding the size and positioning of the elements that make up a page. With CSS you can request the browser which pixel put this or that image, or the height and width that it should display. The same applies to the content.
  • Allows separately format the site’s content to be displayed on the screen or to print.
  • Increase the speed of loading pages by browsers. The page download capacity improves because it uses less code and the separation of content and layout.

While no one can say, adding all these advantages, there is very strong evidence for the impact of CSS in the page ranking on the search engines, that is, the CSS can directly influence on SEO.

So many benefits make it an indispensable tool CSS by the developers when programming a site.

CSS limitations

The CSS has some limits. It is worth quoting some of them cause more impact on the construction of a page:

  • Not all browsers support all the specifications of style sheets.
  • You can not read a file using CSS.
  • Does not interact with Database.
  • You can not request a web page.
  • Depending on the level of sophistication requires validation tests.
  • It works differently according to each browser and even each browser can create your own style sheet.

CSS functions on a website

What you can do with CSS?

CSS is a very powerful tool that enables you to create several functions instead of using JavaScript or other heavier language. If used sparingly, CSS can enable a great experience to the developer and users of web pages.

With Cascading Style Sheets you can create complex animations, create effects with use of parallax , which makes it look like the background image has a different depth of the others, creating interactive websites and also games with HTML5 and CSS3.

See other amazing work on this site and be inspired.

Learning the Basics

Now that you have the basics of the meaning of the term CSS and what can be done with this tool, go to the next step.

Using CSS

The CSS will keep the information in a separate style document that will be displayed. See an example of a CSS file.

Imagine that your site has the all-black background, the background, and the content is written in white, to cause the highlight. Instead of creating several tags in html to determine that the content is blank, <white>, you can apply automatically in all pages with CSS use.

As in the example below, the first frame refers to the CSS and the second is the HTML, as with .bloco-dark class.

Adding CSS in HTML

CSS works with the personalization system of three elements styles:

  • Tag (customization of tags .html as the body, div, li, ul, ol and table).
  • #id (adds an ID tag html by making a customization).
  • .classes (you can add more than one class per tag html).

And so, your formatting will be gathered in one document without the need to structure page by page, just add the class. See the result.

Example of customization using CSS

And how did this happen? The browser loads the file in both .html when the .css thus grouping the content and page style.

Anatomy of a CSS command

The CSS provides rules for the html file. With each rule can stylize all content or only certain elements. So you see, a basic command is composed of selector and statements, which contains proprietary and value.

SELECTOR {property: value}

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

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

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

basic commands list CSS

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

In this list you will find thirteen pages of statements with possible properties. This document has been strategically structured and divided into sections for easier reading.

You can download the CSS Command List in PDF by clicking here and find out more about what CSS.

Style Sheets differences

In CSS there are three different ways to add style to your website pages. They are: internal, external and inline.

Basically the settings are:

  • Internal: the code is placed in the section <head> of a given page.
  • External: the code is linking it to a file .css external. Thus, any changes made to an external CSS file will be reflected on your site globally.
  • Inline: the code is used for a specific HTML tag.

To become more familiar with these ways, check out this tutorial with the differences between the CSS styles . It is worth reading especially to understand why inline is not so recommended to build your site, in addition to the advantages and disadvantages of all of them.

Creating 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 estilo.css, even without yet writing anything (.css this 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 auto complete as you type the style sheet code, as shown in the print below:

How to integrate CSS in HTML?

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

<Link rel = “stylesheet” type = “text / css” href = “estilo.css”>

This tag will indicate the HTML that has a CSS file to be added to the page. This must be added inside the tag <head> </ head> of your HTML as you can see in this print:

Embedding CSS in HTML

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

Incorporating CSS in HTML

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

CSS Basic Elements

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

1 – Tags html

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

2- CSS classes:

Create and use a CSS class is simple. CSS document just put .name-of-class-who-want. Below we create the class title:

Creating classes in CSS

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

To add this class we created in the CSS, just as in tag HTML has the parameter class = “”.

Note: inside the quotation marks do not need to use the period before the class because the name (.) Class in HTML already warns the CSS that is for him to get the class name with “.”

Creating title class in CSS

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

<H1 class = “title font-large underlined”> Best site </ h1>

This tag was used three classes: “title”, “major source” and “underline”.

But for all these classes have épreciso effect create them in CSS. See how to create these classes:

Creating different classes in html

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

3- Creating CSS’s Id:

The use of Id’s in CSS is similar to classes, but the main differences are that the id’s are identified with # and can only be used by an id tag html. To add an id to HTML, add as id = “” parameter.

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

Creating ID in CSS

Thus the button should look like this:

creating button with CSS

Tip: This parameter’s ID is not the most suitable for using on a page for many buttons as it can cause conflicts with the JavaScript programming language, you normally use the ID’s in HTML to perform more complex actions.

Adding CSS in HTML without the <link> tag?

There are two other ways to add CSS in HTML, although not recommended due to a standard adopted worldwide, it is our duty to show you how to do.

1 Add CSS in HTML without using external file

You can add CSS putting style within the HTML itself, without using an external CSS file as shown in the example below:

Adding CSS in HTML without the tag link

In this example, the style is within the same HTML using the tag <style> inside the tag <head>. This makes everything is centralized in a single document.

And why is not recommended? When there are many style lines this can cause a delay when opening the page as the browser reads your top-down document, line by line. So if you have many style lines to read, it will take longer for the content of the page is shown.

So the ideal is to use the <link> tag so that, instead of reading a lot of style lines, the browser only read a reference to another file and so cause your content to load faster.

2 Add CSS in HTML using the style parameter

You can add CSS in HTML using the style parameter in a specific HTML tag. But this will only affect that tag and not all other tags with the same name, then instead of using the parameters id = “” or  class = “” will use the parameter style = “” :

<H1 style = “font-size: 3rem; color: # 333; text-align: center;”>

See how it looks:

Adding css in html with Style parameter

And why is not recommended? This type of styles use becomes a problem if other elements have the same characteristics of its title, for example. With this, you would have to copy the entire parameter style of tag h1.

Before that, we also conclude that the most recommended is the use of classes through an external style file to the CSS. So we can use the styles of cleaner and more quickly and you can reuse these classes in other tags whenever you wish without affecting the page load time.

CSS3

Although launched in 2010, CSS3 is the latest version of Cascading Style Sheet and came to add improved from earlier versions.

The best news is relative flexibility in creating layouts, thus bringing more autonomy for web designers and also developers, who are somehow connected to the look of the site.

With CSS3 can draw rounded corners, shadows, gradients, effects, animations and transition effects, among other options.

Some examples:

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

}
div {
    width: 100px; / * element width * /
    height: 100px; / * height of the element * /
    background-color: red; / * element initial color * /
    animation-name: example: / * Here comes the name of the animation * /
    animation-duration: 4s; / * length of time from the beginning to the end * /
  animation-iteration-count: infinite;
}

And in html just put the <div> </ div> and the animation will begin once the site content is loaded style.

Courses to learn more about what CSS

To go deeper in their knowledge of what is CSS, we recommend Codecademy , an interactive online platform for anyone who wants to learn about programming and markup languages. Other indications are also Codeschool and Udemy .

Conclusion

Ready! You complete the first steps needed to know about what is and understand how CSS can be a great ally when creating and developing a website. Furthermore it is an ever-present tool and with constant improvement, so in addition to learning the basics of what is CSS recommend that you always stay on top of what’s new on the subject of style sheets.

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

And then this article on what is CSS, how about giving a step further and learn how to create a drop – down menu CSS? So keep reading this . And if you have tips and suggestions for this article, leave in the comments. Good development!