CSS Tutorial For Beginners

Are you starting out on your web development journey?

Have you developed a few static HTML pages but want to give them more styling but don't know how to do that?

Looking to learn some CSS alongside your HTML? 

You've come to the right place. In this tutorial, the bare-basics of CSS would be treated. 

So, let's get started.

Firstly,

What is CSS?

CSS (short for “Cascading Style Sheets”) is the styling language used in presenting HTML content in a modern and uniform way. It is a necessary tool for front-end web development and should be learnt if you wish to build user-friendly and neat-looking web applications (or websites).

NOTE: CSS is NOT A PROGRAMMING LANGUAGE, but a STYLING LANGUAGE. Meaning, the CSS styles you write basically “select a bunch of stuff” and tell the browser HOW to display that “selected stuff” in a more appealing way.

       As at the time this document was written, the latest version is CSS3. Chances are at the time you are reading this, there would be a newer version of CSS, but don’t worry; only slight changes are made to newer versions of the language.

Next,

How/where do I run a CSS file?

CSS files are web-based files and hence can be run in any browser, such as Firefox, Chrome, Internet Explorer, ALONGSIDE a HTML file, some people refer to as the “host”. CSS files cannot be opened or run as stand-alone files unless in a text/code editor.

Now you may be asking

How do I write CSS styles?

CSS styles are written using CSS tags which are written inside CSS files. These are basically text files with the “.css” file extension, which means that you can use ANY text editor (such as Notepad, Notepad++, Sublime Text, Visual Studio Code, Brackets, Bare Bones, Text Wrangler and Gedit are just to mention a few) to create your CSS files in a matter of minutes.

CSS file extension

CSS Syntax

       Syntax is basically the “grammar” of a computer language. For example, think of a human language (such as English or Spanish). We have various grammatical rules for making sentences in English. These rules, if followed, lead to easy communication between individuals. The same goes for computers.

       Computers cannot understand human languages and although these languages are written in English, they are translated into the binary representation of that language by either the computer itself or with the aid of something called a “compiler”.

A compiler is a special software that translates human-based codes of certain programming languages into a language the computer can understand for execution. CSS doesn’t need a compiler as it is rendered by a browser.

 So when we talk about syntax in CSS, we’re referring to the already-set rules in CSS with which a computer (in this case, our browser) would use to identify the language and carry out the tasks assigned.

CSS’ syntax is very straight-forward and easy to grasp. It can be divided into three smaller parts for easier assimilation.

CSS Syntax

These are the:

1.   Selector: This part targets or selects the particular HTML element we wish to style, such as the header, body, footer or a paragraph; etc.

2.  Property: This accesses, as the name implies, a particular property of our HTML element that we want to style. For example, let’s say we want to access the color property of our body tag. We would do so like this:

3.  Value: This gives or reassigns a new value to the property of the tag or element which we have selected. Putting all this into code would look like this:

In the event that the explanation above wasn’t clear enough, we’ll use a metaphor. Let’s assume that all our HTML codes are people in a stadium.

Now, we want to pick (select) a particular element (in this case, a person) named “John” from the crowd and style it (him). For this purpose, we would use the “selector” tag in CSS and replace it with “John”.

“John” has various properties such as his height, his weight, color of his hair, etc. and all these properties have their own attributes, or more accurately, their own values. To access each of these properties respectively, we type in the property name. For example, let us change John’s hair color to green. We would do so like this:

Of course “John” is not a real HTML element (unless it’s the name of an ID or class), but you get the point right?


Download the full PDF tutorial here