What is CSS?

CSS (Cascading Style Sheets) controls the visual appearance of HTML elements. Learn how to add styling to your web pages.

CSS Definition

/* CSS stands for Cascading Style Sheets */
/* It describes how HTML elements look */
selector { property: value; }
→
HTML + CSS = Styled Webpage

CSS separates content (HTML) from presentation (styling):

  • HTML defines structure and content
  • CSS defines colors, fonts, layout, and visual effects
  • One CSS file can style multiple HTML pages

CSS Syntax Basics

h1 {
  color: blue;
  font-size: 24px;
}
→
Large Blue Heading

Selector: h1 (what to style)
Property: color (what aspect to change)
Value: blue (how to change it)

Three Ways to Add CSS

<!-- 1. Inline CSS -->
<p style="color: red;">Red text</p>

<!-- 2. Internal CSS -->
<style>
  p { color: blue; }
</style>

<!-- 3. External CSS -->
<link rel="stylesheet" href="styles.css">
→
Red text (inline)
Blue text (internal)
Green text (external)

Best Practice: Use external CSS files for maintainable, reusable styles

Common CSS Selectors

/* Element selector */
h1 { color: navy; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#main { font-size: 18px; }
→
Navy heading
Highlighted text
Larger main text

Use . for classes, # for IDs, no prefix for elements

Essential CSS Properties

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 20px;
}
→
Entire page styled with:
- Arial font family
- Light gray background
- 20px margin around content

Common Errors

/* Missing semicolon */
h1 { color: blue }

/* Missing colon */
h1 { color blue; }

/* Wrong selector syntax */
highlight { color: red; }  /* Missing . */

Always include semicolons, colons, and proper selector syntax

Practical Use: Simple Website

body {
  font-family: Georgia, serif;
  line-height: 1.6;
}

h1 {
  color: #2c3e50;
  text-align: center;
}

.highlight {
  background-color: #fff3cd;
  padding: 10px;
}
→
Professional-looking webpage with:
- Readable font and spacing
- Centered, colored headings
- Highlighted important content

Your Task: First CSS Styles

Add CSS to style the HTML provided:

  1. Style the <body> with a font-family and background color
  2. Make the <h1> a different color and larger font-size
  3. Style the .highlight class with a background color and text color
  4. Use proper CSS syntax with semicolons and colons

Remember: CSS syntax is selector { property: value; }

Section 1/8CSS Definition

CSS Definition

CSS separates content (HTML) from presentation (styling):HTML defines structure and contentCSS defines colors, fonts, layout, and visual effectsOne CSS file can style multiple HTML pages

What is CSS?

CSS (Cascading Style Sheets) controls the visual appearance of HTML elements. Learn how to add styling to your web pages.

CSS Definition

/* CSS stands for Cascading Style Sheets */
/* It describes how HTML elements look */
selector { property: value; }
→
HTML + CSS = Styled Webpage

CSS separates content (HTML) from presentation (styling):

  • HTML defines structure and content
  • CSS defines colors, fonts, layout, and visual effects
  • One CSS file can style multiple HTML pages

Preview