Back
CSS - Cascading Style Sheets
CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.
Introduction to CSS
CSS stands for Cascading Style Sheets. It's used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
Types of CSS
1. Inline CSS
Applied directly to HTML elements using the style attribute.
<p style="color: red;">This is red text</p>2. Internal CSS
Defined in the <head> section of an HTML page within a <style> tag.
<style>
p {
color: blue;
}
</style>3. External CSS
Defined in a separate .css file and linked to HTML documents.
<link rel="stylesheet" href="styles.css">CSS Selectors
Element Selector
Selects HTML elements based on the element name.
p {
color: red;
}Class Selector
Selects elements with a specific class attribute.
.highlight {
background-color: yellow;
}ID Selector
Selects a single element with a specific id attribute.
#header {
font-size: 2rem;
}Attribute Selector
Selects elements with a specific attribute.
input[type="text"] {
border: 1px solid #ccc;
}Pseudo-class Selector
Selects elements in a specific state.
a:hover {
color: orange;
}Grouping Selector
Selects multiple elements with the same style definitions.
h1, h2, h3 {
font-family: Arial;
}CSS Properties
Text Properties
color
p {
color: #ff0000; /* red */
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);
}font-family
body {
font-family: Arial, sans-serif;
}font-size
h1 {
font-size: 2em; /* or px, rem, % */
}text-align
p {
text-align: center; /* left, right, justify */
}text-decoration
a {
text-decoration: none; /* underline, overline */
}line-height
p {
line-height: 1.6; /* spacing between lines */
}Box Model Properties
width & height
div {
width: 300px;
height: 200px;
}margin
div {
margin: 10px; /* all sides */
margin: 10px 20px; /* top/bottom left/right */
margin-top: 5px;
}padding
div {
padding: 15px;
padding-left: 20px;
}border
div {
border: 1px solid black;
border-radius: 5px;
}Layout Properties
display
div {
display: block; /* inline, inline-block, flex, grid, none */
}position
div {
position: relative; /* static, absolute, fixed, sticky */
top: 10px;
left: 20px;
}float
img {
float: left; /* right, none */
}z-index
div {
z-index: 10; /* controls stacking order */
}CSS Media Queries
Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics like screen resolution or browser viewport width.
Basic Syntax
@media media-type and (media-feature) {
/* CSS rules */
}Common Examples
Responsive Design
/* For screens smaller than 600px */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}Print Styles
@media print {
nav, footer {
display: none;
}
body {
font-size: 12pt;
}
}Dark Mode
@media (prefers-color-scheme: dark) {
body {
background: #333;
color: white;
}
}Orientation
@media (orientation: landscape) {
body {
flex-direction: row;
}
}CSS Examples
Button Styling
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-align: center;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #45a049;
}Card Component
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s;
background: #2d3748;
}
.card:hover {
transform: translateY(-5px);
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
padding: 20px;
}Navigation Bar
nav {
background-color: #333;
overflow: hidden;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #111;
}Form Styling
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
background-color: #4b5563;
color: #f3f4f6;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}