Style Your Web Pages

Learn the fundamentals of CSS to style your web pages and bring your designs to life. Discover how to control the layout, colors, fonts, and more.

CSS Basics

CSS (Cascading Style Sheets) is a language used to style HTML elements, controlling their appearance and layout.

✓ Apply styles to HTML elements using selectors.
✓ Control font, color, size, and spacing.
✓ Create responsive layouts for different screen sizes.
✓ Use CSS units like pixels, percentages, and ems.

CSS Selectors

CSS selectors target specific HTML elements to which styles will be applied.

✓ Use element, class, and ID selectors.
✓ Combine selectors with CSS combinators.
✓ Leverage pseudo-classes and pseudo-elements.
✓ Write efficient and maintainable selectors.

CSS Layout

CSS layout techniques allow you to arrange elements on a webpage, creating visually appealing designs.

✓ Use CSS Box Model to understand element dimensions.
✓ Employ flexbox for flexible layouts.
✓ Utilize grid layout for complex layouts.
✓ Create responsive designs with media queries.

CSS Typography and Colors

CSS provides tools to style text and choose colors, enhancing the visual appeal of your web pages.

✓ Control font family, size, weight, and style.
✓ Use color keywords, hex codes, and RGB/RGBA values.
✓ Apply text transformations, alignment, and decoration.
✓ Create visually appealing typography.

Getting Started with CSS

A complete guide to start your journey in web development with CSS.

What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the color, font, spacing, positioning, and more, giving your website a visual appeal.

CSS is crucial for web design, as it enables you to separate content (HTML) from presentation, making web pages more visually engaging and accessible.

Why Learn CSS?

Essential for Web Design

CSS allows you to create beautiful layouts, fonts, colors, and effects that make websites more appealing and user-friendly.

Easy to Implement

CSS is straightforward to learn and implement. With simple syntax, you can enhance your web pages instantly.

Separation of Concerns

CSS separates content from styling, making it easier to maintain and update the design of a website without affecting its content.

Responsive Design

CSS is key to creating responsive designs that adapt seamlessly to different screen sizes, from desktops to mobile devices.

CSS Basics

CSS consists of selectors, properties, and values that define how elements in HTML should be styled. For example:

Selectors: Target HTML elements (e.g., p, div)
Properties: Define the aspect of the element to be styled (e.g., color, font-size)
Values: Specify the style values for properties (e.g., red, 16px)

These building blocks allow you to create and customize the layout of your website.

Getting Started with CSS

Follow these steps to start styling your web pages with CSS:

1. Choose a Text Editor

Install a code editor like VS Code or Sublime Text to write and edit CSS code.

2. Create a CSS File

Create a new file with the .css extension to start writing CSS rules for your HTML elements.

3. Link to HTML

Link your CSS file to your HTML document using the <link> tag inside the <head> section.

Sample Code 01

Welcome to My Website

This is a simple HTML page structure with custom CSS styling.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Website</title>
        <style>
            h1 {
                color: red;
                font-size: 40px;
            }
            p {
                color: blue;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a simple HTML page structure with custom CSS styling.</p>
    </body>
</html>

Tag Definitions

<style> - Defines the CSS styles for the HTML document.
h1 - Sets the styling for the header text, including color and font size.
p - Defines the styling for paragraphs, including color and font size.

Sample Code 02

My Favorite Websites

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Favorite Websites</title>
        <style>
            h2 {
                color: green;
                font-size: 30px;
            }
            a {
                color: blue;
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
            }
            button {
                background-color: #2563eb;
                color: white;
                padding: 10px 20px;
                border-radius: 5px;
            }
            button:hover {
                background-color: #1e40af;
            }
        </style>
    </head>
    <body>
        <h2>My Favorite Websites</h2>
        <ul>
            <li><a href="https://www.google.com">Google</a></li>
            <li><a href="https://www.youtube.com">YouTube</a></li>
            <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
        </ul>
        <button>Click Me</button>
    </body>
</html>

Tag Definitions

<style> - Defines the CSS styles for the HTML document.
h2 - Sets the styling for the secondary heading text, including color and font size.
a - Defines the styling for hyperlinks, including color and hover effects.
button - Represents a clickable button and defines its appearance and hover effect.

Sample Code 03

Steps to Create a Simple Web Page

Open a text editor.
Write basic HTML structure.
Save the file with a .html extension.
Open the file in a browser to view.

Follow these steps to create your first web page using HTML!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Steps to Create a Simple Web Page</title>
        <style>
            h3 {
                color: purple;
                font-size: 28px;
            }
            ol {
                margin-left: 20px;
            }
            img {
                border-radius: 10px;
            }
            p {
                margin-top: 10px;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h3>Steps to Create a Simple Web Page</h3>
        <ol>
            <li>Open a text editor.</li>
            <li>Write basic HTML structure.</li>
            <li>Save the file with a .html extension.</li>
            <li>Open the file in a browser to view.</li>
        </ol>
        <img src="https://via.placeholder.com/150" alt="Placeholder Image">
        <p>Follow these steps to create your first web page using HTML!</p>
    </body>
</html>

Tag Definitions

<style> - Defines the CSS styles for the HTML document.
h3 - Sets the styling for the heading text, including color and font size.
ol - Defines an ordered list with a specified left margin.
img - Defines the styling for the image, including border-radius for rounded corners.
p - Defines the styling for the paragraph text.

CSS Learning Resources

Get started with CSS through these helpful resources!

📺 CSS YouTube Playlists

Learn CSS from some of the best YouTube playlists curated for beginners:

▶️ Chai aur Code CSS for beginner

▶️ Code with Harry CSS one shot

▶️ Free Code Camp CSS Tutorial

📝 CSS Practice Worksheets

Enhance your skills with these practical worksheets:

📄 Basic CSS Practice Worksheet

📄 Intermediate CSS Practice Worksheet

📄 Advanced CSS Practice Worksheet

Summary of CSS Learnings

Congratulations on completing the CSS module! Here's a recap of what you've learned:

CSS Selectors

Learn how to target HTML elements using different types of selectors like element, .class, and #id.

Box Model

Understand the concept of the box model, which includes padding, border, margin, and content areas.

Flexbox Layout

Master the powerful Flexbox layout to create responsive and flexible page designs using properties like display: flex, justify-content, and align-items.

Responsive Design

Learn how to make your website responsive using media queries and techniques to adapt layouts to various screen sizes.

Ready to Dive into JavaScript?

Take the next step in your web development journey and unlock the full power of dynamic web functionality with JavaScript!

Explore JavaScript Course

CSS: Cascading Style Sheets

Style Your Web Pages

CSS Basics

CSS Selectors

CSS Layout

CSS Typography and Colors

Getting Started with CSS

What is CSS?

Why Learn CSS?

Essential for Web Design

Easy to Implement

Separation of Concerns

Responsive Design

CSS Basics

Getting Started with CSS

1. Choose a Text Editor

2. Create a CSS File

3. Link to HTML

Welcome to My Website

Tag Definitions

My Favorite Websites

Tag Definitions

Steps to Create a Simple Web Page

Tag Definitions

CSS Learning Resources

📺 CSS YouTube Playlists

📝 CSS Practice Worksheets

Summary of CSS Learnings

CSS Selectors

Box Model

Flexbox Layout

Responsive Design

Ready to Dive into JavaScript?