Introduction to HTML and CSS

Jhon F. Martínez

Published Feb 08/2021 11:25 am

Introduction to HTML and CSS

The internet is fulfilled with an endless list of websites, some basic ones that only show information and others so complex which are a complex suite of utilities and tools.
Regardless of its complexity, all of them must pass through a web browser, and the different languages involved.
On the one hand, is HTML that is the base of the websites, this determines the structure of the different components that it can have. Using the following analogies you can better understand it: 
  • The foundations of a building.
  • A vehicle chassis.
  • The human skeleton.

Then appears CSS, which takes the HTML structure and based on some properties and values molds the visual part.
Being consistent with the analogies mentioned above in HTML, they would be:
  • The finishes and furniture of a building.
  • The shape, color, and finishes of both the body and the interior of the vehicle. 
  • The skin, hair, shapes, colors, and features of the human body. 

Let's make a practical example to understand this. 

Starting with HTML

We have the following website:
(Very basic website, viewed from Google Chrome)
And has the following HTML code:
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My website</title>
</head>
<body>
    <h1>I'm the biggest heading</h1>
    <h6>I'm the smallest heading</h6>
    <p>
        I'm a paragraph <br>
        that has <br>
        many lines.
    </p>
    <img src="bildu.png">
    <button>I'm a button</button>
    <a href="https://bildu.company/es">Go to Bildu website</a>
</body>
</html>
How do you read this code? Here are some peculiarities:
  • All the tags are enclosed between single angle quotation marks:
    •  <body>
    •  <button>

  • The mark name refers to a word that minimally describes their behavior: 
    • <button> shows a button.
    • <h1> shows a heading, it has 6 different sizes with 1 being the largest and 6 the smallest. (heading-1) 
    • <p> shows a paragraph. (paragraph)
    • <a> shows a hyperlink. (anchor)

  • Almost all marks have a start and end, and this is determined by a / sign before the name and after the quotation mark:
    •  <div> ----  </div>
    •  <p> ------ </p> 

  •  The <HTML> content have 2 key tags:
    • <head> Has browser-directed content,  here we got the metadata and website configurations.
    • <body> have the visible content of the website.

  • The 4th line <title>My website</title> doesn't display with the rest of the content, this is due to <title> are inside of the <head> tag, and this specifies the title to the web browser and is shown as follows. 
(Site title in a web browser tab)
  • <img> y <br> belongs to the small group of tags that don't close. HTML past versions you can see the close symbol / after the name and before the quotation mark  (<br />, <img />) but is not necessary.

  • Some tags got parameters: 
    • <img> have the src(source) param that receive the image URL.
    •  <a> have the href (hyperlink reference) param, which receives the URL that the link will take us to. 

  • The 3rd code line <meta charset="UTF-8"> is necessary if we are going to use special characters like "ñ" or accents.

Now some of CSS

Are files that define the properties of the visual elements of the website.
To make this looks according to what we want, just the HTML tags are not enough, we must define the layout, colors, sizes, and fonts that the elements will have.
 
The web browser got some default styles like buttons or the spacing of some elements like paragraphs or headings, but we can modify this thanks to CSS
 
Now we got the following button:
(Default button)
And his code is:
<button>I'm a button</button>
Let's apply some styles:
button {
    background-color: #2C264B;
    padding: 10px 5px;
    margin: 5px;
    border-radius: 5px;
    border: none;
    color: white;
}
The result will be the following:
(Styled button)
So, how does this work?
The first line of our file is the "button" selector, followed by a curly bracket that indicates the beginning of the block, in this, each line has a property followed by a colon and the value of the property, and a semicolon that indicates the end of the line.
 
Each style block basically consists of a selector and properties with values.
 
Selectors
In this case, we are using the “button” tag name selector.
And it affects all elements that use that name, so whenever we call <button> tag in our HTML file, the styles will be applied. 
 
But what if I only want to modify one button and not all? Or if I want to have more variants of the button.
In this case, we have another type of selector. To explain it better we are going to use more buttons. 
Now we have 5 buttons:
<button>I'm a normal button</button>
<button class="big">I'm a big button</button>
<button class="grey">I'm a grey button</button>
<button class="big grey">I'm a big grey button</button>
<button id="different">I'm unique and different button</button>
If we look at the 2nd and 3rd buttons, they got a parameter called class, and a value in quotes (2nd: big, 3rd: grey).
We can mix class values if we separate them with spaces, that's why the 4th button class value is "big grey".
At the moment our styles file has not changed, so our buttons look the same:
(5 Buttons with base style)
Following our code, we going to use some class selectors, just add a dot after the class name  (without spaces .class)
button {
    background-color: #2C264B;  
    padding: 10px 5px;  
    border-radius: 5px;  
    border: none;  
    color: white;
}

.big {  
    padding: 20px 10px;
}

.grey {  
    background-color: grey;
}
Now our buttons look like this:
(4 Buttons with class styles)
Don't forget the last button, instead of class, it has an id.
This is an identifier and got a rule, the HTML document should have only one value of that id and this value must be unique for the rest of the document.
 
Now we are going to apply some styles to our 5th button, in this case instead of a dot, we will use an anchor.
#different {
    background-color: white;
    padding: 12px 8px;  
    color: #2C264B;  
    border: 1px solid #2C264B;
}
And the result with all styled buttons is:
 
(5 Styled buttons)
 
It should be noted that all buttons inherit properties from the button selector since they all use that tag(button), and unless we overwrite a property it will keep it, so the gray button has the same dimensions as the normal one, and all buttons have the same round edges.
 
Properties
The names of the properties make direct reference to what they modify (in case of being compound words, they are written separated by hyphens). For example, the second line of our code: "background-color" will modify the background color of the element.
Some properties have shorthands, as is the case of the fifth line: "border", which can receive several values, in this case, it receives the thickness, appearance, and color in a single line. Actually there are 3 properties in one ("border-width", "border-style" and "border-color").
 
Values
Depending on the properties are the values that are applied to them. There are colors, units of length, of time, values with proper names, and more. 
 
Colors
If we read the value of the following line:
background-color: #2C264B;
We will see a code that represents the color of our background.
But what about that code?
On the web, colors are represented by different notations, which are mostly based on the mixture of intensities of colors: red, green, and blue. Some of the most used are: 
 
  • RGB (Red Green Blue)
    It is formed with the RGB() notation making direct reference to the intensity of the red, green and blue colors defined by numbers ranging from 0 to 255 separated by commas, in this order of ideas if we wanted the most intense red color we would use rgb(255.0.0) 
  • Hexadecimal
    It uses the # symbol followed by 3 or 6 numbers from the hexadecimal system (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) that indicate the intensities of red, green and blue if there are 3 he takes them in that order if there are 6 he takes them in pairs. In this case, if we wanted the most intense red we could write #FF0000 or # F00
  • HSL (Hue, Saturation, Lightness / Matiz, Saturación, Luminosidad)
    Unlike the previous 2 that use a mixture of red, green, and blue, this one uses a base color and changes its saturation and lightness in percentages, in this way if we wanted the same red as the previous 2 we would use: hsl(0, 100%, 50%) 
  • Own names:
    There is a great variety of colors that can be used with their name, if we look at the 6th line of the file we have "color: white;" referring to the white color.
    To assign the color red, it would just be to write: red



In practice, anyone can be used, the important thing is the comfort of the programmer or the work team. 
 
Lengths
The 3rd line of our code is “padding”, it is a shortcut that receives from 1 to 4 values in a unit of length and determines the padding size of our element.
 
We can use exact values such as pixels, inches, or centimeters or relative values such as percentages and scaling of some base values. 
 

How do you combine HTML with CSS?

There are 3 ways to style an element in HTML:
  • Inline: We will apply the properties and values directly on the HTML element with the style property separated by semicolons:

<button style="background-color: #0f0; color: #fff">   Success button </button>

  • Embedded: The styles will go inside a style tag in the head of the document: 

<html>  
<head>    
    <title>My website</title>
    <meta charset="UTF-8">
    <style>
        .success-button {
            background-color: #0f0;
            color: #fff;      
        }   
    </style>
</head>  
<body>    
    <button class="success-button">
      Success button    
    </button>  
</body>
</html>

  • External: The file will be separate from our HTML, in a .css format file.
    Inside of the head tag, we must use the link tag with the rel property and stylesheet value, and the path to the css file will be the value of the href property. 

site.html

<html>  
<head>    
    <title>My website</title>    
    <meta charset="UTF-8">    
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>    
    <button class="success-button">      
        Success button    
    </button>  
</body>

</html>

styles.css

.success-button {  
    background-color: #0f0;  
    color: #fff;
}

With this, we can have an idea of what it is to code HTML and CSS.
Today there are endless tools that omit to have to use code (such as content managers, or dynamic site builders), but in the long run, they are nothing more than layers that in the end are transformed into HTML and CSS (and JS for some more complex ones). 
 
Useful links


Interests

IaaS, PaaS, SaaS. Which to choose?

When we talk about the cloud, we mainly talk about Infrastructure, Platforms and Software, which are "everything" of what we access and use daily from our phones, computers or anything that connects to the Internet.
Read more