Types of CSS

Cascading Style Sheets or CSS for short can be used to set the style in web pages that contain HTML elements. It’s an essential part of website design because it sets background colors and font sizes along with other properties like font families and color combinations for various parts on each webpage; all while keeping your layouts organized! This article will help you understand the types of CSS and when they should be used in your project.

Types of CSS:

1) The first type is called “internal” style, which are styles that are applied directly to HTML elements with a style attribute or by placing them between <style></style> tags in the head section at the top of your document:

Syntax:

<head> 
<style> body{property:value} </style>
</head>

Example:

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

2) The second type is embedded stylesheets, which are external files saved with a .css extension and linked from within your HTML document:

Syntax

<link href="file path" rel="stylesheet">

Example:

body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.GFG {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#geeks {
    font-style:bold;
    font-size:20px;
}

3) Finally, there are inline stylesheets (sometimes referred to as a style tag), which are types of CSS that can be used on a single HTML element by using the “style” attribute:

Syntax:

<tag style="property:value">

Example:

<p style = "color:#009900; font-size:50px; font-style:italic; text-align:center;">
GeeksForGeeks
</p>

When to Use Them:

Inline Stylesheets – this is usually best for small projects or styles that will not need to be reused. In general, inline styling should only really be used if you need to style a single element, like an image or paragraph. This is because inline styles are applied directly to the HTML element and won’t be reusable for other elements on your website.

Internal Style Sheet – this can be used if you need to make changes across multiple pages of your site (this also makes it easy to update all types of styling changes if your website needs to be updated with new content). The only downside is that the CSS style definitions will need to go in between HEAD tags.

Embedded or External Style Sheet – this CSS is used when you want most of your styling information saved into a separate file, which makes it easier for any changes needed on the site (this also pairs nicely with the separation of content and design). The only downside is that you will need to link your HTML document to the style sheet in order for it to be used.

When styling websites, each type should really be reserved for specific types of changes or pages on a site because there are advantages and disadvantages associated with using them – one size does not fit all!

Pros and cons

There are advantages and disadvantages to all types of CSS.

Internal Stylesheets:

  • Internal styles can be used across multiple pages of your site
  • The types of styling changes are easy to update if the website needs to be updated with new content
  • There can be a lot of types of styling definitions in the head tag which makes it hard to read
  • If there are changes needed on the site, it might take longer for them to get updated because you would need to update the types of styling definitions in between HEAD tags

Embedded or External Style Sheet:

  • This is best when you want most types of styling information saved into a separate file so that any changes needed on the site will be easier to make
  • This type of CSS pairs nicely with the separation between content and design – you can have a designer work on style changes for your site while another person works on updating the types of HTML elements
  • The negative side is that there might not be any types of styling information saved into a separate file which makes it hard to update if the types of styling changes need to be made
  • If there are types of HTML elements that you don’t want included in the style sheet, then each time it would have to be added which makes updates take longer.

Inline Stylesheets:

  • This is usually best for small projects or types of CSS styles that will not need to be reused.
  • This types of CSS is applied directly to the HTML element so it will not be reusable for other elements on your website
  • The positive side of this types of CSS is that there won’t be any types of styling information saved into a separate file which makes updates easier if needed
  • If types of styles are needed for multiple types of HTML elements, then it might take longer to get done because you would need to add the types of styling definitions in between each individual type.
  • If there are types of styles that will not be reused, this is usually best
  • The positive side about using Internal Stylesheets is that they can be used across multiple pages of your site
  • The types of styling changes are easy to update if the website needs to be updated with new content
  • There can be a lot of types of styling definitions in between HEAD tags which makes it hard to read
  • Negative side is that there might not any types of styles saved into a separate file which means that types of updates might take longer

Some types of CSS are better for specific types of changes or types of styling elements. It really depends on the type of project you are working on what types of CSS will work better for you.

Conclusion:

There are a number of different types of CSS and each one is best suited for certain occasions. This article will help you understand the types of CSS when they should be used in your project, how to implement them properly and give some examples where it’s been implemented successfully before. We hope this information has helped prepare you for working with cascading style sheets!

Also, Read: CSS transform-origin

Follow us on Facebook

Leave a Comment