beginner css 20 min read
CSS Fundamentals: Styling Web Pages
Master CSS basics including selectors, properties, and the box model.
css basics learn css css tutorial css for beginners
What is CSS?
CSS (Cascading Style Sheets) controls the visual presentation of HTML documents. While HTML structures content, CSS makes it look good.
Adding CSS to HTML
There are three ways to add CSS:
Inline Styles
<p style="color: blue; font-size: 16px;">Styled text</p>
Internal Stylesheet
<head>
<style>
p { color: blue; }
</style>
</head>
External Stylesheet (Recommended)
<link rel="stylesheet" href="styles.css">
CSS Syntax
selector {
property: value;
another-property: another-value;
}
CSS Selectors
Basic Selectors
/* Element selector */
p { color: blue; }
/* Class selector */
.highlight { background: yellow; }
/* ID selector */
#header { font-size: 24px; }
/* Universal selector */
* { margin: 0; }
Combinators
/* Descendant */
article p { line-height: 1.6; }
/* Direct child */
ul > li { list-style: none; }
/* Adjacent sibling */
h2 + p { margin-top: 0; }
Attribute Selectors
input[type="text"] { border: 1px solid gray; }
a[href^="https"] { color: green; }
The Box Model
Every element is a rectangular box with:
.box {
width: 200px; /* Content width */
padding: 20px; /* Space inside border */
border: 1px solid; /* Border around element */
margin: 10px; /* Space outside border */
}
Use box-sizing: border-box to include padding and border in the width:
* {
box-sizing: border-box;
}
Common Properties
Text Styling
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
color: #333;
}
Backgrounds
.hero {
background-color: #f5f5f5;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
Borders
.card {
border: 1px solid #ddd;
border-radius: 8px;
}
Display Property
.block { display: block; } /* Full width, new line */
.inline { display: inline; } /* Inline with text */
.inline-block { display: inline-block; } /* Inline but respects width/height */
.hidden { display: none; } /* Hidden from page */
Positioning
.static { position: static; } /* Default */
.relative { position: relative; } /* Relative to normal position */
.absolute { position: absolute; } /* Relative to positioned parent */
.fixed { position: fixed; } /* Fixed to viewport */
.sticky { position: sticky; } /* Hybrid relative/fixed */
Colors in CSS
.colors {
color: red; /* Named color */
color: #3b82f6; /* Hex */
color: rgb(59, 130, 246); /* RGB */
color: rgba(59, 130, 246, 0.5); /* RGBA with opacity */
color: hsl(217, 91%, 60%); /* HSL */
}
CSS Units
.units {
width: 100px; /* Pixels - fixed */
width: 50%; /* Percentage - relative to parent */
width: 10em; /* Em - relative to font-size */
width: 10rem; /* Rem - relative to root font-size */
width: 50vw; /* Viewport width */
width: 50vh; /* Viewport height */
}
Next Steps
Continue learning with:
Try our Gradient Generator and Box Shadow Generator to create CSS effects visually.
Related Tools
Gradient Generator
Create beautiful CSS gradients. Linear, radial, and conic with multiple color stops.
Box Shadow Generator
Create CSS box shadows with multiple layers. Adjust offset, blur, spread, and color.
Color Palette Generator
Generate harmonious color palettes. Export as CSS variables, Tailwind, or SCSS.