Getting Started with CSS

For those of you who are planning on starting your website or thinking of doing so, you must have come across the term CSS. This article is an introduction to CSS for beginners that have very little knowledge of it. We will go through the CSS basics, its syntaxes, and a few introductory examples to get you up and running.

What is CSS?

CSS, short for Cascading Style Sheets, is a method that describes how elements of a website are to be displayed on the screen, on paper, or in any other media source. It controls the layout of multiple web pages and saves loads of time.

Before CSS, the HTML documents' presentational attributes were stored under the HTML tags. This included the font size, color, borders, sizes, and element alignments, all explicitly contained within the HTML. As a result, developing large web sites became a complicated and expensive project. To resolve this issue, CSS was introduced in 1996 by the World Wide Web Consortium. Web designers could now move the formatting information of a web page to a different stylesheet, which results in a much simpler markup.

CSS Syntax

Like any other language, you need to learn the syntax to be able to code with it. The syntax consists of a selector and a declaration block having a format of ‘property: value’.

h1 {color:blue; font-size:12px;}

Here h1 is the selector that points to the HTML element that you want to style, while the contents within the brackets are the declaration that determines how the pieces are formatted on the webpage. The format follows the property: value style, wherein the above example, color is the property and blue is the value, same with font-size and 12px.

The declaration block consists of one or more declarations separated by a semicolon, and all the declarations made must be contained within the curly braces.

So citing the above example, the syntax would look like this.

Selector {property1:value1; property2:value2;..}

The property is the style you want to change. It could be anything from color and size to font and background.

For the sake of better understanding and readability, the code can be written like so:

h1 {
    color: blue;
    text-align: center;
}

In the above example, h1 is a selector, color and text-align are the properties, and blue and center are the values.

Comments in CSS

Comments are a helpful tool in deciphering a CSS source code. They may help you or another developer in the future to understand what you were trying to do with the code. Comments are crucial to a developer and not displayed in the browsers.

A comment in CSS begins with a /* and ends with a */. To understand this better, let’s look at a simple example.

/* This is a CSS comment */
h1 {
    color: blue;
    text-align: center;
}
/* This is a multi-line CSS comment 
that spans across more than one line */
p {
    font-size: 18px;
    text-transform: uppercase;
}

You could also comment out a part of your code to make debugging easier. Just add the /* and */ at the beginning and end of your code, and it will be converted into a comment. The example below should explain it better.

h1 {
    color: blue;
    text-align: center;
}
/*
p {
    font-size: 18px;
    text-transform: uppercase;
}
*/

Case Sensitivity

CSS property names and selectors are not case-sensitive, but the same cannot be said about CSS selectors. Take, for example, the .maincontent class selector, which is not the same as .mainContent.

Therefore it is safer to assume all components of CSS are case-sensitive.

And with that, we end this introductory class to CSS. This intro article was just a tip-toe into the world of front-end landscaping through CSS. There are a host of other topics that one needs to master the language. So keep learning and don’t give up!

Other useful articles: