What Is CSS?
CSS (Cascading Style Sheets) is used to control the presentation of HTML elements. It separates content (HTML) from styling (colors, layouts, fonts), enabling a more maintainable, scalable approach to web design.
Key Concepts
- CSS Syntax
- A CSS rule consists of a selector and a declaration block.
- Example:
p { color: blue; font-size: 16px; }
- Selector:
p
(targets all<p>
elements). - Declarations:
color: blue;
,font-size: 16px;
.
- Selector:
- Selectors
- Element Selector: Targets by tag name (
p
,h1
,li
). - Class Selector: Targets elements with a specific class (
.classname
). - ID Selector: Targets a unique element with a specific ID (
#elementId
). - Universal Selector:
*
targets all elements (used sparingly). - Descendant / Combinators: e.g.,
div p
,.container > h2
, etc.
- Element Selector: Targets by tag name (
- Specificity
- Determines which CSS rule takes precedence if multiple rules affect the same element.
- General hierarchy: Inline styles > ID selectors > Class selectors > Element selectors.
- Example: A rule using
#header
has higher specificity than a rule using.header
, which in turn is higher thanheader
(element).
- Inline, Internal, and External Styles
- Inline: Written directly in the HTML element via the
style
attribute (e.g.,<p style="color: red;">Text</p>
). - Internal: Placed within a
<style>
tag inside<head>
of the HTML document. - External: Defined in a separate CSS file (linked via
<link rel="stylesheet" href="style.css">
). - Best Practice: Use external stylesheets to keep HTML and CSS separate and maintainable.
- Inline: Written directly in the HTML element via the
HTML + CSS Example
html Copy code <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Week 3, Day 1 Example</title> <!-- Internal CSS example --> <style> h1 { color: teal; text-align: center; } .highlight { background-color: yellow; } #special { color: red; font-weight: bold; } </style> <!-- External CSS file can also be linked: <link rel="stylesheet" href="styles.css"> --> </head> <body> <h1>My First CSS Example</h1> <p class="highlight">This paragraph has a yellow background via a class selector.</p> <p id="special">This paragraph is red and bold via an ID selector.</p> <p style="font-style: italic;">This paragraph uses inline CSS to italicize text.</p> </body> </html>
- Selectors:
h1
(element),.highlight
(class),#special
(ID). - Inline CSS:
style="font-style: italic;"
on a<p>
tag.
Definition Section
- CSS (Cascading Style Sheets)
- A language for describing the presentation of web pages, including colors, layout, and fonts.
- Selector
- The part of a CSS rule that matches the HTML element(s) to be styled. (e.g.,
p
,.myClass
,#myId
)
- The part of a CSS rule that matches the HTML element(s) to be styled. (e.g.,
- Declaration Block
- A set of one or more declarations within curly braces (
{}
). Each declaration has a property and a value (e.g.,color: blue;
).
- A set of one or more declarations within curly braces (
- Specificity
- A calculation method to determine which CSS rule overrides another when multiple rules apply to the same element.
- Inline / Internal / External Styles
- Methods of applying CSS to HTML, with external being the most maintainable in most cases.
Brief History of CSS
- Mid-1990s: CSS1 introduced as a way to separate presentation from structure (HTML).
- Late 1990s: CSS2 standardized layout properties, though not all browsers fully supported it.
- CSS3 (2012+): Broke into modules for easier updates (e.g., Flexbox, Grid, Animations).
Fun Facts
- CSS stands for Cascading Style Sheets because multiple CSS rules can cascade down to an element, with specificity and inheritance deciding which rules apply.
- Early browsers like Netscape and Internet Explorer had inconsistent CSS support, making cross-browser styling a challenge.
- Inline styles have the highest specificity (except for
!important
), so they often override external styles unintentionally—one reason to avoid them for large projects.
Practice Problems
Create a new HTML file for each problem, and use CSS either inline, internal, or external as instructed. If nothing is specified, use external.
Problem 1: Simple Styling
- File Name:
problem1.html
- Add an
<h1>
heading and<p>
paragraph. - Style the heading with inline CSS to make it blue.
- Inside a
<style>
tag, change the paragraph’s color to green.
Problem 2: Class vs. ID
- File Name:
problem2.html
- Create at least two paragraphs: one with a class called “highlight” and one with an ID called “special”.
- In an internal or external stylesheet, make “highlight” paragraphs have a yellow background, and the “special” paragraph text bold and red.
- Add a third paragraph with both class and ID. Confirm which styles override if any conflicts exist.
Problem 3: External Stylesheet
- File Name:
problem3.html
, plus a CSS file namedstyle.css
. - Link
style.css
in the<head>
using<link rel="stylesheet" href="style.css">
. - Style headings, paragraphs, and a custom class (like
.infoBox
) to confirm external styles are working. - Add one inline style rule on an element and observe how it overrides the external stylesheet.
Advanced Problems
Problem 4: Styled Navigation Bar
File Name: problem4.html
Instructions:
- HTML Structure:
- Create a standard HTML document.
- In the
<body>
, add a<header>
element that contains a<nav>
section. - Inside
<nav>
, create an unordered list (<ul>
) with at least four list items (<li>
), each containing an<a>
tag for navigation (e.g., Home, About, Services, Contact).
- CSS Styling Requirements:
- Internal Styles:
- Within a
<style>
tag in the<head>
, add rules to:- Remove default list styling and display the list items horizontally.
- Style the links with a base color (e.g., dark blue) and remove text decoration.
- On hover (using the
:hover
pseudo-class), change the link color to a contrasting color.
- ID and Class Selectors:
- Assign an
id
to one of the<a>
elements (e.g.,id="specialLink"
) and create a rule that changes its color or font style. - Assign a class (e.g.,
class="nav-item"
) to all<li>
elements and style them with padding or margins.
- Assign an
- Inline Style:
- Add an inline style on one of the
<a>
tags (for example, settingfont-weight: bold;
) to see how inline styles override the internal stylesheet.
- Add an inline style on one of the
- Objective:
- Build a navigation bar that demonstrates the use of element, class, and ID selectors—as well as inline styles—and understand how CSS specificity determines which styles are applied.
Problem 5: Product Card with External Stylesheet
Files:
- HTML File:
problem5.html
- CSS File:
style.css
Instructions:
- HTML Structure:
- Create a standard HTML document and link to
style.css
in the<head>
using the<link rel="stylesheet" href="style.css">
tag. - In the
<body>
, create a container<div>
with a class of"card"
. - Inside the card, include:
- An
<img>
element to display a product image (use a placeholder image URL or file). - An
<h2>
element for the product title. - A
<p>
element for a brief product description. - A
<span>
element for the product price.
- An
- Create a standard HTML document and link to
- CSS Styling Requirements (in style.css):
- External Styles:
- Style the
.card
class to add a border, some padding, and a shadow effect. - Style the
<h2>
,<p>
, and<span>
elements within.card
to create a visually appealing layout (e.g., set font sizes, margins, and colors).
- Style the
- Inline Override:
- In your HTML, add an inline style to the
<span>
element (for example,style="color: red;"
) that overrides the color defined in the external stylesheet. Observe how inline styles take precedence.
- In your HTML, add an inline style to the
- External Styles:
- Objective:
- Create a product card that demonstrates how to separate styling into an external stylesheet while understanding how inline styles override external rules due to higher specificity.
Problem 6: Advanced Selector Challenge
File Name: problem6.html
Instructions:
- HTML Structure:
- Set up a standard HTML document.
- In the
<body>
, create a<div>
container with a class of"container"
. - Inside this container, add several nested elements:
- Multiple
<p>
paragraphs (at least 4) with some placeholder text. - At least one
<a>
tag inside a paragraph. - An unordered list (
<ul>
) with several list items (<li>
). Add a class (e.g.,"list-item"
) to each<li>
.
- Multiple
- CSS Styling Requirements (Internal or External Styles):
- Descendant Selectors:
- Write a rule that targets
<a>
elements only when they are inside a paragraph within the container (e.g.,.container p a { ... }
). Style these links with a unique color.
- Write a rule that targets
- Child Combinators:
- Use a child combinator to style only the direct
<li>
children of the<ul>
(e.g.,.container > ul > li { ... }
). Add padding or a background color.
- Use a child combinator to style only the direct
- Attribute Selectors and Pseudo-classes:
- Use the
:nth-child()
pseudo-class to style every second<li>
differently (e.g., alternate background colors).
- Use the
- Inline Style Check:
- For one of the
<p>
elements, add an inline style (e.g.,style="font-size: 20px;"
) and see how it overrides or interacts with your defined styles.
- For one of the
- Descendant Selectors:
- Objective:
- Develop a webpage that utilizes various types of CSS selectors—including descendant, child combinator, attribute selectors, and pseudo-classes—to reinforce your understanding of CSS specificity and rule targeting.