Introduction to CSS

Introduction to CSS

CSS stands for Cascading Style Sheets. It controls presentation (colors, layout, spacing, fonts) separately from HTML structure.

Why CSS matters

  • Separation — content (HTML) vs presentation (CSS)
  • Consistency — site-wide look & feel
  • Responsiveness — adapt layouts for devices
  • Flexibility — reusable rules and themes
  • Accessibility — better experience for assistive tech

Naming conventions & organization

Use a clear methodology for maintainable CSS. Common approaches: BEM, SMACSS, OOCSS, ITCSS, Atomic CSS.

Basic syntax

Selector, property and value: 

selector {
  property: value;
}

Types of CSS

  • Inline CSS — inside an element using style="..."
  • Internal CSS — inside a document's <style> block
  • External CSS — linked via <link rel="stylesheet" href="...">

Examples (paste into Moodle source)

1) Inline CSS 

<h2 style="color: red; background-color: aqua; margin:10px;">Inline styled heading</h2>

2) Internal CSS (in <head>) 

<style>
  h1 { color: red; }
  .myHead { color: bisque; background: black; margin:10px; }
  #myId { color: brown; }
</style>

3) External CSS (link example + sample file) 

<!-- In the <head> of your HTML -->
<link rel="stylesheet" href="styles.css">

<!-- styles.css -->
h3 { color: rgb(114,52,156); }
.myHeadex { color: rgb(112,72,24); background-color: rgb(238,206,206); margin:10px; }
#myIdEx { color: rgb(165,42,73); }
.myPex { color: rgb(63,38,7); }

Practical example (HTML + inline demo) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS Demo</title>
</head>
<body style="font-family:Arial, sans-serif; margin:14px;">

  <h1 style="color:darkred;">Internal CSS Example</h1>

 
  <h2 style="color:bisque; background:black; padding:6px; display:inline-block;" class="myHead">This is my heading</h2>
  <p style="color:rgb(24,91,102);" class="myPtag">This is a paragraph</p>

  <h2 style="color:red; background:aqua; margin:10px;">Inline CSS heading</h2>

</body>
</html>
Quick reference

  • !important — increases rule priority (use sparingly)
  • Specificity order: inline > ID > class/attribute/pseudo-class > element
  • Use developer tools (F12) to inspect computed styles