CSS

CSS (Cascading Style Sheets) is the language used to style webpages. It defines colors, layouts, borders, spacing, fonts, animations, and responsive design. CSS works with HTML to make webpages visually appealing and well-structured. This chapter introduces CSS basics: selectors, colors, borders, backgrounds, text styles, the box model, display properties, flexbox, grids, and a final example using multiple CSS features.

What is CSS?

CSS stands for Cascading Style Sheets. It controls how HTML elements look on the screen. CSS can be written in three ways: inline, internal, and external.

Inline CSS

Inline CSS is written directly inside an element's style attribute. It is used for quick or one-time changes but is not recommended for large projects.

<h1 style="color:red;">Hello</h1>

Internal CSS

Internal CSS is written inside a <style> section within the <head> of an HTML document.

<style>
  h1 { color: blue; }
</style>

External CSS

External CSS is stored in a separate .css file and linked using a <link> tag. This is the preferred method for real websites.

<link rel="stylesheet" href="styles.css" />

Selectors

CSS selectors are patterns used to select HTML elements. Below are common selectors.

Element selector

This selects all elements with a given tag name.

p { color: green; }

Class selector

Classes are reusable styles applied using a dot prefix.

.box { border: 1px solid black; }

ID selector

IDs are unique and should be used for single elements only.

#header { background-color: yellow; }

Universal selector

The universal selector selects all elements.

* { margin: 0; padding: 0; }

Group selector

Multiple selectors can share the same style by separating them with commas.

h1, p { font-family: Arial; }

Colors in CSS

CSS provides multiple ways to define colors.

Named colors

h1 { color: red; }

HEX colors

p { color: #00ff00; }

RGB colors

div { color: rgb(0, 0, 255); }

RGBA colors

span { background-color: rgba(255, 0, 0, 0.5); }

Borders

Borders define the edge around an element.

Border styles

div { border: 2px solid black; }

Rounded borders

img { border-radius: 10px; }

Backgrounds

CSS backgrounds allow color, gradients, and images.

Background color

body { background-color: lightgray; }

Background image

div { background-image: url("image.png"); }

Background repeat

div { background-repeat: no-repeat; }

Text styling

CSS controls fonts, sizes, spacing, alignment, and decoration.

Font size

p { font-size: 20px; }

Text alignment

h1 { text-align: center; }

Text decoration

a { text-decoration: none; }

Box model

The CSS box model includes content, padding, border, and margin.

div {
  padding: 10px;
  margin: 20px;
  border: 1px solid black;
}

Display property

Display determines how an element behaves in layout. Common values include block, inline, inline-block, and none.

Block elements

div { display: block; }

Inline elements

span { display: inline; }

Inline-block

img { display: inline-block; }

Flexbox

Flexbox is a layout model that arranges items along a row or column.

Basic flex container

.container {
  display: flex;
  gap: 10px;
}

Justify content

.container { justify-content: center; }

Align items

.container { align-items: center; }

CSS Grid

Grid allows two-dimensional layouts with rows and columns.

Basic grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Grid rows

.grid { grid-template-rows: 100px 100px; }

Grid areas

header { grid-area: header; }

Transitions

Transitions allow elements to change smoothly over time.

Simple transition

button {
  transition: background-color 0.5s;
}
button:hover {
  background-color: pink;
}

Animations

Animations allow elements to move or change style in steps.

Keyframes

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

Responsive design

Media queries make pages adapt to different screen sizes.

Example media query

@media (max-width: 600px) {
  div { font-size: 14px; }
}

Final example — CSS feature showcase

This final example demonstrates multiple CSS properties: colors, borders, layout, flexbox, gradients, hover effects, and spacing. The example is provided as two external files: index.html and style.css. Copy each file's contents into the named file and open index.html in a browser to view the showcase.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Showcase</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>CSS Feature Showcase</h1>
  <div class="wrapper">
    <div class="card one">Box 1</div>
    <div class="card two">Box 2</div>
    <div class="card three">Box 3</div>
  </div>
  <footer class="foot">Try resizing the window to see responsiveness.</footer>
</body>
</html>
/* style.css */

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(180deg, #f4f7fb 0%, #eaf0ff 100%);
  color: #222;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.35s, box-shadow 0.35s;
}

.card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.one { background: linear-gradient(135deg, #ff6b6b, #ff9472); }
.two { background: linear-gradient(135deg, #4b77ff, #9b6bff); }
.three { background: linear-gradient(135deg, #2ecc71, #8ef5a7); }

.foot {
  text-align: center;
  margin-top: 24px;
  color: #444;
}

/* Responsive */
@media (max-width: 600px) {
  .card { width: 120px; height: 120px; font-size: 16px; }
  .wrapper { gap: 12px; }
}

MCQs

1. What does CSS stand for?

(a) Computer Style Sheet

(b) Cascading Style Sheets

(c) Creative Styling System

(d) Central Style Syntax

► (b) Cascading Style Sheets

2. Which HTML tag is used to link an external CSS file?

(a) <style src="style.css">

(b) <link rel="stylesheet" href="style.css" />

(c) <css src="style.css">

(d) <script src="style.css">

► (b) <link rel="stylesheet" href="style.css" />

3. Which property is used to change text color?

(a) font-color

(b) text-color

(c) color

(d) foreground

► (c) color

4. Which property controls the size of text?

(a) font-weight

(b) font-size

(c) text-size

(d) font-style

► (b) font-size

5. Which selector targets a class?

(a) .classname

(b) #classname

(c) classname

(d) *classname

► (a) .classname

6. Which unit is relative to the root font size?

(a) em

(b) rem

(c) px

(d) %

► (b) rem

7. Which property sets the background color of an element?

(a) bg-color

(b) background

(c) background-color

(d) color-background

► (c) background-color

8. Which property adds space inside an element's border?

(a) margin

(b) spacing

(c) padding

(d) border-space

► (c) padding

9. Which property adds space outside an element?

(a) padding

(b) spacing

(c) margin

(d) outline

► (c) margin

10. What is the correct syntax for a CSS comment?

(a) // comment

(b) <!-- comment -->

(c) /* comment */

(d) # comment

► (c) /* comment */

11. Which property makes text bold?

(a) font-style

(b) text-bold

(c) font-weight: normal

(d) font-weight

► (d) font-weight

12. Which property is used to control how an element is displayed?

(a) layout

(b) visibility

(c) display

(d) position

► (c) display

13. Which value hides an element but keeps its layout space?

(a) display: none

(b) visibility: hidden

(c) opacity: 0

(d) hidden: true

► (b) visibility: hidden

14. Which property creates rounded corners?

(a) border-radius

(b) corner-radius

(c) round-corners

(d) radius-border

► (a) border-radius

15. In flexbox, which property aligns items along the cross axis (vertical by default)?

(a) justify-content

(b) align-items

(c) flex-direction

(d) align-content

► (b) align-items

16. Which selector chooses all <p> elements inside a <div>?

(a) div p

(b) div.p

(c) div > p

(d) p div

► (a) div p

17. Which CSS feature is commonly used to create gradients?

(a) gradient()

(b) bg-gradient

(c) background-image: linear-gradient(...)

(d) color-gradient

► (c) background-image: linear-gradient(...)

18. Which unit represents pixels?

(a) px

(b) em

(c) rem

(d) %

► (a) px