What is CSS? A simplified introduction to CSS

June 18, 2020

What is CSS - Cascading Style Sheets?

In the absence of styling, browsers interpret HTML in its default state - color of texts will be black, background will be white, headings will be bigger, as expected over regular texts.

CSS - Cascading Style Sheets - is the language for handling the look and feel of web pages. CSS handles how web pages appear to users, that is the presentation and accessibility of the document to users.

CSS can be used for basic styling of texts, to complex effects like animations. For example, CSS can be used to define color, font-size, and/or background of websites created in a markup language (HTML) document.

CSS Syntax

CSS syntax takes the form of a rule-based language. You define rules stating how styles should be applied to particular element(s) on a web page.

The syntax consist of selector(s), and property: value; pair which is referred to as declaration.

selector {
  property: value;
}

For clarity and ease of reading, it is recommended to write your CSS like so.

selector {
  property: value;
}

We can have more than one property: value; pair in a CSS rule. And this will we call a declaration block. Let’s assume that you want the heading of your web page to be of text blue and a font size of 6em. You will achieve this in CSS, writing the rule as a declaration block, like so.

h1 {
  color: blue;
  font-size: 6em;
}

And when we say CSS is a rule-based language, what do we mean? It implies that we start with a selector and in the code sample above, the selector is the HTML element <h1> that the rule will affect. The curly braces {} holds one or more declarations. The property is the CSS rule, whilevalue is the value to be assigned to the property - how we want the property to be affected.

And for the code sample above, our property: value; declaration is respectively color: blue; and font-size: 6em;. Properties in CSS, accept values that are consistent with them. A color property will accept or take color values.

Comments in CSS

Comments - non executable piece of code - in CSS can be written like so.

/* This is a single line comment in CSS */

/* 
This is also a multi-line
comment in CSS
*/

Whatever is written inside of /* */ is noted as a comment and will not be interpreted by CSS.

And some of the reasons, why we use comments in programming is for clarity of purpose, for our future reference or other developers who may be reading our code or working on the project with us.

Applying CSS in a web application - HTML document

The earlier part of this article focused on defining CSS and its syntax, but CSS is meant to work closely with markup documents like HTML. So how do we apply CSS to a web app - HTML document?

1. Inline Style

A single HTML element can be styled, by applying CSS inside the style attribute of the HTML element.

Let’s assume that you want the heading in your web page to be a warning text with the color of red. You can use inline style to achieve that like so.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS Example - Inline Style</title>
  </head>
  <body>
    <h1 style="color: red;">Inline Style</h1>
    <p>It is not recommended to use CSS like this. That is inline styling</p>
  </body>
</html>

Here is the code sample in Codepen.

It is not recommend to use CSS like this because of the difficulty in maintenance of the web app, as a required change to the style, will require a lots of CSS edits on the page.

2. Internal (Embedded) Styles

In internal styling, both HTML and CSS is found in a single page.

You apply CSS to an HTML document by putting the <style> element, in the <head> of the HTML document. Here is how.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>CSS Example - Internal Style</title>
<head>
 <style>
   body{
     width: 960px;
     margin: auto;
     background: lightblue;
   }

   h1{
     color: blue;
   }
 </style>
</head>
<body>
  <h1>Internal Styling Sample</h1>
  <p>You can also style your web page using internal styling as shown.</p>
</body>
</html>

Here is the code sample in Codepen.

Internal styling is better than inline style, but the drawback for this method, is working on a web app with multiple pages - the developer will have to style every page associated with the app internally, which comes at a high cost of maintaining the site.

3. External Styles

Applying the principle of separation of concern of the core web technologies - HTML, CSS and JavaScript - where HTML is for content/structure, CSS for presentation and JavaScript for interactivity/behaviour with the user, we can use this principle to style multiple web pages in an app, using a CSS file.

CSS file ends with the .css extension.

You apply a .css file to an HTML document using the <link> element like this, <link rel="stylesheet" href="main.css"> and this will be in the head of the HTML document.

Here is an example, first the HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>What is CSS?</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>External Styling Sample</h1>
    <p>This is a sample page styled using external style sheets.</p>
  </body>
</html>

Next the .css file.

body {
  margin: auto;
  width: 960px;
  background: #c9f3f3;
}

h1 {
  color: #9b59b6;
}

p {
  color: #9b59b6;
}

Here is the code sample in Codepen.

The above code sample, assumes that the main.css file is in the same directory (folder) as the HTML file. Do note that the href attribute of the HTML file must match the path of the .css file, for the linking.

Conclusion

This is the first in the series of articles, I hope to write, covering the core fundamentals of CSS.

And if you find this article interesting, please share.

Share on Twitter