Summary -

In this topic, we described about the below sections -

HTML Style sheet/CSS used to describe how the HTML elements to be displayed. CSS stands for Cascading Style Sheets. CSS controls the web pages display.

CSS controls multiple web pages display at once. CSS is a language that describes the style of an HTML document. CSS can be added to HTML elements in 3 ways -

  1. Inline
  2. Internal
  3. External

Inline -

In Inline style sheet, the CSS coding can be directly added to elements. Inline style sheet can be added to tag by using the style attribute in HTML elements.

Inline style sheet can be used to apply a style to a single element. Inline style sheet is local to the particular HTML documents where it coded.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Inline style sheet example</title>
	</head>
	<body>
		<p style="color:green;">Green text</p>
	</body>
</html>

Output -

Green text

Internal -

In Internal style sheet, the CSS coding can be added to the HTML document. Internal style sheet can be added to HTML documents by using a <style> element in the <head> section.

Can applying a style to a single or multiple elements. The internal style sheet is local to the particular HTML documents where it coded.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>Internal  style sheet example</title>
		<style>
			p1 { color:Green;}
			pre1 {background-color: coral;}
		</style>
	</head>
	<body>

		<p1>Green text</p1>
		<pre1>Background color is Coral</pre1>

	</body>
</html>

Output -

Green text Background color is Coral

External -

External style sheet is used to define a style for single or multiple elements. External style sheet styles can be imported by multiple HTML documents. The same can be achieved by using an external CSS file.

Mostly the external style sheets can be used in web site design. The entire web site look can be changed if a single CSS file changed. To use the external style sheet in HTML document, add link tag in head section.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>External style sheet example</title>
		<link rel="stylesheet" href="theme.css"> 
	</head>
	<body>

		<p1>Green text</p1>
		<pre1>Background color is Coral</pre1>

	</body>
</html>

Theme.css:

p { color:Green;}
pre {background-color: coral;}

Output -

Green text Background color is Coral

There are three ways to represent the external style sheet.

  1. If the style sheet is in the same location where the current HTML document locates. <link rel="stylesheet" href="theme.css">
  2. If the style sheet is in the root folder of the web site <base href="https://www.tutorialscampus.com"> <link rel="stylesheet" href="theme.css">
  3. If the style sheet is in another directory and needs to provide the full URL of the style sheet. <link rel="stylesheet" href=" css/theme.css">

ID Attribute -

To define a specific style for one of the special element. This can be achieved by adding an ID attribute to the element. ID element is unique in the HTML documents/page.

Syntax -

<tagname id=”property-name”>…HTML Text..</tagname>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>ID attribute example</title>
		<style>
			#p1 { color:Green;}
			#pre1{background-color: coral;}
		</style>
	</head>
	<body>

		<p id="p1">Green text</p>
		<p id="pre1">Background color is Coral</p>

	</body>
</html>

Output -

Green text

Background color is Coral

Class Attribute -

To define a specific style for one or the group of special elements. This can be achieved by adding an Class attribute to the element.

Syntax -

<tagname class=”property-name”>…HTML Text..</tagname>

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>Class attribute example</title>
		<style>
			p.p2 { color:Green;}
			p.pre2{background-color: coral;}
		</style>
	</head>
	<body>

		<p class="p2">Green text</p>
		<p class="pre2">Background color is Coral</p>

	</body>
</html>

Output -

Green text

Background color is Coral