Skip to content

Introduction

CSS (Cascading Style Sheets) is a technology that describes the appearance of a website. Its use affects the arrangement of HTML elements, colors, and other properties.

Including CSS in the website

The website must be informed that it is to use CSS. There are three ways to attach CSS to a website:

  • via an external css file
  • via the <style> tag
  • via the style attribute on the html element

External CSS file

The first way is preferred, because this approach separates the CSS code from the HTML code, making the files easier to read.

In order to inform the HTML file that you want to use CSS styling, in the <head> section, add the <link> element. This tag should contain the following attributes:

  • rel with the valuestylesheet
  • href, which points to the location of the file (as with the <a>tag)
<link rel="stylesheet" href="/styles/main.css">


The style tag

The second way to use CSS in the html file is to add the <style> tag in the <head> section, which has thetype attribute with the value text/css. Inside the tag we give further properties, e.g .:

<style type="text/css">
h2 {color:red;}
a {color:blue;}
</style>


The style attribute

The last way to style HTML elements is called * inline *, where the style is defined directly inside the tag, using the style attribute. We add each subsequent property after a semicolon, for example:

<p style="color: red;">Lorem ipsum SDA</p>

Waterfall model

The name "Cascading Style Sheets" results from the fact that when CSS rules are mutually exclusive, the priority of styles is set hierarchically. Thus, styles defined "closer" to the formatted element take precedence. The order can be defined as follows:

  1. Default web browser sheet.
  2. External style sheets and style definitions in the document header.
  3. Style definitions in the element's style attribute.

This model shows how the cascade principle works. Styles from all sources complement each other to create one "virtual" style.

Inheritance

By assigning a rule to a tag, his children inherit the rule until it is overwritten.

Consider the following HTML code:

<div>
    Text in parent
    <p>Text in child who will inherit the color from its parent</p>
</div>

If, for example, we set the text color for the <div> tag in the CSS file, the same color will automatically inherit the p tag because in our model DOM it is a child of the parent. The described CSS code would look like this:

div {
    color: red;
}

NOTE: Not all properties are inherited.

Commonly used CSS properties that are not inherited include:

  • background
  • border
  • margin
  • padding
  • width
  • height

Syntax

CSS code consists of rules that define the style for selected elements of a website. A rule consists of a selector and a declaration. Using the selector, we define the element or group of elements on which the rule will apply. The declaration consists of properties and values separated by a colon. After entering the value, we should insert semicolon, e.g .:

selector { 
    property: value; 
}

Comments

CSS, like almost any technology, allows you to add comments. In the CSS file, comments are added in a block-like fashion that begins with the /* tag and ends with */. This entry allows you to comment multiple lines at the same time, e.g .:

div {
    /*this will change div element colors to red (e.g. text inside divs)*/
    color: red;
}