Learning CSS

CSS is used to define how the HTML elements are displayed in the browser.

What you need before learning CSS?

Before learning CSS, you should have basic knowledge about HTML.

Since we are going to use CSS to style the HTML elements, having the basic knowledge about HTML is a must before learning CSS.

A Sample HTML Table with CSS

In the below code, a sample HTML Table is displayed using a Style Sheet. As you can see, the look and feel of the table is completely different than a normal HTML table without CSS.

Example


<table  border="1">
<tr>
	<td>Row1,Column1</td>
	<td>Row1,Column2</td>
</tr>
<tr>
	<td>Row2,Column1</td>
	<td>Row2,Column2</td>
</tr>
</table>
		

Preview

The Style Sheet used to style the above table is given below for reference.

Don't worry if its hard to understand, this is just the start of the CSS tutorial, you will learn it all in the following tutorials.


<style>
body{
	 background-color:#FFEBF0;
}
thead {
	  background-color:#ADDFE7;
}
table{
	  width:100%;
}
</style>
		

There are 3 methods through which you can add CSS to the HTML document.

  • External Style Sheet
  • Internal Style Sheet
  • Inline Style.
External Style Sheets

If you are planning on using the same style sheet again and again for many pages, your ideal choice would be External Style Sheets.

An External Style Sheet is a seperate file with CSS code saved in .CSS format

It is linked to the HTML page using <link> tag like shown below.


<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
		

Internal Style Sheets

If a HTML document needs a unique style which is not going to be reused, Internal Style Sheet would be the ideal choice.

Internal Style Sheets are added to the HTML document in the head section using the <style> tag as shown below.


<head>
<style>
body{
	 background-color:#FFEBF0;
}
thead {
	  background-color:#ADDFE7;
}
table{
	  width:100%;
}
</style>
</head>
		

Inline Style

It is not a good practice to use Inline Style Sheets as it requires to add styles directly to the tags. Use it only if you feel very lazy to use the other two methods.

Inline Styles are added directly inside the tags as shown below.


<table style:"width:100%; height:100%">
		

Multiple Style Sheets

If multiple style sheets are used on the same page, the browser's priority will be based on the following order.

  1. Inline Styles.
  2. Internal Style Sheets.
  3. External Style Sheets.
  4. Browser's Default Styles.

Next Lesson > CSS Syntax