Understanding CSS
CSS (Cascading Style Sheets) controls how HTML elements are visually presented. When a browser processes a stylesheet, it applies those rules to render the document accordingly.
Syntax Structure
A CSS rule consists of a selector and a declaration block. The declaration block contains property-value pairs, each terminated by a semicolon.
/* This is a comment in CSS */
selector {
property: value;
}
Methods of Including CSS
Inline Styles
Inline styles are applied directly within an element's style attribute. This approach is generally discouraged for maintainability.
<p style="color: blue;">Sample text</p>
Internal Stylesheet
Internal styles are defined within a <style> block inside the document's <head> section.
<head>
<style>
p {
background-color: #3498db;
}
</style>
</head>
External Stylesheet
External stylesheets are separate .css files linked via the <link> element. This is the recommended approach for production.
<link rel="stylesheet" href="styles/main.css">
CSS Selectors
Element Selector
Selects all instances of a specific HTML tag.
p {
color: #e74c3c;
}
ID Selector
Targets a unique element using its ID attribute, prefixed with a hash symbol.
#main-header {
background-color: #2ecc71;
}
Class Selector
Selects elements by their class attribute, prefixed with a dot. Multiple classes can be assigned to a single element, separated by spaces.
.highlight {
font-size: 16px;
}
p.highlight {
font-weight: bold;
}
Universal Selector
The asterisk selects all elements on a page.
* {
margin: 0;
padding: 0;
}
Combinator Selectors
Descendant Selector: Matches all descendants of a specified element.
article p {
line-height: 1.6;
}
Child Selector: Targets only direct children.
div > p {
font-family: Arial, sans-serif;
}
Adjacent Sibling Selector: Selects the element immediately following another.
h1 + p {
margin-top: 0;
}
General Sibling Selector: Matches all siblings after an element.
#intro ~ p {
border-left: 3px solid #9b59b6;
}
Attribute Selectors
These selectors match elements based on attributes or attribute values.
/* Elements with specific attribute */
input[required] {
border-color: #e74c3c;
}
/* Exact attribute value match */
input[type="email"] {
background-color: #ecf0f1;
}
/* Attribute value starts with */
a[href^="https"] {
color: green;
}
/* Attribute value ends with */
a[href$=".pdf"] {
padding-left: 20px;
}
/* Attribute value contains substring */
[title*="info"] {
cursor: help;
}
Grouping Selectors
Multiple selectors can share the same styles by separating them with commas.
h1, h2, h3 {
font-family: Georgia, serif;
margin-bottom: 10px;
}
Specificity and Inheritance
CSS inheritance allows styles to propagate from parent to child elements. However, not all properties inherit (e.g., border, margin, padding, background).
Selector specificity determines which styles apply when conflicts occur. Inline styles have the highest specificity, followed by IDs, then classes, and finally element selectors.
/* Specificity example */
body {
color: #333; /* Low specificity, inherited */
}
#content {
color: #666; /* Higher specificity */
}
.text-primary {
color: blue !important; /* Forces application, avoid overuse */
}
Pseudo-Classes
Pseudo-classes define special states of elements.
/* Link states */
a:link {
color: #3498db;
}
a:visited {
color: #9b59b6;
}
a:hover {
color: #e74c3c;
text-decoration: underline;
}
a:active {
color: #2ecc71;
}
/* Focus state for form inputs */
input:focus {
outline: 2px solid #3498db;
background-color: #f9f9f9;
}
Pseudo-Elements
Pseudo-elements style specific parts of elements.
/* First letter styling */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #e74c3c;
}
/* Content before element */
.note::before {
content: "⚠ ";
color: #f39c12;
}
/* Content after element */
.quote::after {
content: "\201D";
font-size: 1.5em;
}
Box Model
Every element is represented as a rectangular box consisting of content, padding, border, and margin.
.box {
width: 300px;
padding: 20px;
border: 2px solid #333;
margin: 15px;
}
/* Centering with auto margins */
.container {
width: 960px;
margin: 0 auto;
}
Typography
Font Properties
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
Text Styling
p {
color: #2c3e50;
text-align: justify;
text-decoration: none;
text-indent: 2em;
}
a {
text-decoration: none;
}
Background Properties
.hero {
background-color: #1abc9c;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
/* Shorthand */
background: #1abc9c url('bg.jpg') no-repeat center top;
}
Border Properties
.panel {
border-width: 1px;
border-style: solid;
border-color: #bdc3c7;
/* Shorthand */
border: 1px solid #bdc3c7;
/* Border radius for rounded corners */
border-radius: 8px;
/* Circular element */
border-radius: 50%;
}
Display Property
/* Hide element completely */
.hidden {
display: none;
}
/* Block-level element */
.block {
display: block;
}
/* Inline element */
.inline {
display: inline;
}
/* Inline with block features */
.inline-block {
display: inline-block;
}
/* visibility: hidden vs display: none */
.invisible {
visibility: hidden; /* Hidden but still occupies space */
}
.removed {
display: none; /* Removed from layout flow */
}
Positioning
Static
Default positioning; elements flow normally.
Relative
Positioned relative to its normal position. The original space is preserved.
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
Absolute
Removed from normal flow; positioned relative to nearest positioned ancestor.
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
Fixed
Positioned relative to the viewport; remains fixed during scrolling.
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
Float and Clear
.float-left {
float: left;
margin-right: 15px;
}
.float-right {
float: right;
margin-left: 15px;
}
/* Clearing floats */
.clearfix::after {
content: "";
display: table;
clear: both;
}
Overflow
.scrollable {
overflow: auto; /* Scrollbar when needed */
}
.clipped {
overflow: hidden; /* Content is clipped */
}
.visible-overflow {
overflow: visible; /* Default behavior */
}
Opacity
.overlay {
opacity: 0.7; /* 70% visible, range 0-1 */
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}
Practical Example: Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background-color: #2c3e50;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.nav-list {
list-style: none;
display: flex;
}
.nav-item a {
display: block;
padding: 15px 20px;
color: #ecf0f1;
text-decoration: none;
}
.nav-item a:hover {
background-color: #34495e;
color: #3498db;
}
</style>
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">Products</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Practical Example: Circular Avatar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Avatar Example</title>
<style>
.avatar-container {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #3498db;
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="avatar-container">
<img src="profile.jpg" alt="User Avatar" class="avatar-img">
</div>
</body>
</html>