Css3
You can now make your browser say “Hello World”. You have built this big simple web page but before rejoicing take a look at the picture below.
a web page with css


a-web-page-without-css
What do you notice? If am not mistaken, the two images contains the same content but one appear visually attractive than the other. The image with the good look is the work of css.
 In this guide I will be walking you thru Css. At the end of this post you will know what Css is all about, what makes css crucial, Css syntax and selectors and how Css can be inserted into your Html document?
Before proceeding, you should be familiar with;
  •  Web pages Layout
  • Creating simple web pages with text editors.
  •  Internet browsing using popular browsers like Google chromes, Mozilla Firefox, Apple safari etc.

If you are not familiar with that or you are new to HTML, I suggest you go through this post: HTML [An introductory guide to web design and development].

What is Css?

Css is an acronym for Cascading Style Sheet. It is a simple design language used to control the style of a web page. I want you to relate web design to building a house, just like a house, HTMl is the foundation, Css is the interior and exterior decoration of the house. With Cascading Style Sheet you can define styles for web pages, including design and layout in a simple manner.
Css was invented by Hakon Wium Lie on October 10, 1994 and they come in different versions which are Css, Css2, and Css3 which is the latest version of Cascading Style Sheet.

What makes Cascading Style Sheet  Vital in web design?

Css saves time:  you can write Css once and reuse the same sheet in multiple HTML pages.
Pages load faster: If you are using Css, you do not need to write HTML tag attributes every time. All you just need to do is to write one Css rule of a tag and apply it to all the occurrence of that tag. So less code means faster web loading speed.

Css syntax and Selectors

Syntaxes are structures of statements in a computer language
Cascading style sheet rule set comprises of a selector and a declaration block. In Css the selector  picks out the HTML element you want to style and the declaration block contains one or more declaration separated by semicolons. Each declaration block comes in come in property/value pairs like: property: value;
Note: A Css declaration must always end with semi colons and must be enclosed with curly braces.
In the following example all <h1> elements will be center-aligned, with a red text color:
h1 {
    color: blue;
    text-align: center;
}

There are different types of selectors. Selectors are used to pick out HTML elements based on their element name, id, class, attributes etc.

Element Selectors

The element selector selects element based on element name. For example you could pick out alll <h1> elements on a page like this

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

Id selectors

The id selector allows you to style the id attribute of an HTML element. It is used to select one unique element. The id of an element should be unique within a page,to select an element with a specific id, just write a hash (#) character, followed by the id of the element. The Css style rule will be applied to the HTML element with id=”header”. An example is shown below.
<!DOCTYPE html>
<html>
<head>
<title>ThePage Title</title>
<style>
#header {
    text-align: center;
    color: red;
}
</style>
</head>
<body>
<h1 id=”header”></h1>
</body>
</html>

Class Selector

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
In the example below, all HTML elements with class="header" will be red and center-aligned:

<!DOCTYPE html>
<html>
<head>
<title>ThePage Title</title>
<style>
.header {
    text-align: center;
    color: red;
}
</style>
</head>
<body>
<h1 class=”header”></h1>
</body>
</html>
Note:An id and class selector can’t start with a number.

Grouping Selectors

It is best to group selectors when more than one element has the same style definition

If you have elements with the same style definitions, like this:
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
You can group the selectors by separating each selector with a comma (,)
The example below show a grouped selector from the code above
h1, h2, p {
    text-align: center;
    color: red;
}

How can css be inserted into our HTML document?

There are three ways css can be inserted into an HTML document

  1. Inline Style
  2. Internal Style Sheet
  3. External Style Sheet

Inline style

Css can be added to a web page by using the inline style. To do this all you just need to do is to use the style attribute to define style rules. These rules will be applied to the element only. You can look at the example below to understand it better
<h1 style=”text-align: right; color: red;”>Heading</h1>

In the example above only the <h1> with the style attribute will be right aligned and have a text color of red.

Internal style sheet

Internal styles are defined within the <head> element, inside the <head> section of an HTML page i.e. a style tag is opened within the head tag and all the css syntax are written in the style tag.
An example is shown below

<!DOCTYPE html>
<html>
<head>
<title>ThePage Title</title>
<style>
body {
   background-color: #ffffff;
}
#header {
    text-align: center;
    color: red;
}
p {
    text-align: right;
    color: green;
}


</style>
</head>
<body>
<h1 id=”header”></h1>
<p>Paragraph 1</p>
</body>
</html>

External style sheet

External style sheet allows you change the design of an entire website by changing one file. An external style sheet is a separate text file saved with .css extension (i.e. the name of the file.css). In the external style sheet all the css syntaxes are written in there and then linked to the HTML document.
To link the external style sheet to the HTML document the link tag is used (<link>) and must be placed between the head tag (<head>)
<head>
  <title>ThePage Title</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Now we all know what Css is all about, what makes Css important in web design, Css syntax and selectors and how Css can be inserted into your Html document.

If you find this article useful kindly share this on your faavourite social media page.