How a web page is made: introduction to the CSS code

by fashionsnobber

In the field of web design anyone who plans to create or design a website cannot help but know HTML and CSS codes. However, the knowledge of these two programming languages is also essential for every blogger who wants to manage his own website independently. Although the most common and well-known blogging services already provide an easy and intuitive management, if you have a good basic knowledge everything becomes easier. For this reason, today we address the topic in this small guide to the introduction of CSS code.




How a website is made

As we have seen previously, and more specifically, in the introduction to the HTML code, a website is nothing more than a document of data encoded using programming languages that a browser is able to interpret by referring us to the web page we want to visit. The main programming languages used on websites are:

  • HTML. Basic language of a website. It is used to give structure and semantic meaning to a web page.
    CSS. Going hand in hand with HTML is essential for customizing the graphic and visual appearance of a site and its pages.
  • JavaScript. They allow you to add dynamism and interactions to the contents of a website.
  • PHP. They build on the server that hosts the site the pages that will then be sent to the browser, collecting and saving the information sent by the user.

Today we focus on understanding what CSS does and how it works.

Introduction to CSS code

How a web page is made: introduction to CSS code.

What is CSS code

CSS code (Cascading Style Sheets) is a programming language through which it is possible to manage the entire layout of a website. It is mainly used to define the formatting of documents in HTML, separating their contents and thus allowing much more effective and simple management and maintenance of websites. In short, while the HTML code, with its markup language, creates the foundations of any site by describing and saying how all the elements must be interpreted, the CSS code, with its style sheet, manages the directives concerning the representation stylistic. Basically its main task is to define the design of a website.

Syntax of a CSS style sheet

The structure of a CSS style sheet always has the same syntax according to a sequence of rules that cannot and must never be changed or modified. It comes with a selector followed by a block of declarations (consisting of a property and a value) enclosed in curly brackets like this:

selector {
property-1: value1;
property-2: value2;
}

or

selector 1, selector 2, selector 3 {
property-1: value1;
property-2: value2;
property-3: value3;
}

Specifically, the basic structure of a CSS code is composed of 3 elements:

  • Selector. Identify certain elements of the HTML document referenced by the rule to apply. It can be single or identifying several selectors at a time separated with a comma.
  • Property. Identifies the type of style on which the command will intervene. It is possible to apply more than one to the selector by noting them one below the other separated by a semicolon.
  • Value. Assign the specifications to be applied by number or text.

! The declarations, that is the combinations of property and value, are always separated from each other by a colon.

Main selectors to know

Different types of selector are supported in the CSS code, nevertheless to have a good understanding I think that the main ones to know are the following:

1. Type selector

It corresponds to the name of the element to which it refers and applies the rule to all HTML elements of the same type.

Example of syntax of a type selector applied to title h1:

h1 {
property-1: value1;
property-2: value2;
}

2. Class selector

It is written with a dot in front and has a customizable name as the class is assigned to an HTML element using the class= “class_name” attribute. This selector applies the rule to all elements of the HTML page with that specific class.

Syntax of a class selector:

.class_name {
property-1: value1;
property-2: value2;
}

! In the HTML page source document, the class nomenclature is without the dot in front.

3. Identifier (or ID) selector

It is written with the hashtag symbol in front of it and applies the rule to a single element of the HTML page to which the attribute property id= “name_identifier” has been assigned.

Syntax of an ID selector:

#identifier_name {
property-1: value1;
property-2: value2;
}

! In the HTML page source, the ID nomenclature is without the hash symbol in front.

4. Universal selector

When a rule is to be applied to all the elements of an HTML document, the universal selector is used whose nomenclature has only the symbol of an asterisk in this way:

* {
property-1: value1;
property-2: value2;
}

! Spaces and special characters are not allowed and pay attention to upper and lower case because they lead to different interpretations. In addition, it must be borne in mind that ID selectors have priority of application and code reading over classes while classes have the better of generic selectors.

Most important CSS properties

The CSS code language has numerous properties (fully reported on the official W3C website) thanks to which we are allowed to define all the rules we want for the HTML elements that make up our website. In my experience, anyone who needs to approach CSS to be able to put their hand in their templates by modifying some stylistic details, the main most important properties to know are the following:

  • background. Defines the background of an element. (background-color gives it a color, background-image makes it an image, background-position the position and background-repeat if it needs to be repeated.)
  • border. Apply a border to the component. (border-color to give the border a color, border-radius rounds the edges, border-style to define the type and border-width for the width.)
  • color. To give a color to the element.
  • float. Allows you to arrange other objects on the sides of the component to which it is applied.
  • font-family. Apply font properties to text by defining its font type. (font-size defines the size, font-style for the writing style and font-weight the weight.)
  • margin and padding. They define the space around the elements. Margin for the outer space at the edges and padding for the inner one.
  • position. It is used to define the positioning of an element.
  • text-align. The alignment of the components.
  • width and height. They set the height and width of the elements respectively.

The values ​​of the CSS code

When CSS values ​​are not specified they make a property assume the ones predefined by each browser. In case we should intervene, we must know that all properties accept an established value block. The most used to know are:

  • Alignment. The values ​​to use for the positioning of images, buttons and texts are: left ...: left;, right ...: right ;, centered ...: center ;, justified ...: justify; and as the parent element ...: inherit ;.
  • Border. The edges can be defined with the main values: none ...: none ;, hidden ...: hidden ;, dotted ...: dotted ;, dashed ...: dashed ;, solid line ...: solid; and double border ...: double ;.
  • Color. The colors can be indicated in RGB (e.g. ...: rgb (132, 215,208;), with the hexadecimal code (e.g. ...: #84d7d0;) or with your name in English (e.g. ... : blue;).
  • Position. The positioning values ​​for an element are: ...: absolute; defines a point established by the property, ...: relative; to move independently without affecting the other elements, ...: fixed; to fix the element in a specific point always visible to the user, ...: static; remains in a natural position in the flow of elements and ...: sticky; to make it stay fixed in one place while scrolling a page.
  • Unit of measure. The units of measurement can be indicated in various ways. The most used are the pixels (e.g. ...: 23px;), the percentage (e.g. ...: 75%;) and the relative em (e.g. ...: 1em;). There must never be spaces between the number and the unit.
  • URL. URLs are indicated in two ways: ...: url(https://www.fashionsnobber.com/file.html); or ...: url("https://www.fashionsnobber.com/filehtml") ;.

How to integrate the CSS style sheet into an HTML document

To make the CSS style sheets operational, you need to create an association between HTML and CSS documents. In this way the browser will be able to apply and interpret the CSS code when loading the website. To integrate CSS into HTML, you can intervene in 3 ways:

  1. Declaration within the HTML tags.
  2. Assign the CSS inside the <head> tag.
  3. Refer to a separate style sheet.

Let’s see them in detail.

1. How to declare CSS inside HTML tags

When the CSS command defines the style of a single part of the source code, the rules can be applied to the HTML element tag using the style=”css declaration” attribute.

Inline example inside an HTML tag: <h1 style = "color: blue;"> Title </h1>

In case you need to apply a large number of CSS declarations it would be better to avoid this solution and resort to creating a stylesheet with external call. This is because the source code of a web page must be as light and clear as possible so as not to slow down the loading times that penalize indexing. Furthermore, if changes need to be made, it is clear how much more practical it is to rely on the style sheet rather than looking for the exact point in which to intervene within an HTML document.

Inline example inside an HTML tag with a large number of declarations: <h1 style = "color: # 84d7d0; font-family:" Arial "," Verdana ", serif; font-size: 26px; font-weight: bold; text-align: center; "> Title </h1>

! This solution is indicated when there is no need to configure a style sheet or when this command has a very high priority. For example if the website is very minimal and small in size.

2. How to insert the CSS inside the <head> tag in an HTML page

When you need a style rule to be valid several times for the same element, you need to define all commands only once within the <head> </head> tag of an HTML document. To do this, use the <style> </style> tag element as shown in the example below:

<! DOCTYPE html>
<html lang = "it">
  <head>
    <meta charset = "utf-8">
       <title> Introduction to CSS </title>
     <style>
        h2 {
        color: # 84d7d0;
        font-family: "Arial", "Verdana", serif;
        font-size: 26px;
        font-weight: normal;
        text-align; left;
        }
     </style>
   </head>
      <body>
        <h2> How a website is made </h2>
        [...]
        <h2> Introduction to CSS code </h2>
        [...]
      </body>
</html>

In this way we told the browser to automatically apply a certain color, font, size, thickness and alignment to all h2 subtitles present on the web page. To apply these exact rules to other pages of the website, you need to integrate the same CSS code in every single HTML document.

3. How to link to an external CSS style sheet

The latter solution is the most convenient, practical and used by any self-respecting web designer. In fact, when the stylistic rules are defined on a separate style sheet they allow a much simpler management. All this is possible simply by creating a text file with the .css extension that will be attached to the main HTML document of the website using the <link> tag within the <head> </head> section. We will then have the opening form of a website that looks like this:

<! DOCTYPE html>
<html lang = "it">
   <head>
      <meta charset = "utf-8">
         <title> Fashion Snobber </title>
           <link rel = "stylesheet" type = "text / css" href = "style_sheet_name.css" />
       [...]
   </head>
      <body>
       [...]
      </body>
</html>

By opting for this solution we will have the possibility to recall the CSS code in each of the web pages of a site without having to go and modify them one by one as we have seen in the previous cases.

! The <link> tag to compose for the CSS code includes mandatory attributes such as rel=”stylesheet” (communicates that a style sheet must be connected), type=”text-css” (indicates a CSS document in text format) and href=”Name_sheet_of_stile_.css” (the name of the file with the extension .css present in the site folder).

Conclusion

With this mini introductory guide to CSS code I have given you the basics that will allow you to handle the style.css file contained in your website with more confidence. In this way you will be able to make all the changes you deem appropriate to improve the style of your web space. If, on the other hand, you need further help, you can rely on the guide on how to customize a blog with HTML and CSS codes. All the steps to be taken to implement certain changes are explained step by step to those who rely on Blogger, one of the most common blogging platforms.

You may also like

Leave a Comment

Utilizzando questo modulo, accetti l'archiviazione e la gestione dei dati da parte di questo sito Web.
*By using this form you agree with the storage and handling of your data by this website.

Questo sito utilizza cookie analitici e di profilazione, propri e di terze parti, per finalità di analisi, per migliorare l’esperienza dell’utente e per mostrargli offerte affini ai propri interessi. Cliccando su "Ok" acconsenti all’uso dei suddetti. Accept Read More