DEV Community

Cover image for Quick CSS Course
Walter Nascimento
Walter Nascimento

Posted on

Quick CSS Course

#css #course #quick #tutorial

[Clique aqui para ler em português]

Which is?

The CSS, or cascading style sheet, is nothing more than a language that allows styling the HTML elements of our pages. Virtually all of the visual elements on our page are edited using CSS. With it we can manipulate, positions, cores, fonts, and many other resources.

History

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

As the sites had different fonts, colors 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.

Tools

Browsers:

Editor:

Online Tools:

Syntax

To write CSS, first we have the selector, which can be the html element, class or id, after the selector is followed by the declaration inside the braces {}, inside the braces we add the property and the value, like the example below:

Select Example

Using CSS

CSS can be used in 3 ways, inline, external or internal.

Inline CSS

This form is the least recommended, but often necessary. Just use the style attribute in the HTML element as in the example below:

<p style="color: red;">Meu texto rosa</p>
Enter fullscreen mode Exit fullscreen mode

Internal CSS

Just declare the <style> tag in the head and thus apply all the desired styles, as in the example below:

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: red;
                text-align: center;
             }
        </style>
    </head>
    <body>
        <p>Este parágrafo serão estilizados com css</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

External CSS

Generally, most pages opt for this style of work. That way, just create a file with a .css extension and use the link at the head of the page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>
    <body>
        <p>Este parágrafo serão estilizados com css</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
p {
    color: red;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Selectors

CSS selectors are used to “find” (or select) the HTML elements you want to style.

Default Meaning
* Universal selector: any element
e Element type selector: select any element
e f Contextual selector: selects any element that is contained in an element
e> f Child element selector: select any element descending directly from an element
e + f Adjacent selector: selects the element immediately after an element
e.class Class selector: selects the element (s) in which the "class" was applied
e#Id ID selector: selects the element identified with Id
e, f Grouping of selectors: Selects the and elements of the grouping
e [attribute] Attribute Selector: selects the element that contains the indicated attribute
e [attributes="value"] Attribute Selector: selects the element with the same attribute and “value”
e [Attr~="value"] Attribute Selector: selects the element where attribute "value" is in a list of values ​​separated by spaces
e [Attr ="val"]
e:first-child Pseudo-class first child: selects the first descendant element of the parent element
a:link Pseudo-class link: applies to the element with hyperlinks or anchors not yet visited
a:visited Pseudo-class visited: applies to the element with hyperlinks or anchors already visited
e:active Pseudo-class active: applies to the element when it is activated by the user
e:hover Pseudo-class hover: applies to the element when the cursor is over it, but without activating it
e:focus Pseudo-class focus: applies to the element when the focus is positioned on it
e:lang(val) Pseudo-class lang: applies to the element if it is marked with the language “val”
e:first-line Pseudo-element first-line: applies to the first line of the element
e:first-letter Pseudo-element first-letter: applies to the first letter of the element
e:before Pseudo-element before: applies content specified before the element
e:after Pseudo-element after: applies specified content after the element

Comments

Comments are used to explain the code and can help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element and starts with /* and ends with */:

/* This is a comment */
p { color: red; }
Enter fullscreen mode Exit fullscreen mode

Specificity

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which is the most specific.

The universal selector (*) has low specificity, while the ID selectors are highly specific!

Specificity hierarchy

Each selector has its place in the specificity hierarchy. There are four categories that define the level of specificity of a selector:

  • Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style = “color: #ffffff;”>.
  • IDs - an ID is a unique identifier for elements on the page, such as #navbar.
  • Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes, such as :hover, :focus etc.
  • Elements and pseudo elements - This category includes names of elements and pseudo elements, such as h1, div, :before and :after. 
/* This rule is more specific, therefore it is applied */
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Enter fullscreen mode Exit fullscreen mode

Equal specificity

Equal specificity: the most recent rule counts - If the same rule for writing twice in the external style sheet, then the lower rule in the style sheet is closer to the element being styled and therefore will be applied:

/* Being on top, this is ignored */
h1 {background-color: yellow;} 
/* As it is below, it is applied */
h1 {background-color: red;}
Enter fullscreen mode Exit fullscreen mode

Properties

CSS has several properties, some of which will be listed here

Charset

The @charset rule specifies the character encoding used in the style sheet, the @charset rule must be the first element in the style sheet and must not be preceded by any characters. If multiple @charset rules are defined, only the first one will be used.

@charset "UTF-8";
Enter fullscreen mode Exit fullscreen mode

Colors

To work with colors in CSS, we can use the color names in English (red, green, blue, etc.), and we can also use them in RGB, HEX, HSL, RGBA, HSLA.

color: red;
color: #00FFFF;
color: rgba(255,0,0,0.3);
...
Enter fullscreen mode Exit fullscreen mode

Units

Another very important value is the units, CSS has several different units to express a length.

Type Description
cm Centimeters
mm Millimeters
in inches (1 in = 96px = 2.54 cm)
px pixels (1px = 1 / 96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
em Regarding the font size of the element (2em means 2 times the current font size)
ex Relative to the height x of the current font (rarely used)
ch Regarding the width of "0" (zero)
rem Regarding the font size of the root element
vw Regarding 1% of the viewing window width *
vh In relation to 1% of the viewing window height *
vmin In relation to 1% of the smaller dimension of the viewing window *
vmax Regarding 1% of the largest dimension of the viewing window *
% Relative to parent element

CSS Variables

CSS has a feature that allows us to create variables within CSS, thus writing less and making maintenance easier;

:root {
    --main-color: red;
    --main-border: 2px solid blue;
    --main-color-text: rgb(125, 255, 0);
}
div {
    border: var( --main-border );
    color: var ( --main-color-text);
    background-color: var(--main-color);
}
Enter fullscreen mode Exit fullscreen mode

Most common CSS properties

There are several properties in CSS, but the most common are the properties below:

  • font-family: 'Open Sans',sans-serif;
  • margin: 0;
  • padding: 0;
  • color: #fcfdff;
  • background-color: blue;
  • text-align: center;
  • border: 0.5px solid #c8c8c8;
  • border-radius: 5px;

For more in-depth research visit the website
https://developer.mozilla.org/pt-BR/docs/Web/CSS

Importing CSS

Import is widely used when we want to import a font directly into CSS, example:

@import url(“https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
Enter fullscreen mode Exit fullscreen mode

But it can also be used to insert a CSS file, example:

@import “menu.css”;
Enter fullscreen mode Exit fullscreen mode

Validator

Always check that your CSS code is valid.

https://jigsaw.w3.org/css-validator/

CSS remover

If you have a very large CSS, it is always good to check that everything is actually being used.

https://unused-css.com/

Coding Standard

Every language leaves a range of possibilities to work with it, CSS is no different.

To make writing more compatible, the ideal is to have a coding standard.

Documentation

Every language has documentation and CSS would be no different, a tool I really like to read documentation is DevDocs.

if you need any tips faster use devhints

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊

Oldest comments (0)

Read next

inuwa221 profile image

Favourite Snack

Inuwa Nura -

rebeccapeltz profile image

Form Processing

Rebeccca Peltz -

afif profile image

The Frontend Challenge: 🍩 Donut eat my favorite snack!

Temani Afif -

ethernmyth profile image

Jelly Bean CSS Art

Ethern Myth -