Skip to content

What is CSS? (The Basics)

Spread the love

Cascading Style Sheets (CSS) is a programming language that allows you to determine the design of electronic documents. Using simple instructions, presented in clear source codes, web page elements such as layout, color and font can be adjusted as desired. 

Thanks to cascading style sheets, the semantic structure, and content of the document remain completely intact. 

CSS was launched in the mid-90s and is now considered the standard style sheet language on the World Wide Web.

You may like to read our article which explains what web developers do.

What is CSS?

Like HTML, CSS is one of the basic languages ​​of the World Wide Web. While you use HTML to fill a web page with text and semantically format it, you use CSS to define the design of that content. 

Even though the two languages ​​are used in parallel, the CSS design guidelines and the HTML elements exist separately. This means that a machine can read an electronic document without CSS. CSS is used to visually prepare content that opens in the browser for an engaging presentation.

CSS is a “living standard” and is continually being developed by the World Wide Web Consortium. So there will always be new functions and practical applications to discover. 

The widely used style sheet language was created in the 1990s. Back then, the idea of ​​using style sheets to display web content was not entirely new. But CSS differed from other presentation tools that already existed in HTML in one important respect: it allowed users to define design rules for groups of elements in multiple documents and in a single stylesheet.

The advantages and areas of application of CSS

A good website is not only about its content, but also about its design. If it is not pleasant or attractive, users quickly lose interest. In this context, CSS offers a number of design options that are not available in pure HTML.

For example, CSS allows you to control certain specifics centrally. This means that similar elements (like hyperlinks or images) within the same document are recognized and formatted by a single command. 

Formatting instructions do not have to exist as an internal stylesheet in the HTML document itself. If you save the CSS instructions in an external stylesheet, that is, in a separate file, you can also use them for other documents.

Beyond the basic display instructions that affect the colors, shapes, and fonts of HTML elements, there are now more sophisticated CSS modules. With them, you can, for example, define different animations or representations depending on the output media

In this way, the same HTML document can be prepared identically for all possible media. As content and design are separated in this document, the website code is clearer. The SASS stylesheet language offers even more possibilities but does not completely replace CSS.

The structure of a CSS declaration

You can use a CSS declaration to determine which elements of your electronic document should take which values ​​or properties. In its basic structure, the declaration consists of a selector and braces. 

In these parentheses, you list the property declarations, which are separated by semicolons. Each directive consists of the property name, a colon, and a specific value. After the last property declaration and before the final parenthesis, it is possible to place another semicolon, but it is not mandatory.

How to integrate CSS into a website?

As mentioned earlier, it is possible to embed CSS into an electronic document through internal and external style sheets. In addition, there is also an inline style, where the desired properties are placed directly in the HTML source code of an item. Here is an overview of the three possible methods of embedding CSS in an HTML document.

External style sheets

Here, CSS declarations are defined in external files with the extension “.css” and embedded in the HTML file using a “link” tag. This is the most popular method because the content and design are clearly separated and it is easier to make changes. The link is established in the “head” area of ​​the HTML document as follows:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est une paragraphe</p>
</body>
</html>

Internal style sheets

Here you place all the CSS declarations in the HTML file itself. Remember that they will only apply to the document in question. For internal style sheets, insert the “style” element in the “head” area of ​​the HTML document as follows:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe</p>
</body>
</html>

Inline style sheet

Just like in the internal stylesheet, the CSS declarations are located here in the HTML file itself. However, there is one important difference: the corresponding attributes are located directly in the start tag of the elements and do not apply to any other element. This method is especially useful if you don’t want to make global design declarations.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">Ceci est un titre</h1>
<p>Ceci est un paragraphe</p>
</body>
</html>

The interaction between CSS and HTML

As the examples above show, CSS can only be used in combination with a classic HTML structure. Since HTML structures content through paragraphs, lists, and tables, and CSS takes care of the visual design, the two web languages ​​complement each other and are closely related. 

Cascading style sheets often revolve around the “box” design. The structure of an HTML document is based on the principle of superposition: the individual elements are superimposed like boxes. Each “box” that takes up space on a website has the following properties:

  • Padding: the space directly around the content of an element (interior space).
  • Border: the line that is just outside the interior space.
  •  Margin: the space outside the border (outer space)

By specifying the size, shape and color, these “boxes” are then shaped accordingly. In addition to these simple attributes, however, there are more sophisticated CSS instructions for adding shadows to text, filtering functions to images, and highlighting form fields and other elements.

Newsletter SubscriptionYou don't wanna miss our exclusive guides

Get Exclusive Online Business Guides and Tips That I Only Share With Email Subscribers


Spread the love

Leave a Reply