CSS With HTML
CSS (Cascading Style Sheets) works together with HTML to style web pages. It controls colors, layouts, fonts and spacing. CSS can be applied in three ways: inline, internal (within <style>) and external (via a .css file).
What is CSS in HTML?
- CSS adds styling — colors, layout, fonts — to HTML.
- Inline CSS: written inside an element's
styleattribute. - Internal CSS: written inside a
<style>tag in the head. - External CSS: linked via
<link rel="stylesheet">.
Why Use CSS with HTML?
Beautiful Design
CSS turns plain HTML into stunning web designs.
Layout Control
Use Flexbox and Grid for responsive layouts.
Faster Updates
Change one CSS file to update site-wide style.
Responsive
Media queries make sites adapt to all screen sizes.
Reusable
Class-based styles can be reused everywhere.
Separation of Concerns
HTML for structure, CSS for design.
Three Ways to Add CSS
- Inline:
<p style="color:red;">Text</p> - Internal:
<style> p { color: red; } </style> - External:
<link rel="stylesheet" href="style.css"> - Selectors: element, .class, #id, attribute selectors
- Properties: color, background, font, margin, padding, border
CSS With HTML Example
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #f8fafc; }
h1 { color: #2563eb; text-align: center; }
p { color: #334155; font-size: 18px; }
</style>
</head>
<body>
<h1>CSS With HTML</h1>
<p>This page is styled using internal CSS.</p>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <style> | Defines internal CSS inside the <head>. |
| body { ... } | Applies CSS to the whole body. |
| h1 { color: blue; } | Targets all h1 elements and sets their text color. |
| text-align: center; | Centers the text horizontally. |
| font-size: 18px; | Sets the font size for paragraphs. |
CSS Application Types
Use Cases
- Styling pages: Backgrounds, colors and fonts.
- Layouts: Build responsive grid layouts.
- Themes: Dark mode, light mode and brand themes.
- Animations: Add smooth transitions and hover effects.
Practice Questions
- Use inline CSS to change the color of a paragraph.
- Add internal CSS in
<style>to style all headings. - Create an external
style.cssand link it to your HTML. - Use a class selector to style multiple elements.
Frequently Asked Questions
What are the three ways to add CSS?
Inline (style attribute), internal (style tag) and external (linked .css file).
Which CSS method is best?
External CSS is best for maintainability and performance.
What is a CSS selector?
It targets HTML elements to apply styles — like element, class (.), id (#).
Does CSS work without HTML?
No, CSS needs HTML elements to style.
Conclusion
CSS combined with HTML is the heart of modern web design. Whether you use inline, internal or external CSS, mastering selectors and properties is essential to build beautiful, responsive websites.
Additional Tips
- Prefer external CSS: Easier to maintain large sites.
- Avoid inline CSS: Use it only for testing.
- Use classes: Reuse styles across many elements.
- Mobile-first: Design for small screens first.