Uses of CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML.

CSS allows you to control the layout of multiple web pages all at once, saving a lot of work.
It enables the separation of content from design, making maintenance easier and providing more flexibility in presentation.
CSS enhances the accessibility of web pages by allowing for responsive designs that adapt to different screen sizes and devices.

Here are some key applications of CSS:

1. Styling Web Pages: CSS allows for the application of various styles to HTML elements, including fonts, colors, and layouts, enhancing the visual appeal of web pages.

2. Responsive Design: By using media queries, CSS enables web pages to adapt to different screen sizes and devices, ensuring a consistent user experience across platforms.

3. Consistency Across Pages: External CSS files can be linked to multiple HTML documents, allowing for uniform styling across a website and simplifying maintenance.

4. Accessibility Improvement: CSS facilitates the creation of accessible web content by allowing adjustments in presentation without altering the underlying HTML, catering to users with diverse needs.

5. Animation and Interactivity: CSS supports animations and transitions, enabling interactive elements without relying solely on JavaScript

Responsive Web Page Using CSS

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .container {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        @media (max-width: 600px) {
            .container {
                padding: 10px;
            }
            h2 {
                font-size: 1.5em;
            }
            p {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Responsive Design Example</h2>
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20231106133657/gfg_logo.png"
             alt="Logo">
        <p>Resize the browser window to see the responsive effect.</p>
    </div>
</body>
</html>

In this example,

The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag ensures the page scales correctly on different devices.
The CSS within the <style> tag styles the page and includes a media query that adjusts the layout for screens narrower than 600 pixels.

Output:

Responsive Web Page Using CSS

Explore