Before learning CSS?

How Can We Help?
< All Topics

Before learning CSS?

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

Since we are going to use CSS to style the HTML elements, having a basic knowledge of 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>

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 separate file with CSS code saved in it .css format

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

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

Internal Style Sheets

If an HTML document needs a unique style that 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 adding 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.

CSS SYNTAX

The basic CSS syntax is shown below.

p {
color: red; 
font-size:10px;
}

Syntax Explained

The above syntax is explained below using tables.

p {color:red;font-size:10px;}
Selector Declaration

In the declaration part, properties are given values shown below.

color : blue
Property Value

A working CSS example of the above code is given below.

<html>
<head>

<style>
	p{
	  color: red; 
	  font-size:20px;
	}
</style>

</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

Table of Contents