HTML/CSS Lesson 4 – Introduction to CSS. Types of CSS.

Last updated on December 27th, 2023

What is CSS?

CSS (Cascading Style Sheets) is a programming language that is used to style and format web pages. CSS cannot be used alone, it is always used together with the HTML language.

CSS is used to specify the layout, colors, size, borders, fonts, and other visual aspects of a website. For example, you can use CSS to set an image as a background or to set the background color of an HTML element or the background color of a whole webpage, to set the width of an HTML element, to set the size and color of text, and define the position and size of various elements on the web page.

CSS uses a set of commands and rules to define how different elements on a webpage should be styled. These commands can be applied to individual HTML elements, or to groups of HTML elements, and they can be organized into separate files (CSS file) to make it easier to manage and update the styling of a website.

One of the key benefits of using CSS is that it allows developers to separate the presentation of a webpage from its content. This means that changes can be made to the visual style of a website without changing the main HTML code. It also enables developers to change the design of multiple web pages, making changes only in a single CSS file.

Who created CSS and when?

Cascading Style Sheets (CSS) was proposed by Hakon Wium Lie and Bert Bos in 1994. Hakon Wium Lie, a Norwegian web pioneer, and Bert Bos, a Dutch computer scientist, presented the first draft of CSS as a way to separate the structure and content of documents from their presentation. They aimed to enhance the web’s capabilities by providing a styling language that could be applied to HTML documents. CSS1 was released in late 1996. CSS2 – in 1998. CSS3 – in 1999.

Where to write the CSS code?

There are three ways to write CSS code:

– directly in the HTML code using the “style” attribute (it is called inline CSS)
– in the “head” section of the HTML page (it is called internal CSS)
– in a separate CSS file (it is called external CSS).

The most used is the external CSS – CSS code in a separate CSS file. In this way, one CSS file can control the design of many web pages.

Also commonly used is inline CSS code using the “style” attribute, which is placed inside HTML tags.

What is the difference between inline CSS, internal CSS and external CSS?

1. With inline CSS, you can control the design of a single HTML element.

2. With internal CSS, you can control the design of an entire web page.

3. With external CSS, you can control the design of multiple web pages.

The three types of CSS have different priorities. Inline CSS has the highest priority. Second is internal CSS. External CSS has the lowest priority.

This means that if, for example, you have a black text color set for an HTML element in an external file (external CSS), but for the same element you set a red text color via inline CSS, the text will be displayed in red color on the screen, because the priority of inline CSS is higher.