CSS - Introduction

First Page
Next Page

CSS Introduction

CSS is short for Cascading Style Sheets. CSS is used inside HTML or SVG to style the content of your HTML page.

A modern website or web application consists of HTML, CSS, JavaScript and possibly SVG. HTML is used to define what content is in the website or web application - its content and composition. CSS is used to define how that content is to be displayed with colors, borders, fonts, backgrounds etc. JavaScript is used to make the website or web application come to life. SVG is used to create scalable vector graphics for diagrams, icons and logos.

So, you are sold on using CSS to style your HTML elements? First, we need to figure out how to tell the browser we are using CSS. We can do this by referencing the CSS as a separate file or we can place it inside our HTML document.

There are three ways to define CSS.

  • Inline/element Styling (Not so great)

  • Internal Style Sheet (Not bad)

  • External Style Sheet (The best way)

CSS Versions

At the time of writing there are two major CSS versions in use. CSS 2.1 and CSS 3.0 . I will describe features from both of these versions in this tutorial. After all, as soon as a certain CSS feature is supported, people forget if that feature came from CSS 2.1 or CSS 3.0.

Table of Contents

The CSS tutorial is divided into many individual pages. See the top left side of each page to see a list of the major topics covered. You can click the topics to read them.

CSS Example

Here is a quick CSS example inside an HTML page, so you can see what it looks like −

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: MediumSeaGreen;
}

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

p {
    font-family: verdana;
    font-size: 25px;
}
</style>
</head>
<body>
<h1>This Is My First CSS Example</h1>
<p>It Is My Paragraph.</p>
</body>
</html>

Result

First Page
Next Page