CSS Basics

CSS Basics

Our journey into the world of Cascading Style Sheets, more commonly known as CSS, begins with these CSS Basics lessons. The skill level is aimed at people with little or no CSS experience, although some basic knowledge of HTML is assumed. An introduction to HTML is given in the HTML5 Basics section of this website and is worth a visit if you are completely new to HTML as well as CSS. Each lesson is bolstered by hands-on practicals that get us working with CSS. By the end of the CSS Basics Tutorials we will have enough CSS knowledge to really glam up our webpages and have the fundamentals in place to move onto the CSS Intermediate Tutorials.

The Basic Lessons

These lessons get us started with the tools we need and give basic guidelines on creating and updating files and folders. We then explain CSS syntax and introduce some textual and spacial CSS properties to our web documents. After this we discuss how all elements are contained in a type of box, commonly known as 'the box model'. We investigate 'the box model' and the basic CSS properties associated with it. To summarize, we bring everything we have learnt from the CSS basic tutorials together, which will lead us nicely into the CSS Intermediate Tutorials.

Lesson  1: Starting Out

In Lesson 1 we gather the tools required to create our first HTML page using CSS and make a folder to store our CSS Basic practical files in. We do our first practical and view the results in a default web browser. Creating visual effects is very easy with CSS and once you know the basics very simple to use.

Lesson  2: CSS Syntax

We start this lesson by exploring the syntax behind a CSS Style, by breaking down the style into its component parts. The various components are explained and their role in the grand scheme of all things CSS is made clear. The lesson ends with a second practical where we introduce CSS Internal Style Sheets and see what their use is.

Lesson  3: Styles and Stylesheets

In lessons 1 and 2 of these CSS Basic Turotials we saw how to use CSS via inline styles and Internal Style Sheets respectively. In this lesson we introduce External Style Sheets to the party and discuss the various styles and their advantages and disadvantages.

Lesson  4: Basic Tag Selectors

We learnt in Lesson 2 that a CSS style is made up of two main parts, the selector and the declaration group. Basic Selectors can be used for every tag on the page or for an individual tag. In this lesson we go through the list of Basic Selectors and learn how and when to use them. We start by selecting everything on a page and gradually drill down to a point where we select a single tag for styling.

Lesson  5: Styling Text

In this lesson we learn how to use CSS to manipulate the text on our web pages. CSS allows us to change the spacing between letters and words, the line height of our text, how our text is aligned, as well as the colour of our text and how it looks. With CSS we have complete power over our text and how and where its presented; so without further ado lets see how.

Lesson  6: Using Fonts

In this lesson we learn how to use CSS to change the fonts used on our webpages. We can use CSS to modify the font and the group of font families we would like to select from. CSS also allows us to change the font size, the appearance of the font used and the weight of the font.

Lesson  7: Understanding The Box Model

Whenever you create a HTML element such as a paragraph using the <p> HTML tag or an image using the <img /> HTML tag, the web browser treats these elements as boxes. The contents of these boxes are surrounded by different properties that make up the 'box model'. In this lesson we investigate the basic properties that make up the 'box model' to see what we can manipulate.

Lesson  8: Padding & Margins

In this lesson we delve deeper into the box model by taking a closer look at padding and margins and see how these box properties effect our images and text. CSS gives us complete control over padding and margins, as well as some handy shorthand CSS properties, that really cut down on the typing we need to do.

Lesson  9: Borders

In this lesson we take our final look at the CSS box model by looking at borders and the twenty CSS properties available to use with them. Don't let the amount of CSS properties available for borders fool you into thinking they are complex though, because borders are very simple to understand and use. Borders have colour, style and width attributes that can be set using CSS. The twenty tags available for use with borders are used to set these values individually for each border, or for all borders using some neat shorthand CSS properties.

Lesson  10: CSS Basics Summary

To conclude the CSS Basics Tutorials section, we bring all we have learnt together in a web page utilizing the knowledge we have gathered so far. We will use a selection of the CSS properties from the CSS Basics section and see what can be achieved with them.

Related Tutorials/Quizzes

CSS Intermediate - The Intermediate Lessons.

CSS Advanced - The Advanced Lessons.

What's Next

In Lesson 1 we gather the tools required to create our first HTML page using CSS and make a folder to store our CSS Basic practical files in. We do our first practical and view the results in a default web browser.

Next >> Starting Out

go to home page Homepage go to top of page Top