Once you’ve built the structure of a website using HTML, the next essential step is adding style. CSS, or Cascading Style Sheets, is the technology that transforms plain content into visually appealing web pages. In this guide, you'll learn the fundamentals of CSS and how to apply it effectively to real-world web development.
1. What Is CSS?
CSS is a style language used to define how HTML elements should appear on screen, in print, or on other media. It lets you control fonts, colors, spacing, layout, and responsive behavior without altering your HTML content.
Example:
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
</style>
2. Ways to Apply CSS
Inline CSS
Styles are added directly to an HTML element using the style attribute.
<p style="color: red;">This is red text.</p>
Internal CSS
CSS is written inside a <style> tag in the HTML document’s head section.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
External CSS
Recommended for most projects. CSS is placed in a separate file (e.g., style.css) and linked to the HTML document using:
<link rel="stylesheet" href="style.css">
3. CSS Syntax Overview
CSS consists of selectors and declaration blocks:
selector {
property: value;
}
Example:
p {
font-size: 16px;
line-height: 1.5;
}
4. Common CSS Selectors
- Element selector: Targets HTML tags (e.g.,
p,h1). - Class selector: Begins with a dot (e.g.,
.button). - ID selector: Begins with a hash (e.g.,
#header). - Universal selector: An asterisk selects all elements (e.g.,
* {}). - Group selector: Combines multiple selectors (e.g.,
h1, h2, h3 {}).
Example:
#logo {
width: 150px;
}
.button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
}
5. The Box Model Explained
Understanding the box model is critical for layout control. Every HTML element is treated as a rectangular box consisting of:
- Content: The text or image inside the element.
- Padding: Space between the content and the border.
- Border: A line surrounding the padding.
- Margin: Space outside the border.
Visualization:
div {
margin: 10px;
padding: 20px;
border: 2px solid #333;
}
6. CSS Units of Measurement
Absolute Units:
px(pixels): Common and predictable.pt,in,cm: Typically used for print.
Relative Units:
em: Relative to parent element’s font size.rem: Relative to root font size (usually 16px).%: Relative to parent container size.vw,vh: Viewport width and height.
7. Text Styling with CSS
Controlling text appearance is one of CSS’s primary roles. You can define fonts, colors, spacing, and alignment easily.
h1 {
font-family: 'Helvetica Neue', sans-serif;
font-size: 32px;
font-weight: bold;
text-align: center;
color: #333;
}
Common Text Properties:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transform
8. Styling Lists and Tables
Lists:
ul {
list-style-type: square;
padding-left: 1.5em;
}
Tables:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
9. How CSS is Cascading
CSS stands for Cascading Style Sheets because styles are applied in a cascading order of priority:
- Inline styles (highest priority)
- Internal styles (next)
- External styles (lowest, unless overridden)
Later styles override earlier ones if they conflict. Specificity also plays a role, with ID selectors having more weight than class selectors.
10. Comments and Debugging
Comments:
/* This is a comment */
body {
background-color: #fff;
}
Debugging Tips:
- Use browser dev tools (F12 or right-click → Inspect).
- Look for overridden or inactive styles.
- Try isolating styles to simplify troubleshooting.
Conclusion
CSS gives life to web content, turning raw HTML into beautifully presented and readable layouts. By mastering the basics—selectors, properties, units, box model, and structure—you set the stage for more advanced skills like responsive design and animation.
In the next part, we’ll dive deeper into layout techniques, advanced selectors, transitions, and responsive web design strategies using Flexbox and Grid.