What is CSS3 Style Sheet?

Style Sheet is a collection of rules that we can easily apply on the HTML Web Page. Style Sheet is used to make a better, good looking, attractive, and responsive website. In this tutorial, we will learn how can we use Internal, Inline, and External Style Sheets.

</Different Types of Style Sheets?>

CSS comes with three types of Style Sheets (i.e. Inline Style-Sheet, Internal Style-Sheet, and External Style-Sheet). We can use These Cascading Style-Sheets as per their requirements during designing the Web Page.

Inline StyleSheet

An inline StyleSheet is used to apply CSS properties on a specific element(Tag Name). Inline Style override any CSS property in a <style> tag or any external style sheet connected to it. We can create different stylesheets for different Tags.

Example

Here is a simple example of a button tag. Click on Try it Yourself button to Run the code.

By using some CSS properties we can easily create a button.

				
				<button type="submit" style="color:white;
				background-color:rgb(0, 102, 255);padding:10px 35px;
				border:none;border-radius:5px">
				Press Me
				</button>

Here color, background-color, padding, border-radius, etc. are the CSS properties with their values, by using which we are designing a button.

Note: If your website contains multiple pages with the same CSS properties then always use External StyleSheet. It is very time-consuming to write CSS code by using the Inline Style Sheet.

				
					<!DOCTYPE html>
				<html>
					<!--HTML Head-->
					<head>
						<title>Button</title>
					</head>

					<!--HTML Body-->
				<body>

				<button type="submit" 
				style="color:white;background-color:rgb(0, 102, 255);
				padding:10px 35px;border:none;border-radius:5px">
				Press
				</button>

				</body>
				</html>

Try it Yourself

Internal Style Sheet

We write the CSS code in <style></style> tag within an HTML Document. If we are working on different UI designs on our website then we can use the Internal Style Sheet.

Here is a simple example of an Internal Style Sheet.

			
			<style>
			.css-class-name{
				property: value;
				property: value;
				property: value;
			}
			</style>

We have an HTML Button tag with a class "tdb-school" for applying CSS Rules by an Internal Style Sheet.

Note:<style></style> tags must be inside the <head> element for HTML validation. Use Internal Style Sheet only when your web page's design is different from all other web pages.

				
				<!DOCTYPE html>
				<html>
				<head>
				<style>
					.tdb-school{color: white;
					background-color: rgb(0, 102, 255);
					padding: 10px 35px;
					border: none;
					border-radius: 5px}
					</style>
				</head>

				<!--Body-->
				<body>
					<button type="submit" class="tdb-school">
					Press
					</button>
				</body>
				</html>

Try it Yourself

External Style Sheet

An External Style Sheet is used for applying similar CSS properties on multiple web pages by linking an External CSS file with your web pages. For connecting CSS file we use <link> element in each HTML document.

Example

Here we can see a simple example of an External Style Sheet.

				
				<head>
				<link rel="stylesheet" href="style.css"/>
				</head>

Here we are using a link tag for connecting external style sheets to our web pages. When it is connected successfully then you can write CSS code on style.css file and you can see the effect on your web page.

It's a good practice to use external stylesheet while working on similar types of web page designs. Always use <link> tag in the HTML Document's <head> tag.

				
				<!DOCTYPE html>
				<html>
				<!--Head-->
				<head>
				<!--We can link multiple external style-sheets
				to our html web page-->
					<link rel="stylesheet" href="style.css"/>
				</head>

				<!--Body-->
				<body>
					<button type="submit" class="tdb-school">Press</button>
				</body>
				</html>

Try it Yourself

CSS3 STYLE SHEET

</CSS3 STYLE SHEETS>

What is CSS3 Style Sheet?

</Different Types of Style Sheets?>

Inline StyleSheet

Example

Internal Style Sheet

External Style Sheet

Example