Different Types of CSS with Examples
Free Web development courses with real-time projects Start Now!!
CSS (Cascading Style Sheets) is a vital tool for web developers and designers to enhance the appearance and visual aesthetics of their web pages. CSS allows developers to control the layout, styling, and formatting of HTML elements. There are three primary types of CSS: inline, internal, and external CSS. In this article, we will learn about these different types of CSS with examples. Let’s start!!!
Types of CSS
1. Inline CSS
Inline CSS is the simplest form of CSS, and it is embedded within the HTML tags. It is useful when a single element requires some styling. However, it is not recommended for use on larger projects because it can become difficult to manage the styles as the project grows. Here’s an example of inline CSS:
<p style="color: blue; font-size: 20px;">Dataflair: This text is blue and 20px in size.</p>
Advantages of Inline CSS:
- Quick and easy to use.
- Specific styles can be applied to individual elements.
- Overrides external and internal CSS styles.
Disadvantages of Inline CSS:
- Difficult to maintain and update.
- Increases the size of the HTML file, which can slow down page load times.
- Repeated use of inline styles can lead to inconsistent styling across a website.
2. Internal CSS
Internal CSS is used to apply styles to a single HTML document, and it is placed within the head section of an HTML document. It is useful when working on smaller projects or making changes to a single HTML document. Here’s an example of internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This text is blue and 20px in size.</p>
</body>
</html>
Output
Advantages of Internal CSS:
- Provides more control over styling compared to inline CSS.
- Separates content and presentation, making it easier to maintain and update styles for a specific page or section.
- Overrides external styles for specific elements or sections.
Disadvantages of Internal CSS
- Increases the size of the HTML file, which can slow down page load times.
- Repeated use of internal styles can lead to inconsistent styling across a website.
- Can be difficult to maintain for larger projects.
3. External CSS
External CSS is the most commonly used form of CSS. It involves linking an external style sheet file to the HTML document. External CSS is ideal for larger projects with multiple HTML documents because it allows developers to maintain a consistent look and feel across multiple pages. Here’s an example of external CSS:
In the example above, the CSS code is stored in a separate file called “style.css.” The HTML code links to this file using the <link> tag in the head section. This is the recommended approach for larger projects because it allows developers to make changes to the CSS file without affecting the HTML code.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This text is blue and 20px in size.</p>
</body>
</html>
CSS:
p {
color: blue;
font-size: 20px;
}
Output
Advantages of External CSS
- Separates content and presentation, making it easier to maintain and update styles across multiple pages.
- Promotes consistency in styling across the website.
- Can be cached by the browser, leading to faster page load times.
- Can be reused across multiple pages and websites.
Disadvantages of External CSS
- Requires a separate file, which can add complexity to the project structure.
- Can increase the number of HTTP requests to the server, which can slow down page load times.
CSS Frameworks
CSS frameworks are pre-written libraries of CSS code that simplify the process of styling web pages. They provide a set of ready-made classes and components that developers can use to quickly build responsive and visually appealing websites. A few well-known CSS frameworks include Materialize, Foundation, and Bootstrap.
Here’s an example of using the Bootstrap framework to style a button:
p {
color: blue;
font-size: 20px;
}
In the example above, we link to the Bootstrap CSS file in the head section using a CDN (Content Delivery Network). We then use the “btn” and “btn-primary” classes provided by Bootstrap to style the button.
CSS Preprocessors
CSS preprocessors are scripting languages that allow developers to write CSS code with programming concepts such as variables, functions, and mixins. They make it easier to manage and maintain large-scale CSS projects by reducing the amount of repetitive code and making it easier to write modular and reusable styles. The well-known CSS preprocessors Sass, Less, and Stylus are but a few.
Here’s an example of using SASS to write CSS code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sass Example</title>
<link rel="stylesheet" type="text/css" href="style.scss">
</head>
<body>
<p class="blue-text">This text is blue.</p>
</body>
</html>
CSS:
$blue-color: blue;
.blue-text {
color: $blue-color;
}
Output
In the example above, we define a variable called “blue-color” and assign it the value of “blue.” We then use the variable to set the color of the “blue-text” class.
CSS Animations
CSS animations allow developers to create dynamic and engaging user experiences by adding movement and interactivity to web pages. They can be used to create everything from simple hover effects to complex interactive interfaces. CSS animations are achieved using CSS keyframe animations and transitions.
Here’s an example of using CSS animations to create a hover effect:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Animation Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="hover-effect">Hover over me!</button>
</body>
</html>
CSS:
.hover-effect {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
transition: background-color 0.5s ease;
}
.hover-effect:hover {
background-color: red;
}
Output
In the example above, we use the “transition” property to create a smooth color change effect when the button hovers over.
Difference Between Inline, External, and Internal CSS Styles
CSS (Cascading Style Sheets) is used to add style and formatting to web pages. There are three ways to add CSS styles to an HTML document: inline, external, and internal.
Inline CSS:
Inline CSS is a method of adding CSS styles directly to the HTML element using the style attribute. This method is typically used when you want to add unique styles to a specific element on the page. For example:
CSS
<h1 style="color: red;">Hello World!</h1>
The above code adds a red color to the h1 element using inline CSS.
External CSS:
External CSS is a method of adding CSS styles to an HTML document by linking to an external CSS file. This method is commonly used when you want to apply the same styles to multiple pages on a website. For example, you can create a CSS file named style.css and link to it in the HTML document using the link tag:
<link rel="stylesheet" type="text/css" href="style.css">
The style.css file can contain all the CSS styles for the website, and any changes made to it will be applied to all pages that link to it.
Internal CSS:
Internal CSS is a method of adding CSS styles to an HTML document by placing the styles in the head section of the HTML document. This method is commonly used when you want to apply unique styles to a specific page or a section of a page. For example:
<style> h1 { color: blue; } </style>
In the above code, the CSS styles are placed in the style tags in the head section of the HTML document. This method is useful when you want to apply styles to specific elements on a page, but don’t want to use inline CSS.
Which is Commonly used in CSS?
All three methods of adding CSS styles (inline, external, and internal) are commonly used in CSS, depending on the specific needs of the website or web application. However, external CSS is the most commonly used method because it allows for the separation of content and presentation, making it easier to maintain and update the styles across multiple pages.
Inline CSS is generally used for small, quick changes that only apply to a specific element on a page. It is not recommended to use inline CSS extensively because it can make the HTML code difficult to read and maintain.
Internal CSS is used for styles that apply to a specific page or section of a page, but not to the entire website. This method is useful for creating unique styles for a specific page or section without affecting the rest of the website.
Each type of CSS style has its own advantages and disadvantages, and the choice of which to use depends on the specific needs of the project. Inline CSS is quick and easy to use, but difficult to maintain, while external CSS is the most commonly used and provides more consistency and control. Internal CSS is useful for specific cases where unique styles need to be applied to specific elements or pages.
Conclusion
In conclusion to the article by DataFlair, we can say that CSS is a versatile and essential tool for web development and design. Mastering CSS types, frameworks, preprocessors, and animations enable developers to create visually stunning and highly functional web pages for an exceptional user experience.
Did you like our efforts? If Yes, please give DataFlair 5 Stars on Google
