CoachingUgosay

Web Development - CSS Documentation

The Style Language for the Web

CSS Index

Navigate through the essential CSS topics

Why Learn CSS

Understand the purpose and importance of CSS in web design.

CSS Syntax

Master the syntax of selectors, properties, and values.

Implementation Methods

Learn inline, internal, and external CSS styles.

Styling Properties

Explore text, color, background, layout, and more.

Box Model

Understand margins, borders, padding, and content sizing.

Why LearnCSS?

CSS transforms raw HTML into beautiful, responsive websites that engage users

Separation of Concerns

CSS separates content (HTML) from presentation (styling), making code cleaner and more maintainable.

Consistent Styling

Change the look of your entire website by editing just one CSS file.

Responsive Design

Create layouts that adapt to different screen sizes with media queries.

Performance

Reduces page load times by caching stylesheets for reuse across pages.

CSS Transformation Comparison

X

Without CSS

<div>
  <font color="blue" size="4">
  Welcome</font>
  <table width="100%" bgcolor="gray">
    <tr>
      <td><font face="Arial">
      Home</font></td>
      <td><font face="Arial">
      About</font></td>
    </tr>
  </table>
  <p><font color="red">
  Content here</font></p>
</div>
  • Mixes content with presentation
  • No consistency across pages
  • Difficult to maintain
โœ“

With CSS

<style>
  .header { color: blue; 
  font-size: 1.2rem; }
  .nav { background: gray;
   display: flex; }
  .content { color: red; }
</style>

<div>
  <h1 class="header">Welcome</h1>
  <nav class="nav">
    <a>Home</a>
    <a>About</a>
  </nav>
  <p class="content">Content here</p>
</div>
  • Clean separation of concerns
  • Consistent styling across pages
  • Better performance and maintainability

CSS Power Features

External Stylesheets

Store CSS in separate files for reuse across multiple pages, ensuring consistency and easier maintenance.

<link rel="stylesheet" href="styles.css">
Cascading Nature

Styles cascade from multiple sources, allowing for flexible and organized styling with predictable precedence.

/* Specificity order: !important > inline > id > class > element */
Responsive Capabilities

Create designs that adapt to different devices and screen sizes using media queries and flexible units.

@media (max-width: 768px) {
  /* Mobile styles */
}

CSSSyntax Fundamentals

Master the building blocks of CSS styling with these core concepts

Basic Syntax Structure

CSS syntax consists of a selector and a declaration block containing property-value pairs.

selector {
  property: value;
  property: value;
}

Try It Out

example.css
/* Edit this CSS */
.header {
  background: #1e3a8a;
  padding: 1rem;
  color: white;
}

.header-title {
  font-size: 1.5rem;
  font-weight: bold;
}

Common SelectorTypes

Element Selector

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

Styles all <p> elements

Class Selector

.highlight {
  background-color: yellow;
  padding: 10px;
}

Styles elements with class='highlight'

ID Selector

#header {
  height: 80px;
  background: #333;
}

Styles the element with id='header'

CSS Implementation Methods

Inline Styles

Applied directly to HTML elements using the style attribute

<p style="color: red; font-size: 14px;">
  This text is styled inline
</p>
Advantages
  • Quick to implement for single elements
  • Highest specificity (overrides other styles)
Disadvantages
  • Hard to maintain in large projects
  • Mixes content with presentation

Internal Styles

Defined in the <head> section using <style> tags

<head>
  <style>
    p {
      color: blue;
      margin: 10px;
    }
  </style>
</head>
Advantages
  • Better separation than inline
  • Applies to all matching elements on the page
Disadvantages
  • Only applies to single page
  • Increases HTML file size

External Styles

Defined in separate .css files and linked to HTML

<head>
  <!-- In HTML file -->
<link rel="stylesheet" href="styles.css">
</head>

/* In styles.css */
p {
  color: green;
  line-height: 1.5;
}
Advantages
  • Best for large projects
  • Reusable across multiple pages
  • Improved caching and performance
Disadvantages
  • Additional HTTP request
  • Slightly more complex setup

CSS Activity

Apply what you have learned to solve a real-world scenario

Fix the Navigation Bar

Problem Statement

You have been given a navigation bar with inline styles that needs to be converted to use external CSS for better maintainability.

<div style="background: #1e3a8a; 
  padding: 1rem 2rem; display: flex;">
  <a style="color: white; 
  text-decoration: none;
   margin-right: 1.5rem;
   " href="/">Home</a>
  <a style="color: white; 
  text-decoration: none; 
  margin-right: 1.5rem;
  " href="/about">About</a>
  <a style="color: white; 
  text-decoration: none;
  " href="/contact">Contact</a>
</div>

Your task: Convert this to use external CSS by creating proper selectors and moving the styles to a separate stylesheet.

Your Solution

<nav class="main-nav">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>
.main-nav {
  background: #1e3a8a;
  padding: 1rem 2rem;
  display: flex;
}

.main-nav a {
  color: white;
  text-decoration: none;
  margin-right: 1.5rem;
}
Checklist
  • Created a class selector for the nav container
  • Used descendant selector for anchor tags
  • Removed all inline styles from HTML
  • Maintained all visual styling in CSS

Expected Result

HomeAboutContact

Your solution should produce this same visual result but with cleaner, more maintainable code.

CSS Styling Properties

Fundamental properties for styling web elements

Background

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

Controls: color, image, repeat, position, size

Text Styling

Text

p {
  color: #333;
  text-align: center;
  text-decoration: underline;
  line-height: 1.6;
  text-transform: uppercase;
}

Controls: color, alignment, decoration, spacing, case

Fonts

Arial

.text {
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
}

Controls: family, size, weight, style, variant

Links

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  color: darkblue;
  text-decoration: underline;
}

States: link, visited, hover, active, focus

Positioning

.box {
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 10;
}

Types: static, relative, absolute, fixed, sticky

Lists

  • โ€ข Item
ul {
  list-style-type: square;
  list-style-position: inside;
  padding-left: 20px;
}

Controls: bullet type, position, spacing, images

Tables

Header
Cell
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

Controls: borders, spacing, alignment, layout

Floating

img {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

Values: left, right, none (with clearfix)

Align

.center {
  text-align: center;
  margin: 0 auto;
  vertical-align: middle;
}

Types: horizontal, vertical, and centering

Display

.element {
  display: flex;
  visibility: visible;
  opacity: 1;
}

Values: block, inline, flex, grid, none

CSS Box Model

Understanding the fundamental layout concept

Margin
Border
Padding
Content

Padding

Space inside the border

.box {
  padding: 20px;
  padding-top: 10px;
  padding: 10px 20px;
  padding: 10px 20px 15px 5px;
}

Shorthand: 1-4 values for different sides

Margin

Space outside the border

.box {
  margin: 20px;
  margin: 0 auto; /* Centering */
  margin-bottom: 15px;
  margin: 10px 5px 20px 0;
}

Note: Negative values allowed

Border

Edge around the padding

.box {
  border: 2px solid #4338ca;
  border-radius: 8px;
  border-top: 1px dashed #999;
  border-bottom: none;
}

Styles: solid, dashed, dotted, double, etc.

Outline

Non-layout affecting border

.box {
  outline: 3px solid red;
  outline-offset: 2px;
}

Use: Focus states, debugging

Box-Sizing

content-box (default)

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
/* Total width = 200 + 20 
+ 20 = 240px */
}

border-box (recommended)

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
/* Total width = 200px
 (padding inside) */
}

Tip: Use * { box-sizing: border-box; } for predictable layouts

Level Up with Modern CSS

Explore advanced layouts, animations, and new styling powers in CSS3.

Start Learning โ†’