It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

CSS Tutorial: Learn About the Main Syntax Rules and Styling Options

Reading time 3 min
Published Aug 1, 2016
Updated Nov 14, 2019

CSS Tutorial

TL;DR — The Cascading Style Sheets (CSS) is a language for styling documents of markup languages such as HTML.

What Is CSS?

This CSS tutorial explains that CSS is a language for controlling the layout of HTML elements and their appearance. However, changing colors, width and height, and spacing between elements are only a few examples of what is CSS used for.

CSS Tutorial

It is also applied for making websites responsive and mobile-friendly.

Syntax Rules to Follow

The main rule of using CSS is setting values to styling properties. You need to include selectors which are the HTML elements that you want to style.

CSS Tutorial

A declaration block consists of the property (for instance, padding) and the value (for instance, length indicator in pixels).

CSS vs HTML: Main Differences

HTML is a language for creating content such as paragraphs, images, tables, lists, etc. While HTML is the main component of a website, the CSS language controls the layout and sets the web design (how pages are presented).

CSS Tutorial

The CSS language sets backgrounds, padding, colors, and many other properties for HTML elements. You can use CSS to create animations and other exciting features, such as image galleries.

Remember: the simplest way of explaining CSS vs HTML is stating that they are two separate coding languages that complement each other. HTML creates the content of the website and CSS styles it.

How to Use CSS

There are several ways of using CSS. The most basic way of styling elements is setting the style attribute to any HTML element. This option is known as CSS inline styling. Here is a basic example:

Example
<p style="color: blue;">This is a paragraph.</p>

Another option of how to use CSS is including all the styling properties in a <style> tag. Then, you need to place it within the <head> element. This option is internal:

Example
<head>
   <style>
      h1 {
         color: red;
         margin-left: 20px;
      }

      p {
         color: blue;
      }
   </style>
</head>

The last point in this CSS tutorial is learning how to link CSS to HTML. Let’s say you create a document named mystyling.css with the styling properties for your web site. Here are the steps to follow to use this external option:

  • Choose HTML documents that you want to style.
  • Add <link rel="stylesheet" href="mystyling.css"> between the <head> tags.
  • Styles should be applied to your web page.
  • Update the mystyling.css anytime and keep your website up-to-date with the latest interface fashion trends.
Example
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Tip: adding CSS to the <style> tag and assigning the style attribute are not the best choices. You should use the external option and link .css files to HTML documents.

CSS Tutorial: Useful Tips