CSS Introduction Get Certified

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance and layout of HTML documents. HTML provides the structure of a webpage, while CSS controls colors, fonts, spacing, borders, backgrounds, layouts, animations, and responsive design.

Why CSS is Used

CSS separates design from content, making websites easier to maintain, faster to update, and consistent across multiple pages.

Features of CSS

• Easy styling
• Responsive layouts
• Flexbox and Grid
• Animations and transitions
• Reusable external stylesheets
• Cross-browser support

Advantages of CSS

• Cleaner HTML
• Improved maintainability
• Faster loading
• Consistent design
• Better user experience

How CSS Works with HTML

CSS uses selectors to target HTML elements and applies property-value pairs to style them.

CSS Syntax

What this code does: Shows the basic CSS rule structure — a selector (h1) followed by a declaration block that sets the text color to blue and the font size to 36px.

h1{
    color:blue;
    font-size:36px;
}

Ways to Add CSS

1. Inline CSS
2. Internal CSS
3. External CSS (Recommended)

CSS Version History

Example: My First CSS

What this code does: Applies internal CSS so the heading turns blue and the paragraph text turns dark gray, demonstrating how a small style block can change the look of HTML elements on the page.

<style>
h1{
 color:#0d6efd;
}
p{
 color:#444;
}
</style>
<h1>Welcome to CSS</h1>
<p>This page is styled using CSS.</p>

Best Practices

• Use external CSS.
• Write meaningful class names.
• Keep code organized.
• Avoid duplicate rules.
• Use responsive units.

Web Resources on CSS (Cascading Style Sheets)

1. MDN Web Docs : What is CSS and How is CSS applied to HTML?
2. Web.dev : Welcome to Learn CSS!