Basic CSS Tutorial

CSS Tutorial

Outdated CSS Books: What to Toss

CSS has evolved dramatically since 2015. If your book doesn't cover Flexbox (introduced around 2015) or CSS Grid (standardized around 2017), it likely teaches outdated layout methods like floats or tables. Books that rely heavily on inline styles, use of !important everywhere, or ignore responsive design principles should be recycled. Modern CSS emphasizes flexibility, mobile-first strategies, and clean separation of style from content. For practical, current knowledge, keep books published in or after 2017.

1. Introduction to CSS

CSS (Cascading Style Sheets) is used to control the presentation of web content. It works with HTML to determine layout, colors, fonts, and responsiveness.

2. Ways to Use CSS

Inline CSS: Inside an HTML tag (not recommended for large projects):

Example: <p style="color: red;">Hello</p> renders as: Hello

Internal CSS: Inside a <style> tag in the HTML head:

<style>
p { color: red; }
</style>

External CSS: In a separate file (best for scalability):

<link rel="stylesheet" href="style.css">

3. Basic CSS Selectors

CSS selectors are patterns used to select the HTML elements you want to style. They are the starting point of any CSS rule and allow you to target single elements, groups of elements, or even elements based on their relationship to others.

Element Selector: Targets all tags of that type: p { color: blue; }

Result: This is a paragraph in blue.

Class Selector: Reusable across multiple elements (prefixed with a dot):

Example: .highlight { background-color: yellow; } gives this

ID Selector: Unique per element (prefixed with #):

Example: #intro { font-size: 20px; }

4. <span> and <div> Explained

<span> – The Inline Stylist

The <span> element in HTML is used to style or manipulate a specific part of inline text without affecting the structure of the document. Think of it like a highlighter—if you want to color just a single word in a sentence, <span> lets you do that. It does not introduce any visual breaks or layout changes on its own, which makes it perfect for subtle modifications within paragraphs, links, or headings.

Use <span> when you want to emphasize, color, hide, or otherwise change a portion of content inline. For example:

<p>This is <span class="highlight">important</span> text.</p>

That will render as: This is important text.

<div> – The Block Organizer

Unlike <span>, the <div> tag is a block-level element, meaning it will always start on a new line and take up the full width of its container. It's used to group larger sections of a page—such as headers, footers, sidebars, and article blocks—so they can be styled as a unit using CSS. You’ll often see <div> used as a layout container for rows, columns, or content blocks.

For example, here’s a simple layout using <div> and classes:

<div class="row">
  <div class="column">Left Side</div>
  <div class="column">Right Side</div>
</div>

This structure allows CSS to style each column separately and apply responsive behavior.

5. Creating Columns

One of the fundamental layout goals in web design is to create columns—side-by-side content blocks. CSS offers several ways to do this, each with its pros and cons depending on the complexity of your design and browser support.

Float method: Older and less flexible. Use only if required for legacy browser support.

.column { float: left; width: 50%; }

Con: Needs clearfix and manual width management.

Flexbox: Modern, easy, and responsive.

.row { display: flex; } .column { flex: 1; }

Pro: Automatically handles widths. Great for rows. Con: 1D only (row OR column).

CSS Grid: Ideal for complex layouts involving rows and columns.

.grid-container { display: grid; grid-template-columns: 1fr 1fr; }

6. Flexible Sizing

Flexible sizing in CSS refers to the ability of elements to adjust in size depending on the screen or container. This is an important part of creating layouts that work on different devices and screen sizes without requiring separate code for each case. It’s about using units that are not fixed (like pixels), but rather scale relative to something—like the screen, parent container, or font size.

Common flexible units include:

% (percentage): Defines size relative to the parent container. Good for fluid layouts.
em / rem: Relative to font size. em is relative to the current element; rem is relative to the root element.
vw / vh: Viewport width/height. Very useful for full-screen layouts or scaling elements to fit screen dimensions.
fr: Fractional units used in CSS Grid. Divides space into equal (or weighted) parts.

Example: width: 50%; makes an element take up half the width of its parent, which changes if the window resizes. Flexible sizing is not just about making things smaller—it's about making them adapt. This is essential groundwork for responsive design, which builds upon these principles.

7. Responsive Design

Responsive design is the art of making a website look and work well on all devices, from large desktop monitors to small mobile phones. It builds on flexible sizing by adding logic for different screen sizes using CSS media queries.

Add this to your HTML head for responsive scaling:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries: Change layout based on screen size.

@media (max-width: 768px) {
  .column { width: 100%; display: block; }
}

8. Articles

The <article> tag is an important semantic element in HTML5. It is meant to represent a self-contained piece of content that could be independently distributed or reused—such as a news story, blog post, or product description. Using semantic tags like <article> improves accessibility and helps search engines better understand your content structure.

The <article> element is used to represent self-contained, reusable pieces of content. For example:

Example Article

This article could be independently shared or syndicated.

Articles are often used for blog posts, news stories, or documentation sections.

9. Glossary

This glossary explains essential CSS and HTML terms used throughout the tutorial. Understanding these terms will help you read and write CSS more effectively.

Term	Definition	Example
Tag	HTML keyword that defines content	<p>, <div>, <a>
Element	Complete HTML structure	<p>Hello</p>
Attribute	Extra data in a tag	href, src, class
Selector	Targets HTML in CSS	p, .class, #id
Class	Reusable CSS label	.box {}
ID	Unique identifier for CSS	#header {}
Property	Style to apply	color, margin
Value	Property setting	blue, 10px
Rule	Selector + declarations	p { color: red; }
Flexbox	1D layout model	display: flex;
Grid	2D layout model	display: grid;
Media Query	Responsive design tool	@media (max-width: 600px)
Article	Independent section of content	<article>...</article>