Introduction to CSS with HTML
CSS (Cascading Style Sheets) is used to style and layout web pages. There are three main ways to integrate CSS with HTML: inline styles, internal stylesheets, and external stylesheets.
CSS Integration Methods
1. Inline Styles
Styles applied directly to HTML elements using the style attribute.
Example:
<p style="color: blue; font-size: 16px; margin: 10px;">
This text is styled with inline CSS
</p>
<div style="background-color: #f0f0f0; padding: 20px; border-radius: 5px;">
<h2 style="color: #333; margin-bottom: 15px;">Styled Section</h2>
<p style="line-height: 1.6;">Content with inline styles</p>
</div>Output:
This text is styled with inline CSS
Styled Section
Content with inline styles
2. Internal Stylesheet
Styles defined within the <style> tag in the HTML document head.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
.content {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin: 20px 0;
}
.button {
background-color: #2ecc71;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="header">Welcome to My Website</div>
<div class="content">Main content area</div>
<button class="button">Click Me</button>
</body>
</html>3. External Stylesheet
Styles defined in separate .css files and linked using the <link> tag.
HTML File (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main class="main-content">
<article class="blog-post">
<h2>Blog Post Title</h2>
<p>Blog post content...</p>
</article>
</main>
</body>
</html>CSS File (styles.css):
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
/* Navigation styles */
.navbar {
background-color: #2c3e50;
padding: 1rem 0;
}
.nav-list {
list-style: none;
display: flex;
justify-content: center;
gap: 2rem;
}
.nav-list a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 3px;
transition: background-color 0.3s;
}
.nav-list a:hover {
background-color: #34495e;
}
/* Main content styles */
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.blog-post {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.blog-post h2 {
color: #2c3e50;
margin-bottom: 1rem;
}CSS Selectors
Basic Selectors
Element Selector
p { color: blue; }Class Selector
.button { padding: 10px; }ID Selector
#header { background: #333; }Universal Selector
* { margin: 0; padding: 0; }Combinator Selectors
Descendant
div p { margin: 10px; }Child
div > p { color: red; }Adjacent Sibling
h2 + p { font-weight: bold; }General Sibling
h2 ~ p { color: green; }Best Practices
- Use external stylesheets for maintainability and reusability
- Avoid inline styles except for dynamic styling with JavaScript
- Use semantic class names (e.g., .primary-button instead of .blue-button)
- Follow a consistent naming convention (BEM, SMACSS, etc.)
- Organize CSS properties in a consistent order
- Use CSS variables for theming and consistency
- Minify CSS for production deployment
- Use CSS preprocessors (Sass, Less) for complex projects
Performance & Accessibility
Performance Optimization
- Minimize CSS file size through compression
- Use efficient selectors (avoid overly specific selectors)
- Reduce CSS blocking time with critical CSS
- Implement CSS caching strategies
- Use CSS sprites for multiple images
Accessibility Considerations
- Ensure sufficient color contrast (WCAG guidelines)
- Use relative units (em, rem) for font sizes
- Provide focus styles for interactive elements
- Support high contrast mode
- Test with screen readers and keyboard navigation
