CSS Topics for Teaching

1. Introduction to CSS

CSS (Cascading Style Sheets) is used to style and layout web pages, including colors, fonts, and spacing.

<style>
body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}
</style>

2. Selectors and Combinators

Select elements in HTML to apply styles using various selectors like class, ID, and attribute selectors, and combinators that define relationships between selectors.

<style>
/* Element selector */
p {
    color: blue;
}
/* Class selector */
.highlight {
    background-color: yellow;
}
/* ID selector */
#unique {
    font-size: 20px;
}
/* Combinators */
div > p { /* Child combinator */
    color: green;
}
ul li { /* Descendant combinator */
    list-style: none;
}
</style>

3. Box Model

The box model includes content, padding, border, and margin, which determine the space an element occupies.

<style>
.box {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
    box-sizing: border-box; /* Includes padding and border in width */
}
</style>
<div class="box">This is a box.</div>

4. Positioning

CSS positioning controls how elements are placed on a page: static, relative, absolute, fixed, or sticky.

<style>
.relative {
    position: relative;
    top: 20px;
    left: 10px;
}
.absolute {
    position: absolute;
    top: 50px;
    left: 100px;
}
</style>
<div class="relative">Relative Position</div>
<div class="absolute">Absolute Position</div>

5. Flexbox

Flexbox is a layout model that allows items to adjust and distribute space dynamically.

<style>
.flex-container {
    display: flex;
    justify-content: space-around;
}
.flex-item {
    width: 100px;
    height: 100px;
    background-color: coral;
}
</style>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

6. Grid Layout

CSS Grid Layout provides a grid-based layout system, offering more flexibility than flexbox for complex designs.

<style>
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}
.grid-item {
    background-color: lightcoral;
    padding: 20px;
    text-align: center;
}
</style>
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>

7. Responsive Design

Responsive design ensures web content adjusts smoothly across various devices and screen sizes.

<style>
body {
    font-size: 16px;
}
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}
</style>

8. Typography

CSS allows control over fonts, sizes, line spacing, and other text properties to enhance readability and style.

<style>
p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
</style>
<p>This is an example of typography styling in CSS.</p>

9. Colors and Backgrounds

CSS provides different ways to apply colors and backgrounds using properties like background-color, background-image, and color.

<style>
body {
    background-color: #f0f8ff;
}
h1 {
    color: #333;
    background: linear-gradient(to right, red, yellow);
}
</style>
<h1>Gradient Background</h1>

10. Transitions and Animations

CSS transitions and animations create smooth visual effects and motion.

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 0.5s;
}
.box:hover {
    transform: scale(1.5);
}
</style>
<div class="box"></div>

11. CSS Variables (Custom Properties)

CSS variables are reusable values defined once and used throughout your stylesheet.

<style>
:root {
    --main-color: coral;
}
.box {
    background-color: var(--main-color);
    color: white;
    padding: 20px;
}
</style>
<div class="box">Using CSS Variables</div>

12. CSS Preprocessors

CSS preprocessors like Sass and LESS extend CSS with features like variables, nesting, and mixins.

$primary-color: #333;
.button {
    color: $primary-color;
    &:hover {
        background: lighten($primary-color, 20%);
    }
}

13. Advanced Selectors and Specificity

Learn to use advanced selectors like attribute, pseudo-class, and pseudo-element selectors, and understand specificity rules to manage conflicting styles.

<style>
a[href^="https"] { /* Attribute selector */
    color: green;
}
.button:hover { /* Pseudo-class */
    background: blue;
}
p::first-line { /* Pseudo-element */
    font-weight: bold;
}
</style>