Introduction to CSS for Beginners

"A beginner's guide to understanding CSS and its role in web development."

By Samir Niroula

27 October 2024
Introduction to CSS for Beginners

Introduction to CSS for Beginners

CSS, or Cascading Style Sheets, styles and layouts web pages. HTML provides structure, while CSS enhances appearance, controlling colors, fonts, layout, and design. Learning CSS transforms plain HTML into beautiful, responsive websites.

What is CSS?

CSS stands for Cascading Style Sheets. It separates content (HTML) from design, making style updates easier.

Key Features:

  • Separation of Content and Style
  • Reusability
  • Responsiveness

CSS Syntax and Selectors

CSS rules define how HTML elements look, consisting of a selector and a declaration block.

Basic Syntax:

selector {
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 24px;
}

Types of CSS

  1. Inline CSS: Applied within HTML elements using the style attribute.
  2. Internal CSS: Defined within a <style> tag in the <head> section.
  3. External CSS: Defined in an external .css file linked to the HTML document.

Examples:

  • Inline CSS: <p style="color: red;">This is a red paragraph.</p>
  • Internal CSS: 
    <head>
    <style>
        p { color: green; }
    </style>
</head>
  • External CSS: 
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Advanced CSS Concepts

CSS Flexbox

Flexbox designs complex layouts efficiently.

Example:

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

CSS Grid

CSS Grid creates complex, responsive grid-based layouts.

Example:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

CSS Animations

CSS animations bring web pages to life by animating HTML elements without JavaScript.

Example:

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

CSS Variables

CSS variables, also known as custom properties, store values for reuse throughout a stylesheet.

Example:

:root {
    --main-color: #3498db;
}
 
h1 {
    color: var(--main-color);
}

CSS Media Queries

Media queries apply styles based on device characteristics like screen size, enhancing responsiveness.

Example:

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

CSS Preprocessors

CSS preprocessors like Sass and LESS extend CSS with variables, nesting, and more, making stylesheets more maintainable.

Example (Sass):

$primary-color: #333;
 
body {
    color: $primary-color;
}

CSS Frameworks

CSS frameworks like Bootstrap and Tailwind CSS provide pre-designed components and utilities, speeding up development.

Example (Bootstrap):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
<div class="container">
    <div class="row">
        <div class="col">
            Column 1
        </div>
        <div class="col">
            Column 2
        </div>
    </div>
</div>

Conclusion

CSS is essential for creating visually appealing, responsive websites. Understanding CSS syntax, selectors, and application methods enhances web pages. Advanced concepts like Flexbox and Grid enable sophisticated layouts.