2/9

2. CSS introduction

Style File Sheet

CSS stands for Cascading Style Sheet. CSS allows to finely tune the visual appearance of HTML content.

  • Consider the following basic HTML file and observe its appearance in your browser

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> CSE104 </title>
</head>

<body>
       <h1>My first webpage</h1>
       <p>This is HTML code.</p>
</body>

</html>

  • Create a new file named style.css with the following content

body {
    text-align: center;
    background-color: rgb(15,15,15);
    color: white;
}

h1 {
    color: red;
    font-variant: small-caps;
}

  • Add the following entry in the metadata of your HTML document (between the tags +<head> …​ </head>)

<link rel="stylesheet" type="text/css" href="style.css">

  • Observe the new appearance of the webpage in your browser. Change some values such as the color of some elements and reload to page.

  • Note that you can rename your css file as you want (and adapt it in the HTML <link> tag). One HTML webpage can also include several CSS files.



Note: You may consider this template of HTML webpage as a basic one that you will reuse in all exercise It include notably meta informations for language, charset encoding, and viewport adaptation for mobile.

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title> My Webpage </title>
</head>

<body> </body>

</html>

CSS Structure

CSS documents are organized as follows

selector {
        property: value;
        property: value;
        ...
        /* CSS Comment */
}

The selector allows to select a subset of HTML tags on which the pair property:value will be applied. The unit containing a `selector and a set of `property:value` is called a CSS rule.

There exists a large number of CSS properties. Don’t hesitate to check the reference to check for specific properties.

Cascading selection

In the previous example, the text My first webpage` is included in both body and `h1` tags. It is therefore selected in two different rules.

This is where the Cascading evaluation of CSS has to be considered: Each element inherits the style from its parent. When there is a conflicting property defined several times, the one associated with the more specific selector is applied. In this case, the body selector is considered as less specific than h1 (body contains all the content of the webpage). In the case where two selectors have the same specificity, the rule which is declared last is applied.

This cascading behavior allows to organize the visual appearance of the webpage in a structured and hierarchical manner. Designing a good CSS structure is one of the role of the so called front page web development.

Selector combination

Selectors can be combined to refine the selected elements, the most common combination are (more complex combinations of elements are possible)

  • e1, e2: selects the union of all elements e1 and all elements e2

  • e1 e2: selects elements e2 children of element e1

ex. Consider the following HTML body and CSS content

<section>
       <h1> A </h1>
       <p> text A </p>
</section>

<h1> B </h1>
<p> text B </p>

<footer>
       <h1> C </h1>
       <p> text C </p>
</footer>
footer {
    background-color: rgb(230,230,230);
}
section {
    background-color: rgb(200,200,200);
}
h1, p {
        color: blue;
}
section h1{
        color: red;
}

  • h1, p apply the rule on all <h1> and <p> elements.

  • section h1 applies its rule only to <h1> element which is a child of <section>

  • Create the rule such that all the <h1> titles, and <p> elements which are inside a <footer> tag are underlined (see text-decoration property).

Note on HTML/CSS online helper tools

Every time a new code has to be tested, you need to re-create a new HTML (with its header) and CSS file. This may be cumbersome when trying many possibilities.

You may use some web tools such as Code Pen allowing to quickly check HTML/CSS content if you want.

Keep, however, in mind that you should only use such tools, when you are already able to create yourself html and css file from scratch.