FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 663

What are the different types of Cascading Style Sheets?


2021-11-15 15:44 · 7 min read

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 overrides 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.

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>

 

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.
 

Example

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>

 

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 an 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>

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer