CSS Getting Started - CSS - dyclassroom

In this tutorial we will be learn about the different ways to style a web page using CSS. So, open your favourite text editor or IDE and start coding.

Project Folder

Create a project folder and give it a name. For this tutorial I will be creating a project folder on my computer and will name it "css-tutorial".

Now inside the project folder create a new folder and name it "css". This folder will store stylesheets.

At this point the project folder will look like the following.

The index.html page

CSS is used to style a web page so we will be using the following index.html page.

<!DOCTYPE html>
<html>
	<head>
		<title>Index Page</title>
	</head>
	<body>
		<h1>Introduction</h1>
		<p>This is a sample paragraph.</p>
		<p>The second paragraph.</p>
		<p>Last para.</p>
	</body>
</html>

At this point the project folder will look like the following.

Different ways to style the html page

There are 3 ways to style a html page.

Inline style
Embedded style
EXternal style

Inline style

In this method the style attribute is applied to the HTML element. Following is an example of Inline style.

<h1 style="color : red;">Introduction</h1>

In the above line we are setting the color of the header h1 to red using the inline style.

Inline style will only affect the element on which it is applied. So, in the above example only that header is colored to red and other headers will not be affected.

Embedded style

In this method all the styles to be applied to the document are grouped together in the head tag. The style rule is applied to the entire HTML page. Following is an example in which we are setting the font-size of all the paragraph element to 16px.

<style>
p {
  font-size : 16px;
}
</style>

The above style is placed inside the head tag and the style rule is applied to all the paragraph element of the page.

External style

In this method we create a stylesheet file and write the style rules in that file. Then we include the stylesheet in the file (say index.html) that we want to style.

Example: We have created a stylesheet file default.css in the css folder. The file contains the following rule.

p {
	font-size : 16px;
}

At this point the project folder will look like the following.

Now we include the stylesheet default.css in the index.html file in the head tag.

<!DOCTYPE html>
<html>
	<head>
		<title>Index Page</title>
		<link href="css/default.css" rel="stylesheet">
	</head>
	<body>
		<h1>Introduction</h1>
		<p>This is a sample paragraph.</p>
		<p>The second paragraph.</p>
		<p>Last para.</p>
	</body>
</html>

Points to remember

Inline style

Pros: It is easy to set.

Cons: Very hard to maintain. And not the best options.

Imagine you have multiple pages each having hundreds of paragraphs. If all those p elements are using inline-style then making change to the style properties will be really painful as you have to go to each of the paragraph element and change its inline-style.

Embedded style

Pros: This is better than inline-style.

If you want to set style properties of all the paragraphs in the page in one go then this is useful.

Cons: Only for the page where it is created. If you want same style rules for all the pages then you have to define the embedded-style in all the pages.

External style

Pros: Create your logic once and apply it to all pages.

Cons: If the external style sheet fails to load then all the pages of the website will lose their style.