CSS Tutorial

CSS Startup

Welcome to the beauty of the World Wide Web. 

With the fact that CSS does not have any standard substitute to replace it, it is also a simple and straight-forward language to learn.
CSS is used to format and beautify your webpage. It is much like cosmetics used by women to beautify their skins and their look.

Sit back and enjoy this lesson!

Getting into CSS

  • Please you are expected to know HTML before learning the CSS. If not, kindly move to our HTML Tutorial section to learn it first.

Writing a CSS Document

A CSS code is made of a selector, followed by the style properties in curly brackets {...}.

selector
{
propertyName : value; 
}

These properties are lists of easy-to-learn keywords that make you leverage the use if CSS, you will learn a lot about these properties (keywords) in later chapters.

Advantage of CSS

  • CSS saves a lot of work, as it can be used to control the styles and designs of multiple web pages at once!
  • CSS gives a chance to reveal your creativity on a website
  • CSS provides more formatting options for your HTML elements.

CSS Examples

Below are some CSS examples you can play with.

body
{
  background : green;
  width : 100%;
}

p
{
  color : white;
}

table
{
  width:100%;
  border-collapse : collapse;
}
 
  Do It Yourself

Using CSS in HTML

As stated in our HTML CSS lesson, there are three different ways you can use CSS in your HTML.

  • Declaring a style attribute in an HTML element (Inline method)

(like what we've been doing in previous lessons).

  • Using a <style> element in the <head> section of the document. (Internal method)
  • Importing a CSS from a different file into the document (External method).

The most common way of using CSS is by importing an external file of it.

CSS - Declaring a style Attribute in an HTML Element (Inline method)

This method is done by defining a style attribute in the start tag of an HTML element.

The CSS codes in now placed as the attribute value:

Example

<p style="color:green;"></p> /* This sets the text color of all <p> elements (paragraphs) to green. */
  Do It Yourself

CSS - Declaring a <style> tag in HTML (Internal method)

This method is done by placing the <style></style> elements in the <head> section of the document.

The CSS codes now placed between these elements.

Example

CSS - Importing an external file into the HTML document (External method)

This method is done by using the <link> element with the href attribute to indicate the source of the CSS file.

<link href="Container.css" type="text/css" rel="stylesheet" />
Please note that the additional attributes also indicates that you are importing a CSS file.

What You Should Know at the End of This Lesson

  • You should be able to understand what CSS is.
  • You should know what CSS stands for.
  • You should be able to write a simple CSS code based on the above examples.
Previous Chapter Next Chapter

Related Chapters