CSS Styling Fundamentals

Learning Objectives

By the end of this module, you will be able to:

• - Understand basic CSS syntax and how to apply styles
• - Use different types of CSS selectors effectively
• - Implement basic layouts and styling techniques
• - Debug common CSS issues

CSS Basics

CSS (Cascading Style Sheets) is a powerful language used to style webpages. It describes how HTML elements are displayed on the screen and can easily change properties of elements like colors, layouts, spacing, and more.

CSS Implementation Methods

CSS can be implemented in three ways:

1. 1. Inline CSS: Directly in HTML elements using the style attribute
2. 2. Internal CSS: Using the <style> tag in HTML document
3. 3. External CSS: Linking an external .css file

Examples:

<!-- Inline CSS -->
<p style="color: blue;">This is inline styling</p>

<!-- Internal CSS (in head section) -->
<style>
    p { color: blue; }
</style>

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">

Basic Syntax

CSS follows a simple pattern:

selector {
    property: value;
    another-property: value;
}

Checkpoint 1: Change Paragraph Text Color

Write CSS that makes all <p> text red.

CSS Selectors

CSS selectors are patterns used to select and style HTML elements. Here are the main types:

Basic Selectors

1. Universal Selector (*)

    * { margin: 0; }
   

2. Element Selector

    p { color: blue; }
   

3. Class Selector (.)

    .button { background: yellow; }
   

4. ID Selector (#)

    #header { font-size: 24px; }
   

Advanced Selectors

1. Attribute Selectors

    input[type="text"] { border: 1px solid gray; }
   

2. Pseudo-classes

    a:hover { color: red; }
   

3. Combinators

    div > p { margin: 10px; }
   

Checkpoint 2: Multiple Choice

Which CSS selector targets all elements on the page?

a) .all { }
b) #all { }
c) * { }
d) body, html { }

CSS Box Model

The CSS box model is fundamental to understanding layout in CSS. Every element in CSS has:

• - Content: The actual content of the element
• - Padding: Clear space around the content
• - Border: A border around the padding
• - Margin: Clear space outside the border

The CSS Box Model

Margin

Border

Padding

Content
(text, images, etc.)

Each layer adds space or structure around the content box.

🎨 CSS Property Cheat Sheet

Category	Property	Example	Purpose
Text & Font	`color`	`color: blue;`	Sets text color
	`font-size`	`font-size: 18px;`	Controls text size
	`font-family`	`font-family: Arial, sans-serif;`	Changes typeface
	`text-align`	`text-align: center;`	Aligns text
	`font-weight`	`font-weight: bold;`	Makes text bold
Box & Layout	`margin`	`margin: 20px;`	Space outside an element
	`padding`	`padding: 10px;`	Space inside an element
	`border`	`border: 1px solid black;`	Adds border
	`box-shadow`	`box-shadow: 0 4px 8px gray;`	Adds shadow
Backgrounds & Borders	`background-color`	`background-color: lightblue;`	Sets background color
	`border-radius`	`border-radius: 10px;`	Rounds corners
Position & Display	`display`	`display: flex;`	Defines display type
	`position`	`position: absolute;`	Positions element
	`top`, `left`	`top: 10px;`	Offsets element position
Animations & Effects	`transition`	`transition: all 0.3s ease;`	Animates property changes
	`transform`	`transform: rotate(10deg);`	Rotates or scales element
	`opacity`	`opacity: 0.8;`	Controls transparency

Checkpoint 3: Create a Shadowed Box

Write CSS for a class called .card that creates a green shadow and 50px padding.

Grouping

If we want to add the same styling to multiple elements, we can use grouping. Similar to the example with p above, simply add multiple elements before the {} to do this. Example:

h1, h2 {
    color: red;
}

Comments

A very basic part of CSS, but it is always good practice to comment on code that may be unclear. To create a single line comment, use /**/ in the same line, and you can also spread that out through multiple lines to create a multi-line comment. Examples:

.button {
    /* This is a single line comment */
    background-color: yellow;
}

#header {
    /* This is a
        multi-line comment */
    font-family: Papyrus;
}

Other Resource(s)

You can find a lot more in-depth information here: Geeks for Geeks CSS Introduction

Best Practices

1. 1. Use meaningful class names
2. 2. Keep selectors simple
3. 3. Use comments for complex styles
4. 4. Organize properties consistently
5. 5. Consider mobile-first design

Layout with Flexbox

Flexbox is a powerful layout model that makes it easy to create flexible, responsive layouts. Example:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Practice Challenges

1. 1. Create a centered card with padding and shadow
2. 2. Build a simple navigation bar using flexbox
3. 3. Create a responsive grid layout
4. 4. Style a form with custom inputs

Interactive CSS Playground

Try out your CSS below:

CSS Editor

Preview

Test Content

← Previous Lesson Next Lesson →

✓ Lesson 3 completed!