Types of CSS (Cascading Style Sheet) - GeeksforGeeks

30 Jul, 2021
Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color, ... etc property of elements on a web page. There are three types of CSS which are given below:  
Inline CSS
Internal or Embedded CSS
External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. Example:  
html
<!DOCTYPE html><html>    <head>        <title>Inline CSS</title>    </head>          <body>        <p style = "color:#009900; font-size:50px;                font-style:italic; text-align:center;">            GeeksForGeeks        </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:  
html
<!DOCTYPE html><html>    <head>        <title>Internal CSS</title>        <style>            .main {                text-align:center;             }            .GFG {                color:#009900;                font-size:50px;                font-weight:bold;            }            .geeks {                font-style:bold;                font-size:20px;            }        </style>    </head>    <body>        <div class = "main">            <div class ="GFG">GeeksForGeeks</div>                          <div class ="geeks">                A computer science portal for geeks            </div>        </div>    </body></html>              
Output:  
External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, ... etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.Example: The file given below contains CSS property. This file save with .css extension. For Ex: geeks.css  
body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.GFG {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#geeks {
    font-style:bold;
    font-size:20px;
}
Below is the HTML file that is making use of the created external style sheet  
link tag is used to link the external style sheet with the html webpage.
href attribute is used to specify the location of the external style sheet file.
html
<!DOCTYPE html><html>    <head>        <link rel="stylesheet" href="geeks.css"/>    </head>      <body>        <div class = "main">            <div class ="GFG">GeeksForGeeks</div>            <div id ="geeks">                A computer science portal for geeks            </div>        </div>    </body></html>
Output:  
Properties 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. 
As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.
Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet then external style sheet rules are applied for the HTML tags.
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
GAURAVKESHARI
ysachin2314
CSS-Basics
Picked
CSS
HTML
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?