Introduction to CSS

Master CSS with Coddy

Learn CSS through interactive, bite-sized lessons. Style beautiful websites and master modern CSS techniques.

Cascading Style Sheets (CSS) is a powerful styling language used to enhance the visual appearance of web pages. It works hand-in-hand with HTML to create stunning, responsive designs.

What is CSS?

CSS is a stylesheet language that describes the presentation of a document written in HTML or XML. It allows you to control the layout, colors, fonts, and other visual aspects of web pages.

Why Use CSS?

Separates content from presentation
Improves website performance
Enables consistent styling across multiple pages
Facilitates responsive design

Basic CSS Syntax

CSS uses a simple syntax consisting of selectors and declarations. Here's a basic example:


selector {
    property: value;
}

For a more detailed explanation of CSS syntax, check out our guide on CSS Syntax.

CSS Selectors

Selectors are patterns used to select and style HTML elements. Common types include:

Element selectors: p { color: blue; }
Class selectors: .highlight { background-color: yellow; }
ID selectors: #header { font-size: 24px; }

Learn more about selectors in our CSS Selectors guide.

Applying CSS to HTML

There are three ways to apply CSS to HTML:

Inline CSS
Internal CSS
External CSS

1. Inline CSS

Inline CSS is applied directly to HTML elements using the style attribute:


<p style="color: red; font-size: 16px;">This is a red paragraph.</p>

2. Internal CSS

Internal CSS is placed within the <style> tag in the HTML document's <head> section:


<head>
    <style>
        p {
            color: blue;
            font-size: 14px;
        }
    </style>
</head>

3. External CSS

External CSS is stored in a separate .css file and linked to the HTML document:


<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS Properties and Values

CSS uses various properties to control the appearance of elements. Some common properties include:

color: Sets the text color
background-color: Sets the background color
font-size: Sets the font size
margin: Sets the outer spacing of an element
padding: Sets the inner spacing of an element

For a comprehensive list of CSS properties, refer to our CSS Text Formatting and CSS Box Model guides.

Responsive Design with CSS

CSS plays a crucial role in creating responsive websites that adapt to different screen sizes. Techniques like media queries and flexible layouts help achieve this:


@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

Learn more about creating responsive designs in our CSS Responsive Design guide.

CSS Best Practices

Use meaningful class and ID names
Keep your CSS organized and well-commented
Minimize the use of !important
Use shorthand properties when possible
Optimize for performance by reducing file size

For more advanced CSS techniques and best practices, explore our guides on CSS Performance Optimization and CSS Code Organization.

Conclusion

CSS is an essential tool for web developers, enabling the creation of visually appealing and responsive websites. As you continue your journey in web development, mastering CSS will open up endless possibilities for design and user experience.

Ready to dive deeper? Explore our other CSS guides to enhance your skills and create stunning web designs!