Introduction to CSS

[Jessica Brown]

CSS (Cascading Style Sheets) is a language used to style and layout web pages. It controls the visual appearance of HTML elements, including colors, fonts, spacing, and animations. CSS makes websites visually appealing and responsive.

What is CSS Best Used For?

• Styling web pages and user interfaces.
• Creating responsive layouts for various screen sizes.
• Implementing animations and transitions for interactive elements.
• Managing themes and design consistency across web applications.

Example CSS Code

This example demonstrates the use of CSS variables, an animation loop (via keyframes), and visual output.

/* Declare variables */
:root {
    --main-color: #3498db;
    --background-color: #f4f4f4;
    --animation-duration: 2s;
}

/* Apply styles */
body {
    background-color: var(--background-color);
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

h1 {
    color: var(--main-color);
    font-size: 2rem;
    animation: pulse var(--animation-duration) infinite;
}

/* Loop-like animation using keyframes */
@keyframes pulse {
    0% {
        transform: scale(1);
        color: var(--main-color);
    }
    50% {
        transform: scale(1.2);
        color: #2ecc71;
    }
    100% {
        transform: scale(1);
        color: var(--main-color);
    }
}

Explanation:

1. Variables: CSS variables (e.g., --main-color) are defined in the :root pseudo-class for reusability.
2. Styles: The body and h1 elements are styled with colors, fonts, and spacing. Variables are applied using the var() function.
3. Animation (Loop): The @keyframes rule creates a "pulse" animation that loops infinitely, making the text grow and change color dynamically.

Output (Visual):

• The page background is light gray.
• A centered heading (h1) appears in blue.
• The heading smoothly grows larger and changes color to green in a looping animation.

---

CSS is a cornerstone of web design and can make your websites stand out with creative styles and animations. Share your CSS tricks, experiments, or questions here!