Loading…

Introduction to CSS | Web Development Fundamentals | Skivvy

YouTube video ID required

Introduction to CSS

Name: Web Development Fundamentals
Availability: InStock

Lesson Overview

CSS (Cascading Style Sheets) is the language used to style and layout web pages. It works alongside HTML to control the visual presentation of your content, making your websites beautiful and responsive.

What You'll Learn:

What CSS is and why it's important
CSS syntax and basic structure
How to link CSS to HTML documents
The cascade and specificity
Basic CSS properties

Key Concepts:

CSS separates content (HTML) from presentation (CSS)
CSS follows a cascade order for rule application
CSS rules consist of selectors and declaration blocks
CSS can be applied inline, internally, or externally

What is CSS?

CSS stands for Cascading Style Sheets. It's a stylesheet language that describes how HTML elements should be displayed on screen, paper, or in other media.

Why Use CSS?

Separation of Concerns: Keep content (HTML) separate from presentation (CSS)
Consistency: Apply consistent styling across multiple pages
Maintenance: Update styles globally from one place
User Experience: Create engaging and accessible interfaces
Performance: Reduce file sizes and improve load times

CSS Syntax

CSS consists of selectors and declaration blocks:

selector {
  property: value;
  property: value;
}

Parts of a CSS Rule:

Selector: Targets the HTML element(s) to style
Property: The style attribute to change
Value: The value assigned to the property
Declaration Block: Contains one or more declarations

p {
  color: blue;
  font-size: 16px;
  margin: 10px;
}

Basic Selectors

Element Selector

Targets all elements of a specific type:

h1 {
  color: navy;
  text-align: center;
}

p {
  line-height: 1.6;
}

Class Selector

Targets elements with a specific class attribute:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

ID Selector

Targets a single element with a specific ID:

#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

#main-content {
  max-width: 1200px;
  margin: 0 auto;
}

How to Add CSS to HTML

1. External Stylesheet (Recommended)

Create a separate .css file and link it in your HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Content here -->
</body>
</html>

styles.css:

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

2. Internal Stylesheet

Add CSS inside a <style> tag in the HTML head:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }
    
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <!-- Content here -->
</body>
</html>

3. Inline Styles

Add CSS directly to HTML elements (use sparingly):

<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

The Cascade

CSS stands for "Cascading" Style Sheets because styles cascade down from more general rules to more specific ones.

Cascade Order (Highest to Lowest Priority):

Inline styles (highest priority)
Internal stylesheets
External stylesheets
Browser default styles (lowest priority)

Specificity

More specific selectors override less specific ones:

/* Low specificity */
p {
  color: black;
}

/* Higher specificity */
.content p {
  color: blue;
}

/* Even higher specificity */
#main-content p.highlight {
  color: red;
}

Basic CSS Properties

Text and Font Properties

.text-styling {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  text-decoration: underline;
  color: #333333;
  line-height: 1.5;
}

Background Properties

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

Border Properties

.border-example {
  border: 2px solid #333;
  border-radius: 8px;
  border-left: 4px dotted red;
}

Spacing Properties

.spacing-example {
  margin: 20px;        /* All sides */
  padding: 10px 15px;  /* Top/bottom: 10px, Left/right: 15px */
  margin-top: 10px;    /* Just top */
  padding-left: 20px;  /* Just left */
}

Color Values

CSS supports multiple color formats:

.color-examples {
  /* Hexadecimal */
  color: #ff0000;
  
  /* RGB */
  color: rgb(255, 0, 0);
  
  /* RGBA (with transparency) */
  color: rgba(255, 0, 0, 0.5);
  
  /* HSL */
  color: hsl(0, 100%, 50%);
  
  /* HSLA (with transparency) */
  color: hsla(0, 100%, 50%, 0.5);
  
  /* Color names */
  color: red;
}

CSS Comments

Comments are ignored by browsers and help document your code:

/* This is a CSS comment */
h1 {
  color: blue; /* Make headings blue */
}

/* 
   This is a multi-line comment
   that spans multiple lines
*/

Common CSS Units

Absolute Units

px: Pixels (screen dots)
pt: Points (1/72 of an inch)
in: Inches
cm: Centimeters
mm: Millimeters

Relative Units

%: Percentage of parent element
em: Relative to the element's font size
rem: Relative to the root font size
vw: Viewport width (1% of viewport width)
vh: Viewport height (1% of viewport height)

.unit-examples {
  font-size: 16px;      /* Absolute */
  width: 50%;           /* Relative to parent */
  margin: 2em;          /* 2 times the font size */
  padding: 1rem;        /* 1 times the root font size */
  height: 100vh;        /* Full viewport height */
}

Best Practices

1. Use External Stylesheets

Keep CSS in separate .css files for better organization and caching.

2. Use Meaningful Class Names

Choose descriptive class names that explain their purpose:

/* Good */
.navigation-menu, .call-to-action-button, .user-profile-card

/* Avoid */
.red-text, .big-font, .margin-10

3. Organize Your CSS

Group related styles together and use comments:

/* === HEADER STYLES === */
.header { /* styles */ }
.nav { /* styles */ }

/* === MAIN CONTENT === */
.main-content { /* styles */ }
.sidebar { /* styles */ }

4. Mobile-First Approach

Design for mobile devices first, then add styles for larger screens:

/* Base styles (mobile) */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

Practice Exercise

Create a simple styled webpage:

Create an HTML file with basic structure
Create an external CSS file
Style the following elements:
- A header with your name
- A navigation menu
- A main content area with a heading and paragraph
- A footer

Requirements:

Use external CSS
Include at least one element selector, class selector, and ID selector
Apply different colors, fonts, and spacing
Add comments to your CSS

Summary

In this lesson, you learned:

What CSS is and why it's important
CSS syntax and structure
How to link CSS to HTML documents
The cascade and specificity concepts
Basic CSS properties and values
Best practices for writing CSS

In the next lesson, you'll dive deeper into CSS selectors and properties to create more sophisticated styles.

Web Development Fundamentals

01HTML Fundamentals0.5 hours

02CSS Styling1.5 hours

03JavaScript Essentials0.5 hours