-
Hajipur, Bihar, 844101
CSS How To
CSS How To explains the different ways CSS can be added to HTML documents. Before applying styles to a webpage, you need to know how and where CSS code should be written. CSS can be applied using inline styles, internal styles, or external styles. Each method has its own use cases, advantages, and limitations. In this chapter, you will learn how to use CSS in real webpages, when to use each method, and best practices for applying CSS effectively.
What Does “CSS How To” Mean
CSS How To refers to the methods used to include CSS in HTML. It explains how browsers read CSS rules and apply them to elements. Understanding these methods is important because the way CSS is added affects performance, maintenance, and scalability of a website.
Ways to Apply CSS
There are three main ways to apply CSS to HTML documents:
-
Inline CSS
-
Internal CSS
-
External CSS
All three methods use the same CSS syntax. Only the placement of the code changes.
Inline CSS
Inline CSS is written directly inside an HTML element using the style attribute. This method applies styles only to that specific element.
Syntax
<tag style="property: value;">
Example
<p style="color: blue; font-size: 16px;">
This paragraph uses inline CSS.
</p>
When to Use Inline CSS
Inline CSS is useful in limited situations:
-
Quick testing of styles
-
Applying unique styles to a single element
-
Email templates with restricted styling support
Disadvantages of Inline CSS
Despite being simple, inline CSS has several drawbacks:
-
Styles cannot be reused
-
HTML becomes cluttered
-
Hard to maintain and update
-
Overrides other CSS unintentionally
Because of these issues, inline CSS is not recommended for large or professional projects.
Internal CSS
Internal CSS is written inside a <style> tag placed within the <head> section of an HTML document. It applies styles to the entire page.
Syntax
<style>
selector {
property: value;
}
</style>
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: green;
}
p {
font-size: 15px;
}
</style>
</head>
<body>
<h1>CSS How To</h1>
<p>This page uses internal CSS.</p>
</body>
</html>
When to Use Internal CSS
Internal CSS is useful when:
-
Styling a single webpage
-
Testing layouts quickly
-
Creating demo or sample pages
Disadvantages of Internal CSS
Internal CSS also has limitations:
-
Styles cannot be reused on other pages
-
Increases page size
-
Hard to manage for large websites
External CSS
External CSS is written in a separate .css file and linked to HTML using the <link> tag. This is the most commonly used and recommended method.
Syntax
<link rel="stylesheet" href="style.css">
Example
HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS How To</h1>
<p>This page uses external CSS.</p>
</body>
</html>
CSS file (style.css)
body {
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
p {
font-size: 16px;
}
Advantages of External CSS
External CSS offers many benefits:
-
One CSS file can style multiple pages
-
Easy to maintain and update
-
Keeps HTML clean and readable
-
Improves website performance with caching
-
Ideal for large and professional websites
How Browsers Load CSS
When a browser loads a webpage, it follows these steps:
-
Reads the HTML file
-
Finds CSS links or style blocks
-
Downloads external CSS files
-
Applies CSS rules to matching elements
-
Renders the final styled page
Understanding this process helps you write better CSS and avoid performance issues.
CSS Priority When Using Multiple Methods
When more than one CSS method is used, priority is determined as follows:
-
Inline CSS (highest priority)
-
Internal CSS
-
External CSS (lowest priority)
Example
If the same element is styled using all three methods, the inline style will be applied.
Best Practices for Using CSS
To write clean and effective CSS:
-
Prefer external CSS for styling
-
Avoid inline CSS unless necessary
-
Keep CSS files organized
-
Use meaningful class names
-
Comment important sections
-
Avoid repeating styles
Following best practices makes your code easier to manage and scale.
Common Beginner Mistakes
Some common mistakes include:
-
Mixing all three CSS methods unnecessarily
-
Forgetting to link the CSS file
-
Using inline CSS everywhere
-
Writing duplicate styles
-
Ignoring CSS priority rules
Avoiding these mistakes helps maintain clean styling.
CSS How To in Real Projects
In real-world development:
-
External CSS is used for main layouts and themes
-
Internal CSS is used for page-specific tweaks
-
Inline CSS is used rarely and carefully
This balanced approach keeps websites flexible and maintainable.
Summary of CSS How To
CSS How To explains the different methods of applying CSS to HTML documents. Inline CSS is quick but limited, internal CSS is useful for single pages, and external CSS is the most powerful and recommended method for professional websites. Understanding how browsers load CSS and how priority works helps you apply styles effectively. By following best practices, you can write clean, reusable, and scalable CSS for any project.
Practice Questions
Q1. Use inline CSS to make a paragraph's text green.
Q2. Use internal CSS to change all <h1> text to blue.
Q3. Use external CSS to change the background color of the page to lightgray.
Q4. Write HTML code to link an external CSS file named main.css.
Q5. Use internal CSS to change all <div> elements to have 20px padding.
Q6. Write inline CSS to set the font size of a paragraph to 18px.
Q7. Use internal CSS to center-align all <h2> headings.
Q8. Use external CSS to make all links have no underline.
Q9. Use internal CSS to set a black border around all images.
Q10. Write the HTML and CSS to apply Arial font to all <body> text using external CSS.
