Chapter 1: An Introduction to CSS
Embarking on your web development journey will entail a good understanding of CSS. So, HTML creates the site layout, but an introduction to CSS teaches you to convert that layout into a stunning professional design.
If HTML is a webpage’s skeleton, then CSS (Cascading Style Sheets) is its skin, the clothes it wears and even its vibe. In this guide, we’ll explain what is CSS (with examples), why it matters and how you can put it to work right now.
What is CSS?
CSS – Cascading Style Sheets AFP-1/8/09 12:01 PM Page 13 Copyright © 2009 Cengage Learning. It is a style sheet language that describes the presentation of an HTML document. Where HTML is used to specify the structure (headings, paragraphs, links), CSS is used rule design (colour, fonts, spacing and layouts) that present that content.
The “Cascading” part of the name is relevant: it describes how browser rules work. When more than one style is applied to an element, the styles “cascade” downward and the most specific or latest rule applies.
The Anatomy of a CSS Rule
In CSS, to style something you write a CSS Rule. A rule is made up of a selector and a declaration block.
Selector: The HTML element you want styled (h1, p,.) button).
Declaration Block: A block with a brace pair {} containing zero or more declarations, where each declaration is delimited by a semicolon.
Property & Value: Inside the declaration, you specify one or more separate declarations of a property (like color) and its value (like blue).
Example:
CSS
h1 {
color: navy;
font-size: 24px;
text-align: center;
}
Adding CSS to Your Website 3 Different Ways
There are three ways that you can apply CSS to an HTML document:magine you’re building a house. When in HTML is the wooden frame and brick work, it’s the structure. But paint, furniture and lighting also are key. In the web world, that “interior design” is done within CSS.
If you’re someone who’s just learning to code and build web applications, whether that be for a hobbyist or programming career, then learning CSS (Cascading Style Sheets) is by far one of the most important ways to go.
What is CSS?
CSS is a style sheet language used for describing the presentation of a document written in HTML. It allows you to control the color, font style, spacing, and layout of your web pages.
The “Cascading” part of Cascading Style Sheets refers to the order in which your browser decides which styles apply where. If several rules apply, the browser “cascades” down from the most general to the specific or latest.
Why is it important in 2026?
CSS is now more powerful than ever in the modern web. We even have features such as Container Queries and Native Masonry Layouts which can help us build complex, high performance interfaces without the need for bloated JavaScript libraries.
The CSS Syntax: Writing Your First Rule
A CSS rule consists of three basic parts:
Selector : The HTML element that you wish to alter (for example: h1 or.mypara) Pseudo rule name : The class of the pseudo-rule applied (.clearfix): All we added here is the effect trigger and a little spacing before our CSS begins. button).
Property: What you want to modify (E.g. background-color).
Value: What you’d like it to be (i.e., blue).
Example:
CSS
/* Targets all H1 headings /
h1 {
color: #2D3436;/ Property: Value */
font-family: ‘Inter’, sans-serif;
text-align: center;
}
The Foundation: the CSS box model
If you “get” the Box Model, you get about 80% of CSS layout. All page elements have boxes around them. The Box Model consists of:
Content: The text or image within the box.
Padding: The empty area within the border away from (but between) the content.
Border: A border line that surrounds padding and content.
Margin: The blank space between the border and content that puts a distance b/w two elements.
Pro-Tip: To ensure padding does not inadvertently change an element’s total width, be sure to use box-sizing: border-box; in your CSS.
Modern Layouts: Flexbox and Grid
It’s the end of using “floats” to lay things out. In 2026, we have two major systems we use:
Flexbox: Best for the one-dimensional layout (like a navigation or row of buttons).
CSS Grid: Optimal for 2D layouts (e.g. complex magazine dashboard or photo gallery).
Quick FAQ for Beginners
Q: Where do I put my CSS? A: You can also use a tag in the HTML header, but we should always follow best practice, which is to create External Stylesheet – a. css” >And in your document just create the styles (in style. css”>.
Q: Is CSS hard to learn? A: The basics are easy! You could learn to change colors and fonts in one afternoon. Obviously mastering more complex layouts and animations will require more practice, but it’ll ultimately pay off.
Q: Do I have to use something like Tailwind? A: Although frameworks are sexy, it is VERY important to learn “Vanilla CSS” first. You can become a 10x developer on that core language you know.
Conclusion
CSS is a magic that makes codes become arts. Once you have an understanding of selectors, properties, and the box model – you will be able to start building beautiful professional websites from scratch.
Practice is the best teacher. Open a text editor, make an HTML file and get busy with colours and fonts!
