CSS Playground

Cascading Style Sheets, also known as CSS, are what form a computer-based language describing the presentation of HTML and XML documents. All standards defining CSS are published by the World Wide Web Consortium (W3C). Introduced in the mid-1990s, CSS became more commonly used in website design and properly supported by web browsers after 2000.Wikipedia

CSS syntax

selector { 
      property: value; 
    }

selectorrefers to the name of the HTML element. Selectors are used to target the elements to which we wish to apply styles.

propertyrefers to the style effect we wish to apply. There are a number of CSS properties used to format elements.

valuerefers to the property value we wish to apply.

Below is an example of how to apply a green colour to HTML paragraph elements:

p { 
      color: green; 
    }

How is CSS used?

In HTML elements, as part of a style attribute

<p style="color:green;">My text</p>

As part of a style tag in the HTML head

<html> 
      <head> 
        <style> 
          p { 
            color: green; 
          } 
        </style> 
      </head> 
      <body></body> 
    </html>

In an external .css file

p { 
      color: green; 
    }

We recommend using an external .css file for improved readability, maintenance and style-sharing between several HTML files. The third option is therefore the best. To achieve this, simply create a file with a .css extension and place it in your project along with the .html file.

Then, add a reference to the style.css file in the index.html file head so it takes all styles into consideration:

<html> 
      <head> 
        <link rel="stylesheet" href="style.css"> 
      </head> 
      <body></body> 
    </html>

id attributes and class

Using HTML element names as selectors for applying styles will soon become very restrictive. This is where selector attributes come in. They are merely HTML attributes used to apply a specific name to our elements, and there are two different ones:

id -> <p id="paragraph">My text</p>
class -> <p class="paragraph">My text</p>

In CSS, an id is used with a hash sign (#) in front and a class has a dot (.) in front:

#paragraph { 
      color: green; 
    } 
 
    .paragraph { 
      color: red; 
    }

The only difference between the two is that an id can be used on just one element within an HTML page. A class can be used on as many elements as you like.

Properties

View the list of CSS properties, use them and familiarise yourself with them.

Selectors

Expand CSS selection possibilities thanks to combinations and pseudo-classes.

References

Kevin Bizien

Product Designer
Design System Jedi

Want to tell me about your design project? Contact me at bonjour@kevinbizien.com and we can start talking soon!