Do you think IIT Guwahati certified course can help you in your career?
Introduction
When we create any website, the look and feel of the pages are as crucial as the content. To solve this problem, we have a fantastic tool known as Internal CSS. Internal CSS is a way to add styles to a web page by including CSS rules within the HTML document itself. It allows you to define the look & feel of your website directly in the HTML file, which makes it easier to manage & maintain your styles in one place. This approach allows designers to style individual pages with unique aesthetics without altering the entire site’s theme.
In this article, we'll discuss how to use internal CSS, its syntax, advantages, & disadvantages. We'll also provide examples to help you understand how to implement internal CSS effectively in your web projects.
How to Use Internal CSS?
To use internal CSS, you need to include the CSS rules within the <style> tag in the <head> section of your HTML document. The <style> tag is specifically used to define the internal stylesheet for a web page.
When you open the <style> tag, you can start writing your CSS rules inside it. These rules will be applied to the HTML elements on that particular page only. This means that the styles defined within the <style> tag will not affect other pages on your website unless you repeat the same internal CSS on those pages as well.
By placing the CSS rules inside the <head> section, you ensure that the styles are loaded and applied before the browser renders the content of the page. This allows for a more consistent and controlled styling of your web page elements.
One of the benefits of using internal CSS is that you can keep your HTML and CSS code together in a single file. This makes managing and maintaining your styles easier, as you don't need to switch between different files or worry about linking external stylesheets correctly.
Syntax
The syntax for internal CSS is very simple. Let’s see how you can write CSS rules inside the <style> tag:
1. <style>: This is the opening tag that indicates the start of the internal stylesheet.
2. selector: This is the HTML element, class, or ID that you want to style. It can be a tag name (e.g., h1, p), a class name preceded by a dot (e.g., .classname), or an ID preceded by a hash (e.g., #idname).
3. {}: The curly braces enclose the CSS properties and their corresponding values for the selected element.
4. property: This is the CSS property you want to apply to the selected element. Examples of this property are color, font size, background color, margin, and padding.
5. value: This is the value assigned to the CSS property. It can be a color code, a length unit (e.g., pixels, em), a keyword (e.g., bold, center), or any other valid CSS value.
6. </style>: This closing tag indicates the end of the internal stylesheet.
Note: You can include multiple CSS rules within the <style> tag, targeting different elements or applying various styles to the same element. Each rule should be separated by a semicolon (;) to ensure proper parsing by the browser.
Example
This is an example of how you can use internal CSS to style a simple HTML page:
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.5;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<p class="highlight">This paragraph is highlighted.</p>
</body>
</html>
Output
In this example:
1. The <style> tag is placed inside the <head> section of the HTML document.
2. The body selector targets the entire <body> element & sets the font family to Arial or a sans-serif fallback, & the background color to a light gray (#f2f2f2).
3. The h1 selector targets all <h1> headings & sets their color to a dark gray (#333) & centers the text.
4. The p selector targets all <p> paragraphs & sets their color to a medium gray (#666) & adjusts the line height to 1.5 for better readability.
5. The .highlight class selector targets elements with the class "highlight" and applies a yellow background color and bold font weight to them.
When you open this HTML file in a web browser, you'll see the styles applied to the respective elements. The <h1> heading will be centered with a dark gray color, the paragraphs will have a medium gray color & increased line height, & the paragraph with the "highlight" class will have a yellow background & bold text.
Adding Internal CSS to the Head Section
When using internal CSS, placing the <style> tag containing your CSS rules inside the <head> section of your HTML document is important. In the <head> section, you put meta information, document title, and other relevant data that is not directly visible on the web page.
This is an example of how you can add internal CSS to the <head> section:
<html>
<head>
<title>My Web Page</title>
<style>
/* Your CSS rules go here */
body {
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
.container {
max-width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
<p>This is the main content area.</p>
</div>
</body>
</html>
Output
In this example, the <style> tag is placed within the <head> section, & it contains several CSS rules:
1. The body selector sets the font family for the entire document to Arial or a sans-serif fallback.
2. The h1 selector targets <h1> headings & sets their color to a dark gray (#333).
3. The .container class selector defines a maximum width of 960 pixels for elements with the class "container" & centers them horizontally using auto margins.
By placing the <style> tag in the <head> section, you ensure that the styles are loaded & applied before the browser renders the content of the page. This prevents any unstyled content from being displayed briefly before the styles are loaded, known as a "flash of unstyled content" (FOUC).
Note: It's a best practice to keep your CSS separate from your HTML by using external stylesheets. However, for small projects or quick styling, using internal CSS in the <head> section can be a convenient & effective way to apply styles to your web page.
Syntax and Structure
Let's take a closer look at the syntax and structure of internal CSS:
1. <style>: This tag is used to define the internal stylesheet within the HTML document. It is placed inside the <head> section.
2. selector: A selector is used to target specific HTML elements or groups of elements that you want to style. Selectors can be element names (e.g., h1, p), class names (.classname), IDs (#idname), or a combination of these.
3. {}: The curly braces are used to enclose the CSS declaration block, which contains one or more property-value pairs.
4. property: A CSS property is a style attribute that you want to apply to the selected element(s). Examples include color, font size, margin, padding, etc.
5. value: The value is assigned to a CSS property to define the specific style. It can be a color code, a length unit, a keyword, or any other valid CSS value.
6.: Each property-value pair within a declaration block should be separated by a semicolon. It is important for the browser to parse and apply the styles correctly.
7. </style>: This closing tag signifies the end of the internal stylesheet.
You can include multiple CSS rules within the <style> tag, each targeting different elements or applying various styles to the same element. It's important to follow proper syntax and structure to ensure that your styles are applied correctly.
Let’s see an example that shows the syntax and structure of internal CSS:
In this example, we have four CSS rules defined within the <style> tag:
1. The body selector targets the <body> element and sets the font family and background color.
2. The h1 selector targets <h1> headings and sets their color, font size, and bottom margin.
3. The p selector targets <p> paragraphs and sets their color and line height.
4. The .highlight selector targets elements with the class "highlight" and applies a yellow background color and bold font weight.
Advantages of Internal CSS
1. Easy to set up: Internal CSS is straightforward to implement. You simply need to add the <style> tag within the <head> section of your HTML document & start writing your CSS rules. There's no need to create & link a separate CSS file.
2. No external file dependency: With internal CSS, you don't need to rely on an external CSS file. All the styles are contained within the HTML document itself, making it self-sufficient. This can be beneficial when you have a small website or a single-page application.
3. Quick for small projects: If you have a small project or a web page that doesn't require extensive styling, using internal CSS can be a quick & efficient way to apply styles. You can easily add a few rules within the <style> tag & have your page styled quickly.
4. Easier to test and debug: When using internal CSS, you have all the HTML and CSS code in one place. This makes it easier to test and debug your styles. You can quickly make changes and see the results immediately without switching between multiple files.
5. Overriding external styles: Internal CSS is more specific than external CSS. This means that if you have conflicting styles between internal and external CSS, the internal styles will take precedence. This can be useful when you want to override certain styles for a specific page without affecting other pages that use the same external stylesheet.
6. Faster loading times: Since the CSS is included within the HTML document, there's no need for an additional HTTP request to fetch an external CSS file. This can slightly improve the loading speed of your web page, especially if you have a small amount of CSS.
7. Encapsulation: Internal CSS allows you to encapsulate styles within a single HTML document. This can be advantageous if you want to create self-contained web pages or modules that can be easily shared or embedded without worrying about external dependencies.
Disadvantages of Internal CSS
1. Limited reusability: When using internal CSS, the styles are specific to a single HTML document. If your website has multiple pages requiring the same styling, you would need to duplicate the CSS code in each page's <style> tag. This can lead to code duplication & make maintenance more difficult.
2. Lack of modularity: Internal CSS tightly couples the styles with the HTML document. This lack of separation between the structure (HTML) and presentation (CSS) can make the code less modular and harder to maintain, especially as the project grows in size and complexity.
3. Difficult to manage in large projects: If you have a large website with many pages, managing styles using internal CSS can become cumbersome. Making global changes to the styles would require editing each individual HTML file, which can be time-consuming & error-prone.
4. Reduced caching efficiency: When using internal CSS, the styles are included within the HTML document itself. This means that whenever the HTML page is loaded, the browser needs to download & parse the entire document, including the CSS. If the CSS were in a separate external file, the browser could cache it separately, resulting in faster subsequent page loads.
5. Limited collaboration: Internal CSS can make collaboration among developers more challenging. If multiple developers are working on the same project, they would need to modify the same HTML files to make styling changes, which can lead to conflicts & version control issues.
6. Decreased code maintainability: As the amount of CSS code within the <style> tag grows, it can become harder to read, understand, & maintain. Mixing HTML & CSS in the same file can make the code less organized & harder to navigate, especially for other developers who may work on the project.
7. Not suitable for responsive design: If you're building a responsive website that needs to adapt to different screen sizes and devices, using internal CSS can be less efficient. External CSS files allow you to use media queries and create separate stylesheets for different breakpoints, making responsive design easier to implement and maintain.
Frequently Asked Questions
Can internal CSS be used in combination with external CSS?
Yes, you can use both internal & external CSS in the same HTML document. The styles defined in the internal CSS will take precedence over conflicting styles in the external CSS file.
Is internal CSS case-sensitive?
Yes, CSS is case-sensitive. Property names, selectors, & values must be written in the correct case for the styles to be applied properly.
Can internal CSS be used to style multiple HTML elements at once?
Yes, you can target multiple HTML elements with the same CSS rule by separating the selectors with commas. For example, "h1, p { color: blue; }" will apply the blue color to both <h1> & <p> elements.
Conclusion
In this article, we talked about internal CSS & how it allows you to style web pages by embedding CSS rules within the HTML document itself. We discussed the syntax, structure, & examples of internal CSS, as well as its advantages & disadvantages. While internal CSS can be useful for small projects or quick styling, it's generally recommended to use external CSS files for better maintainability, reusability, & separation of concerns in larger projects.
518+ registered 
