CSS (Cascading Style Sheets) is used to style HTML elements on a web page. It controls how your content looks — like colors, fonts, layouts, spacing, etc.
CSS (Cascading Style Sheets) is used to style HTML elements and control the layout of web pages. It works by selecting HTML elements and applying styling rules to them. These rules include properties like colors, fonts, spacing, alignment, and more.
To write CSS, you define a selector (the HTML element to be styled) and then describe how it should appear using various style properties. CSS can be written directly in HTML elements, within the <head> section of a page, or in an external .css file.
Using CSS helps separate content from design, allowing for cleaner code, easier maintenance, and consistent styling across multiple web pages. It plays a crucial role in making websites responsive, attractive, and user-friendly.
There are three main ways to use CSS in a website:
1. Inline CSS
Write CSS directly in an HTML tag.
<p style=”color: red”>This text is red.</p>Conclusion:
(i) Good for small changes
(ii) Not recommended for full websites
2. Internal CSS
Write CSS in the <style> tag inside the HTML <head>.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is styled using internal CSS. </p>
</body>
</html>
(i) Good for single-page sites
(ii) Not reusable across pages
3. External CSS (Best Practice)
Write your CSS in a separate .CSS file and link it in your HTML.
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
🧾index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello CSS! </h1>
</body>
</html>
Best for big websites
Easy to manage and reuse
CSS Syntax Quick Recap
selector {;
property: value
}
Example –
p {
color: blue;
font-size: 16px;
}
Summary:
CSS is a powerful tool that transforms plain HTML into visually appealing and well-structured web pages. By learning how to apply styles using selectors, organize your code with external stylesheets, and control layout using the box model, positioning, and modern layout techniques like Flexbox and Grid, you can create responsive and professional websites.
Start simple with basic styling, and gradually explore advanced features like animations, media queries, and variables. With consistent practice, CSS becomes intuitive and unlocks the creative potential of your web designs.
Remember: HTML is the structure, CSS is the style — and together, they build the visual soul of the web.
CSS (Cascading Style Sheets) is used to style HTML content. It can be applied in three ways: inline CSS, written directly in the HTML tag; internal CSS, written inside a <style> tag in the <head>; and external CSS, written in a separate .css file and linked to the HTML file. The syntax includes selectors and declarations to define how elements should appear on the page.
In conclusion, CSS is a powerful tool for web developers. By understanding how to use CSS in different ways, you can build professional, attractive, and responsive websites. Among all methods, external CSS is the best practice for clean and maintainable code.
You can use CSS in three ways — inline, internal, and external.CSS allows you to create beautiful and organized web designs by controlling styles separately from HTML structure.