HTML CSS
CSS (Cascading Style Sheets) controls the visual presentation of HTML elements. Understanding how to link CSS to HTML and apply styles is fundamental to modern web development.
Three Ways to Add CSS
There are three methods to add CSS to HTML: inline styles (using the style attribute), internal stylesheets (using the <style> element), and external stylesheets (using the <link> element). Each method has appropriate use cases.
Inline styles are best for one-off styling or dynamic JavaScript-generated styles. Internal stylesheets work well for single-page applications or page-specific styles. External stylesheets are the standard for multi-page websites and provide the best separation of concerns.
External stylesheets offer the most benefits: they can be cached by browsers, shared across multiple pages, and keep HTML clean and semantic. They also make site-wide design changes easy to implement.
<!-- External stylesheet (recommended) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="title">Styled with External CSS</h1>
</body>
</html>
<!-- Internal stylesheet -->
<head>
<style>
h1 {
color: blue;
font-size: 2rem;
}
</style>
</head>
<!-- Inline style -->
<h1 style="color: blue; font-size: 2rem;">Inline Styled</h1>CSS Selectors
CSS selectors target HTML elements for styling. The most common selectors are element selectors (p, h1, div), class selectors (.classname), ID selectors (#idname), and attribute selectors ([attribute=value]).
Descendant selectors (div p) target elements nested inside other elements. Child selectors (div > p) target direct children only. Pseudo-classes (:hover, :focus, :first-child) target elements in specific states.
Combinators allow complex selections: adjacent sibling (h1 + p), general sibling (h1 ~ p), and combinations of multiple selectors. Understanding selectors is crucial for effective CSS.
<!-- HTML -->
<div class="container">
<h1 id="main-title">Title</h1>
<p class="intro">Introduction paragraph</p>
<p>Regular paragraph</p>
<a href="#">Link</a>
</div>
<!-- CSS -->
<style>
/* Element selector */
p {
color: #333;
}
/* Class selector */
.intro {
font-size: 1.2rem;
font-weight: 500;
}
/* ID selector */
#main-title {
color: #2c3e50;
}
/* Descendant selector */
.container p {
line-height: 1.6;
}
/* Child selector */
.container > p {
margin-bottom: 1rem;
}
/* Pseudo-class */
a:hover {
color: blue;
text-decoration: underline;
}
/* Attribute selector */
input[type="text"] {
border: 1px solid #ccc;
}
/* Multiple selectors */
h1, h2, h3 {
font-family: Arial, sans-serif;
}
</style>The Box Model
Every HTML element is a rectangular box with content, padding, border, and margin. The box model determines how elements are sized and spaced. Understanding it is essential for layout control.
Content is the innermost area containing text or nested elements. Padding is transparent space between content and border. Border is a line around the padding. Margin is transparent space outside the border that separates elements.
The box-sizing property controls how width and height are calculated. The default content-box adds padding and border to the specified width. The border-box (preferred) includes padding and border in the width, making sizing more intuitive.
<!-- HTML -->
<div class="box">Content</div>
<!-- CSS -->
<style>
.box {
/* Content dimensions */
width: 300px;
height: 200px;
/* Padding: space inside border */
padding: 20px; /* all sides */
/* padding: 10px 20px; */ /* vertical horizontal */
/* padding: 10px 20px 30px 40px; */ /* top right bottom left */
/* Border */
border: 2px solid #333;
/* Margin: space outside border */
margin: 20px;
/* Background (visible in content + padding) */
background-color: #f0f0f0;
}
/* Better box model (recommended) */
* {
box-sizing: border-box;
}
/* Now width includes padding and border */
.box-better {
width: 300px; /* Total width is exactly 300px */
padding: 20px; /* Included in 300px */
border: 2px solid #333; /* Included in 300px */
}
</style>Common CSS Properties
Text properties control typography: font-family (typeface), font-size (text size), font-weight (boldness), color (text color), text-align (alignment), line-height (spacing between lines), and text-decoration (underline, etc.).
Layout properties control positioning and sizing: width, height, margin, padding, display (block, inline, flex, grid), position (static, relative, absolute, fixed), and float.
Visual properties control appearance: background-color, background-image, border, border-radius (rounded corners), box-shadow (shadows), opacity (transparency), and transform (rotate, scale, etc.).
<!-- HTML -->
<div class="styled-box">
<h2>Styled Heading</h2>
<p>Styled paragraph text.</p>
</div>
<!-- CSS -->
<style>
.styled-box {
/* Layout */
width: 400px;
padding: 30px;
margin: 20px auto;
/* Visual */
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.styled-box h2 {
/* Typography */
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin-top: 0;
}
.styled-box p {
font-size: 16px;
line-height: 1.6;
color: #555;
text-align: justify;
}
</style>Responsive Design with Media Queries
Media queries apply different styles based on device characteristics like screen width, height, or orientation. They're essential for responsive design that works across devices.
The typical approach is mobile-first: write styles for mobile devices, then use media queries to add styles for larger screens. This ensures fast loading on mobile and progressive enhancement for larger devices.
Common breakpoints are 768px (tablets), 1024px (desktops), and 1200px (large desktops), but choose breakpoints based on your content and design, not specific devices.
<!-- HTML -->
<div class="responsive-container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<!-- CSS -->
<style>
/* Mobile-first base styles */
.responsive-container {
padding: 10px;
}
.column {
width: 100%; /* Full width on mobile */
padding: 10px;
margin-bottom: 10px;
background-color: #f0f0f0;
}
/* Tablet and up */
@media screen and (min-width: 768px) {
.responsive-container {
display: flex;
flex-wrap: wrap;
}
.column {
width: 48%; /* Two columns */
margin-right: 2%;
}
}
/* Desktop and up */
@media screen and (min-width: 1024px) {
.column {
width: 32%; /* Three columns */
margin-right: 1.33%;
}
}
/* Print styles */
@media print {
.responsive-container {
background: white;
color: black;
}
}
</style>