Resume of the last session

The past week, we talk about the history of the HTML. We introduce the HTML and highlight we will use the fifty version. Also we introduce the syntax of a html file.

Skeleton of a html file

<!-- index.html -->
  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>

    </body>
  </html>

The above code includes a new tag. The meta tag. This tag allows to include some metadata additional. In this case, the charset encoding. If you need more info about this tag, you can consult the w3school documentation.

Introduction to CSS3

History

  • CSS (Cascading Style Sheets)
  • In 1994 Hakon Wium Lie proposed the first approximation of the CSS.
  • At the same time, research of the CERN was trying different ways to create styles into the web.
  • In 1996, W3C started recommending the first version about CSS, CSS1. Today it is the standard. Now we use CSS3.

Functionalities

  • Developers use CSS to give style and identity to web pages. These allow web pages to be different between each one and improve the user experience.
  • We can define styles for many different markup languages as XML, SVG, and HTML.
  • It is a rule-based language. We define rules and apply them to a set of elements using selectors

Syntax

To import a CSS file we should use the link tag, which asks for the file and provides it to the browser to render the content 

<!-- index.html -->
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>My first page </title>
    <!-- load the css style -->
    <link rel="style/sheet" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

The above code contains 2 important things. Look at the link tag. It is open, but never closed. Some tag doesn’t need a close tag. Also, we introduce the meta viewport tag. This tag tells to the browser that the page should be render according at the device size.

Important the css file must be inside a folder with all the css. I like to use css as name of the folder. But also you can use style or any other name which make obviously the content of the folder. 

/* main.css */
selector {
    property: value;
}

The selectors can start with # to refer to an ID attribute. If it starts with a ., the selector looks for a class attribute. And if the selector starts with a tag, this group applies to all tags that are referenced.

Next: display float