CBSE Class 10 Computer Applications (165)
CSS defines the "look and feel" of a webpage. While HTML gives the webpage its content and structure (like paragraphs, headings, images), CSS allows us to add colors, fonts, spacing, layouts, and more.
Imagine HTML as the skeleton of a webpage and CSS as the skin, clothes, and accessories making it attractive.
For example:
<p>Hello</p>.p {
color: blue;
font-size: 18px;
}
Now all <p> elements appear blue and with bigger text.
h1 {
color: green;
}
Makes all <h1> elements green.
div {
margin: 10px;
padding: 5px;
}
Adds space outside and inside <div> elements.
a {
color: red;
}
All hyperlinks (<a>) turn red.
There are three ways to add CSS styles:
Each method has its uses.
Inline CSS
style attribute.<p style="color:red;">Hello</p>Internal CSS
<style> tags in the <head> section of an HTML page.<style>
h1 {
color: green;
}
</style>
.css file.<link> tag.<link rel="stylesheet" href="style.css" />
<button style="background-color: yellow;">Click Me</button>
<style>
body {
background-color: lightgrey;
}
</style>
style.css)h2 {
font-family: Arial, sans-serif;
color: navy;
}
And link it in HTML's <head>
Saves Time:
Write CSS once, and it applies to many pages, avoiding repeated code.
Makes Pages Attractive:
Add multiple style features like colors, borders, fonts easily.
Consistent Design:
If one CSS file styles all pages, your website looks unified and professional.
Easier Maintenance:
Changes to design need updating just the CSS, not every HTML file.
Faster Loading:
Smaller HTML files mean quick loading.
Device-Friendly:
CSS allows responsive designs, adapting layouts for mobiles, tablets, desktops.
Browser Compatibility:
Browsers such as Chrome or Firefox render CSS differently sometimes. So designs might not look exactly the same everywhere.
Complexity:
Big projects with many style rules can be hard to maintain.
No Security:
Since CSS code is visible to anyone, it’s not suitable for hiding secret information.
Learning Curve:
Understanding how CSS rules override each other (specificity, inheritance) can be tricky at first.
When multiple CSS rules apply to the same element, the browser decides which to apply based on priority:
<style> tags applies if no inline style is set.This layered decision-making is called cascading.
Inline style style="color:red;" on <p> makes text red even if external CSS sets it blue.
External CSS says <h1>{color: blue;}, but internal CSS says <h1>{color: green;} — headline appears green.
No CSS written, so browser shows black text by default.
Scenario: You create a new webpage and want all paragraph texts to appear blue.
<style> tags in the page’s <head> to style all <p> tags blue.Scenario: You manage 20 pages of a website and want the font family to be the same everywhere.
Scenario: Your inline style and external CSS both set different colors for a heading. The heading appears red.
Scenario: You notice your website looks different in Chrome and Firefox browsers.
Scenario: You want to change the background color of your whole website quickly.
Enjoy exploring CSS with simple steps! Remember, fun learning creates better retention! 🎉