CSS Introduction

Learn CSS

About Lesson

CSS stands for “Cascading Style Sheets”. This means that the styles flow through the entire application and are applied to elements with the matching identifiers. CSS is a language that describes the style of an HTML element. It describes how an HTML element should be displayed. CSS style blocks are also commonly referred to as rules.

Why use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Types of CSS

There are three types of CSS as below :

Inline styles
Internal (embedded) styles
External styles

Inline CSS:

Inline CSS contains the CSS property in the body section attached with element using the style attribute.

Example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Inline Css</title>
	</head>

	 <body>
	    <p style="color:#009900; font-size: 50px; font-style: italic; text-align: center; ">
	        This is an inline CSS.
	    </p>
	</body>

</html>

Output:

Internal or Embedded CSS:

This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.

Example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Inline Css</title>
		<style>
			body {
				background-color: powderblue;
			}
			.main {
				text-align: center;
			}
			h3.title {
				color: #009900;
				font-size: 50px;
				font-weight: bold;
			}
			p.info {
				font-style: bold;
				font-size: 20px;
                                white-space:wrap;     
			}
		</style>
	</head>

	 <body>
	    <div class="main">
	    	<h3 class="title">This is an internal CSS example</h3>
	    	<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	    </div>
	</body>

</html>

Output:

External CSS:

An external style sheet is a separate file linked to an HTML web page. It comes with a .css filename extension. All the styles that need to be used on a website can be declared in the external style sheet.

Example:
The file below is a CSS file with a .css extension.
Here for example : theme.css

// theme.css
body {
	background-color: powderblue;
}
.main {
	text-align: center;
}
h3.title {
	color: #009900;
	font-size: 50px;
	font-weight: bold;
}
p.info {
	font-style: bold;
	font-size: 20px;
}

Below is an html file where we will be using our above external css file.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>External Css</title>
		<!-- Here we are linking to our external css file -->
		<link rel="stylesheet" href="theme.css">
	</head>

	 <body>
	    <div class="main">
	    	<h3 class="title">This is an external CSS example</h3>
	    	<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
	    </div>
	</body>

</html>

Output:

Priorities of CSS:

Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are defined in multiple style sheets then the below order will be followed.

Embedded or inline style sheet
Internal style sheet
External style sheet