-
Hajipur, Bihar, 844101
HTML CSS
HTML defines the structure of a webpage, but CSS controls how everything looks. CSS allows you to change colors, fonts, spacing, layout and many other visual details. Even though full CSS styling is usually done in external files, HTML supports three different ways to use CSS: inline CSS, internal CSS and external CSS. Understanding these methods helps you build clean, organized and visually appealing webpages.
This chapter explains all three CSS methods, how selectors work, how to apply basic styling and how to choose the right method for your project.
What Is CSS?
CSS stands for Cascading Style Sheets. It is a styling language used to describe how HTML elements should appear in the browser.
CSS helps you:
-
Change colors
-
Control fonts
-
Adjust spacing
-
Set borders
-
Create layouts
-
Add backgrounds
-
Customize page structure
HTML gives the page meaning. CSS gives it design.
Different Ways to Use CSS in HTML
There are three main methods:
-
Inline CSS
-
Internal CSS
-
External CSS
Each method is used in different situations. Beginners often start with inline CSS, but real websites mostly use external CSS.
Inline CSS
Inline CSS applies styles directly to an element using the style attribute.
Example:
<p style="color: blue; font-size: 20px;">
Aarohi visited Mumbai last month.
</p>
Inline styles are easy to write but difficult to maintain when a page becomes large. They are good for quick tests or small changes.
Internal CSS
Internal CSS is placed inside the <style> tag in the <head> section of the HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: darkred;
text-align: center;
}
p {
font-size: 18px;
color: #444;
}
</style>
</head>
<body>
<h1>Welcome to Jaipur</h1>
<p>Aditi explored the old streets and enjoyed local food.</p>
</body>
</html>
Internal CSS is helpful when styling a single page with a moderate amount of design.
External CSS
External CSS uses a separate .css file linked to the HTML page. This is the most professional and widely used method.
First, create a CSS file named style.css:
h1 {
color: #3f51b5;
}
p {
font-size: 18px;
color: #555;
}
Then link it to your HTML file:
<link rel="stylesheet" href="style.css">
External CSS is recommended because:
-
One file can style many pages
-
Code stays clean
-
Layout is easier to manage
-
Large websites become organized
CSS Selectors
CSS selectors are patterns used to select elements that you want to style.
Element selector
Targets all elements of a type.
p {
color: green;
}
Class selector
Targets elements with a class name. Use . before the name.
.city {
background-color: lightblue;
padding: 10px;
}
Example usage:
<p class="city">Meera enjoyed her stay in Bengaluru.</p>
ID selector
Targets one unique element. Use # before the name.
#main-title {
color: purple;
text-align: center;
}
Example:
<h1 id="main-title">Chennai Travel Guide</h1>
Classes can be reused. IDs must be unique.
Applying Multiple Selectors
You can combine selectors for detailed styling.
Example:
h2, p {
font-family: Arial;
}
This applies the same font to both headings and paragraphs.
Colors and Backgrounds with CSS
You can change the appearance of elements easily.
Example:
h2 {
color: #e65100;
}
p {
background-color: #fff3e0;
padding: 10px;
}
Applied in HTML:
<h2>Welcome to Hyderabad</h2>
<p>Neha explored Charminar and local markets.</p>
Borders in CSS
Borders help separate content visually.
.box {
border: 2px solid #4caf50;
padding: 15px;
}
Usage:
<div class="box">
Kavya described her experience in Ahmedabad.
</div>
Margins and Padding
Margins create space outside an element.
Padding creates space inside an element.
Example:
.container {
margin: 20px;
padding: 15px;
background-color: #f5f5f5;
}
Usage:
<div class="container">
A short introduction about Pune.
</div>
Fonts in CSS
You can control text appearance in several ways.
Font size
p {
font-size: 18px;
}
Font family
p {
font-family: Verdana;
}
Font weight
p {
font-weight: bold;
}
Text Alignment
CSS uses text-align to control horizontal alignment.
Example:
.center {
text-align: center;
}
Usage:
<h2 class="center">Visit Udaipur</h2>
Full Example with Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
}
h1 {
color: #3f51b5;
text-align: center;
}
p {
font-size: 18px;
color: #333;
}
.highlight {
background-color: #ffecb3;
padding: 10px;
border-left: 4px solid #ffa000;
}
</style>
</head>
<body>
<h1>Travel Stories</h1>
<p>Aarohi visited Chennai last month for a cultural event.</p>
<p class="highlight">
Riya explored the beautiful palaces of Mysuru.
</p>
</body>
</html>
Summary of HTML CSS
In this chapter, you learned how CSS works with HTML using inline, internal and external methods. You explored selectors like element, class and ID and saw how to apply colors, backgrounds, borders, spacing and fonts. You also practiced structuring a small page using CSS. Understanding these basics prepares you for advanced styling when you work with full CSS files in future chapters.
Practice Questions
Q1. Write a paragraph using inline CSS with green text and 16px font.
Q2. Create an HTML page with internal CSS that centers all headings.
Q3. Create an external CSS file and link it to your HTML page.
Q4. Apply a red border to all <div> elements using CSS.
Q5. Use internal CSS to change the background color of the page to lightgray.
Q6. Create a heading with font-size 30px and font-family Arial using inline CSS.
Q7. Write a CSS rule that makes all <p> elements blue and bold.
Q8. Add margin and padding to a paragraph using inline CSS.
Q9. Create a CSS rule in an external file that styles all buttons with rounded borders.
Q10. Create a website with internal CSS that applies a different background to the header, content, and footer.
