Skip to content

Introduction

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

Adding a CSS to your website

The website must be informed that it should use the CSS. There are three ways of attaching CSS to a website:

  • through an external css file
  • through the marker ``style>
  • by 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, increasing the readability of files.

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

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


Style tag

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

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


Style attribute

The last way to style HTML elements is the so-called inline, where the style is defined directly inside the tag, using the style attribute. Each subsequent property is added after a semicolon, e.g:

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

Cascade model

The name "cascading style sheets" is due to the fact that when CSS rules are mutually exclusive, the priority of the styles is set hierarchically. Therefore, the styles defined "closer" to the formatted element have priority. The order can be defined as follows:

  1. Default web browser sheet.
  2. External style sheets and style definitions in the document header.
  3. Definitions of the styles in the style attribute of the element.

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

Inheritance

By giving a rule to a tag, his children inherit this rule until it is overwritten.

Consider the following HTML code:

<div>
    Text in parent
    <p>The text in a child who inherits color from a parent</p>
</div>

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

div {
    color: red;
}

NOTE: Not all properties are inherited.

Commonly used CSS properties that are not inherited are e.g:

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

Syntax

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

selector { 
    property: value; 
}

Comments

CSS, like almost every technology, allows you to add comments. In a CSS file, the comments are added in a block fashion starting with a /* and ending with a */. This notation allows you to comment on multiple lines at once, e.g:

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