CSS Fundamentals

Learning Objectives

• Understand what CSS is and its role in web development
• Learn CSS syntax and selectors
• Master essential CSS properties
• Apply CSS to HTML documents
• Create basic styling and layouts

What is CSS?

• Describes how HTML elements should be displayed
• Controls layout, colors, fonts, and visual design
• Separates content (HTML) from presentation (CSS)
• Enables responsive and accessible design

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

CSS Syntax

selector {
  property: value;
  property: value;
}

• Selector: Targets HTML elements
• Property: What you want to change
• Value: How you want to change it
• Declaration: Property-value pair
• Rule: Complete selector + declarations

CSS Selectors

/* Element selector */
h1 { color: red; }
/* Class selector */
.highlight { background: yellow; }
/* ID selector */
#header { font-size: 20px; }
/* Descendant selector */
div p { margin: 10px; }

• Element: Targets all elements of that type
• Class: Targets elements with specific class
• ID: Targets element with specific ID
• Descendant: Targets nested elements

CSS Specificity

/* Specificity: 0,0,0,1 */
p { color: black; }
/* Specificity: 0,0,1,0 */
.text { color: blue; }
/* Specificity: 0,1,0,0 */
#content { color: red; }
/* Specificity: 0,0,0,0 */
* { color: green; }

• Determines which styles are applied
• Higher specificity wins
• ID > Class > Element > Universal
• Use !important sparingly

Adding CSS to HTML

<!-- Method 1: External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Method 2: Internal CSS -->
<style>
h1 { color: blue; }
</style>
<!-- Method 3: Inline CSS -->
<h1 style="color: blue;">Title</h1>

• External: Best for multiple pages
• Internal: Good for single page
• Inline: Avoid for maintainability

Text Properties

h1 {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  line-height: 1.5;
}

CSS Color Values

/* Named colors */
color: red;
/* Hexadecimal */
color: #ff0000;
color: #f00;
/* RGB */
color: rgb(255, 0, 0);
/* RGBA (with transparency) */
color: rgba(255, 0, 0, 0.5);

Background Properties

.box {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

The CSS Box Model

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

• Content: Actual content area
• Padding: Space inside border
• Border: Border around element
• Margin: Space outside border

Border Properties

.border-demo {
  border-width: 3px;
  border-style: solid;
  border-color: #007bff;
  border-radius: 10px;
}

Display Properties

/* Block elements */
.block { display: block; }
/* Inline elements */
.inline { display: inline; }
/* Inline-block elements */
.inline-block { display: inline-block; }
/* Hidden elements */
.hidden { display: none; }

CSS Positioning

/* Static (default) */
.static { position: static; }
/* Relative */
.relative { position: relative; top: 10px; left: 20px; }
/* Absolute */
.absolute { position: absolute; top: 0; right: 0; }
/* Fixed */
.fixed { position: fixed; bottom: 20px; right: 20px; }

CSS Units

/* Absolute units */
font-size: 16px;
width: 2in;
height: 3cm;
/* Relative units */
font-size: 1.5em;
width: 50%;
height: 100vh;
margin: 1rem;

• px: Pixels (fixed)
• %: Percentage of parent
• em: Relative to font size
• rem: Relative to root font size
• vh/vw: Viewport height/width

CSS Comments

/* This is a CSS comment */
/* Header styles */
header {
  background: #333;
  color: white;
}
/* TODO: Add responsive styles */
/* @media (max-width: 768px) { ... } */

• Use /* */ for comments
• Comments are ignored by browsers
• Help document your code
• Can be single or multi-line

CSS Best Practices

• Use meaningful class names
• Keep selectors simple and specific
• Organize properties logically
• Use consistent naming conventions
• Comment complex rules
• Minimize use of !important
• Test across different browsers

CSS Inheritance

body {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}
/* All child elements inherit these properties */

• Child elements inherit some properties from parents
• Inherited: font-family, color, line-height
• Not inherited: margin, padding, border, background
• Use inherit to force inheritance

The CSS Cascade

/* Rule 1: User agent (browser default) */
/* Rule 2: User styles */
/* Rule 3: Author styles (your CSS) */
/* Rule 4: Author !important */
/* Rule 5: User !important */

• CSS stands for "Cascading Style Sheets"
• Multiple rules can apply to the same element
• Specificity and order determine which wins
• Later rules override earlier ones

CSS Shorthand Properties

/* Long form */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Shorthand */
margin: 10px 20px;
/* Even shorter */
margin: 10px;

• Combine related properties into one
• Saves time and reduces code
• Common shorthands: margin, padding, border, background
• Order matters: top, right, bottom, left

CSS Debugging Tips

• Use browser developer tools
• Check specificity conflicts
• Verify property names and values
• Test with temporary borders
• Use CSS validation tools
• Check for typos and syntax errors

/* Debug with temporary border */
* { border: 1px solid red !important; }

Organizing CSS

• Reset/Normalize: Browser consistency
• Base styles: Typography, colors, defaults
• Layout: Grid, containers, positioning
• Components: Buttons, forms, navigation
• Utilities: Helper classes
• Responsive: Media queries

CSS Tools and Resources

• Browser DevTools: Chrome, Firefox, Safari
• CSS Validators: W3C CSS Validator
• CSS Preprocessors: Sass, Less, Stylus
• CSS Frameworks: Bootstrap, Foundation
• CSS Grid Generators: CSS Grid Garden
• Color Tools: Color pickers, palettes