Introduction to CSS
Understand CSS fundamentals, rule syntax and inclusion methods, and core layout properties such as the box model, flexbox, and media queries.
Summary
Read Summary
Flashcards
Save Flashcards
Quiz
Take Quiz
Quick Practice
Which aspects of a web page's design do Cascading Style Sheets typically define?
1 of 26
Summary
Fundamentals of Cascading Style Sheets
What Is CSS and Why It Matters
Cascading Style Sheets (CSS) control the visual appearance of web pages. HTML provides the structure and content—the words, images, and elements—while CSS tells the browser how that content should look: colors, fonts, spacing, layout, and all other design aspects.
The key advantage of separating CSS from HTML is called separation of concerns. When style information is isolated in CSS rather than embedded throughout HTML, several benefits emerge:
Your HTML markup stays clean and focused on content
You can change the entire look of a website by editing a few CSS rules, without touching the HTML
Multiple HTML pages can share the same CSS file, maintaining visual consistency across your site with minimal effort
This separation makes websites easier to maintain and update over time.
Understanding Cascading and Specificity
The term "cascading" describes how the browser decides which CSS rule applies when multiple rules could affect the same element. This is the heart of CSS, and understanding it prevents styling conflicts.
The specificity hierarchy determines which rule wins:
Identifier selectors have the highest specificity (written with a # symbol, like #header)
Class selectors have medium specificity (written with a . symbol, like .highlight)
Element selectors have the lowest specificity (like p or div)
When two rules have equal specificity, source order decides the winner: the rule that appears later in your CSS file overrides the earlier rule.
Why this matters: This system lets you write general styles for all elements of a type, then fine-tune specific cases without rewriting your entire stylesheet. For example, you might style all paragraphs with a base font size, then use a class selector to make certain paragraphs larger—the more specific class rule will override the general element rule.
CSS Rule Syntax
Every CSS rule has two main parts: a selector and a declaration block.
Selectors: Targeting Elements
A selector identifies which HTML elements the rule applies to. The three most common selector types are:
Element selector: Targets all instances of a named element. For example, p targets every paragraph element on the page.
Class selector: Targets elements with a specific class attribute. Written as .classname (with a period). For example, .alert targets all elements with class="alert".
Identifier selector: Targets the single element whose id attribute matches the value. Written as #idname (with a hash sign). For example, #header targets the element with id="header".
Declaration Blocks: Styling Rules
The declaration block appears after the selector, enclosed in curly braces {}. Inside, you write declarations that specify exactly how the element should look.
Each declaration has three parts:
A property name (what aspect you're styling, like color, margin, or font-size)
A colon :
A value (the specific setting, like blue, 20px, or 1.5em)
Each declaration ends with a semicolon. For example:
css
p {
color: blue;
font-size: 16px;
margin: 10px;
}
Here, the selector p targets all paragraphs. The declaration block contains three declarations setting the text color to blue, the font size to 16 pixels, and the margin to 10 pixels.
Adding CSS to HTML Documents
There are three methods to include CSS in an HTML document, each with appropriate use cases:
External Style Sheet (Recommended)
An external style sheet is a separate file with a .css extension containing all your CSS rules. Link it to your HTML document using a <link> element in the <head> section:
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
The rel="stylesheet" attribute tells the browser this file contains styling information. The href attribute points to the filename.
When to use this: External stylesheets are the most reusable and maintainable approach. Use this for most of your CSS, especially when multiple pages share the same styles.
Internal Style Sheet
An internal style sheet is a <style> block placed in the <head> section of your HTML document:
html
<head>
<style>
p {
color: green;
}
</style>
</head>
The CSS rules inside apply only to that specific HTML document.
When to use this: Use internal stylesheets for page-specific styling when you don't need to share styles across multiple pages.
Inline Style
An inline style is a style attribute added directly to an element's opening tag:
html
<p style="color: red;">This paragraph is red.</p>
The declaration inside applies only to that one element.
When to use this: Use inline styles sparingly—mainly for quick testing or emergency overrides during debugging. They make your HTML messy and are hard to maintain at scale.
Best practice hierarchy: Prefer external stylesheets → use internal stylesheets when needed → avoid inline styles except for testing.
Core CSS Properties
You'll use certain CSS properties constantly. Here are the most essential ones:
Color and Background
color: Sets the foreground text color. Example: color: blue;
background: Sets the background color or image. Example: background: yellow; or background: url('image.jpg');
Font Properties
font-family: Defines the typeface. You typically list multiple fonts as a fallback chain: font-family: Arial, Helvetica, sans-serif;
font-size: Sets text size using units like pixels (16px), em (1.5em), or rem (1rem)
font-weight: Controls boldness (values like normal, bold, or numerical values like 400, 700)
font-style: Sets italic or normal text style
The Box Model: Spacing and Borders
Understanding the box model is crucial for layout. Every HTML element is conceptually a box with these layers from outside to inside:
margin: Creates space outside the element's border. This space pushes other elements away from your element.
padding: Creates space inside the element's border, between the border and the content.
border: Defines a visible line around the element. You specify the width, style (like solid, dashed), and color. Example: border: 2px solid black;
A common point of confusion: Students often mix up margin and padding. Remember: margin is outside, padding is inside. If you want space between an element and other elements, use margin. If you want space between an element's border and its content, use padding.
Display Property
The display property determines how an element generates a box and interacts with other elements:
block: The element takes up the full width available and starts a new line. Examples: <div>, <p>, <h1>
inline: The element only takes up as much width as necessary and does not start a new line. Examples: <span>, <a>, <strong>
none: The element is hidden from the page entirely
Changing the display property can alter how elements flow on the page. For example, you might make an inline element behave like a block element, or hide an element without removing it from the HTML.
<extrainfo>
Advanced Layout Concepts (Preview)
These topics extend beyond CSS fundamentals but are worth knowing exist:
Flexbox and Grid
Flexbox provides a one-dimensional layout system for arranging items along a main axis and a cross axis. It's powerful for creating flexible, responsive designs with minimal code.
Grid provides a two-dimensional layout system for placing items into rows and columns simultaneously.
Both are modern, powerful tools for complex layouts, but they build on the fundamentals you've learned here.
Media Queries
Media queries allow CSS rules to apply conditionally based on device characteristics, such as screen width:
</extrainfo>css
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
This rule only applies when the screen is 600 pixels or narrower, enabling responsive designs that adapt to phones, tablets, and desktops.
Advanced Selectors
Attribute selectors: Target elements based on attributes. Example: input[type="text"] targets text input fields.
Pseudo-class selectors: Target elements in particular states. Example: a:hover targets links when the user hovers over them.
Pseudo-element selectors: Target specific parts of elements. Example: p::first-line targets the first line of a paragraph.
</extrainfo>
Flashcards
Which aspects of a web page's design do Cascading Style Sheets typically define?
Colors, fonts, spacing, and layout.
What is the main benefit of separating style (CSS) from structure (HTML)?
It keeps markup clean and allows site-wide design changes by editing a few rules.
What does the term "Cascading" refer to in CSS?
The process by which the browser decides which style rule wins when multiple rules apply to the same element.
In CSS cascading, which rule takes precedence if two rules have equal specificity?
The rule that appears later in the source order.
What is the hierarchy of CSS selector types from highest to lowest rank?
Identifier selectors
Class selectors
Element selectors
How is a class selector written in a CSS rule?
With a period (.) followed by the class name.
How is an identifier (ID) selector written in a CSS rule?
With a hash sign (#) followed by the identifier name.
What characters are used to enclose a CSS declaration block?
Curly braces ({ }).
What two components make up a CSS declaration?
A property name and a value.
What symbols are used to separate a property from its value and to end a declaration?
A colon (:) separates them, and a semicolon (;) ends the declaration.
Where is the <link> element placed to connect an external CSS file to an HTML document?
In the <head> section.
What are the required attributes for a <link> element used to include CSS?
rel="stylesheet" and href (pointing to the file).
Where are internal style sheets placed within an HTML document?
Inside <style> tags within the <head> section.
When are internal style sheets most useful?
For page-specific styling when an external file is not required.
How are inline styles applied to an HTML element?
By adding a style attribute directly to the element's start tag.
What is the primary use case for inline styles?
Quick testing or overriding other style rules.
Which property is used to set the foreground text color?
color
Which property defines the typeface for an element's text?
font-family
What does the display property determine in a CSS layout?
How an element generates its box (e.g., block, inline, or none).
Which property creates space outside of an element's border?
margin
Which property creates space inside the border, between the border and the content?
padding
What three characteristics can be defined using the border property?
Width, style, and color.
What is the difference between Flexbox and Grid layout systems?
Flexbox is one-dimensional (axis-based), while Grid is two-dimensional (rows and columns).
What is the purpose of media queries in CSS?
To apply styles conditionally based on device characteristics like screen width.
Which selector type targets elements based on their current state, such as when a user hovers over them?
Pseudoclass selectors.
Which selector type is used to target a specific part of an element, like the first line of text?
Pseudoelement selectors.
Quiz
How is a class selector written in CSS?
1 of 15
Key Concepts
CSS Fundamentals
Cascading Style Sheets (CSS)
CSS selector
CSS specificity
Inline style
CSS Layout Techniques
CSS box model
Flexbox
CSS Grid Layout
Media query
CSS Selectors
Pseudoclass selector
Pseudoelement selector
