CSS Tutorial

CSS Examples

Last modified on: November 2, 2024

<h3>Introduction to CSS</h3>
<p>CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. It allows developers to create visually appealing websites by controlling layout, colors, fonts, and more. Below are several practical examples that demonstrate the capabilities of CSS.</p>
<h3>1. Basic Styling</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Basic Styling Example&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
        p {
            color: #555;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome to My Website&lt;/h1&gt;
    &lt;p&gt;This is a simple example of CSS styling.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Layout with Flexbox</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Flexbox Layout Example&lt;/title&gt;
    &lt;style&gt;
        .container {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background-color: #eaeaea;
        }
        .box {
            flex: 1;
            margin: 10px;
            padding: 20px;
            background-color: #3498db;
            color: white;
            text-align: center;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;div class="box"&gt;Box 1&lt;/div&gt;
        &lt;div class="box"&gt;Box 2&lt;/div&gt;
        &lt;div class="box"&gt;Box 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Responsive Image</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Responsive Image Example&lt;/title&gt;
    &lt;style&gt;
        img {
            max-width: 100%;
            height: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Responsive Image Example&lt;/h1&gt;
    &lt;img src="https://via.placeholder.com/600x400" alt="Placeholder Image"&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. CSS Grid Layout</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Grid Example&lt;/title&gt;
    &lt;style&gt;
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .grid-item {
            background-color: #2ecc71;
            color: white;
            text-align: center;
            padding: 20px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;CSS Grid Example&lt;/h1&gt;
    &lt;div class="grid-container"&gt;
        &lt;div class="grid-item"&gt;Item 1&lt;/div&gt;
        &lt;div class="grid-item"&gt;Item 2&lt;/div&gt;
        &lt;div class="grid-item"&gt;Item 3&lt;/div&gt;
        &lt;div class="grid-item"&gt;Item 4&lt;/div&gt;
        &lt;div class="grid-item"&gt;Item 5&lt;/div&gt;
        &lt;div class="grid-item"&gt;Item 6&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>5. CSS Animations</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Animation Example&lt;/title&gt;
    &lt;style&gt;
        .animate {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            animation: grow 2s infinite alternate;
        }

@keyframes grow {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.5);
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;CSS Animation Example&lt;/h1&gt;
    &lt;div class="animate"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>6. Button Styles</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Animation Example&lt;/title&gt;
    &lt;style&gt;
        .animate {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            animation: grow 2s infinite alternate;
        }

@keyframes grow {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.5);
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;CSS Animation Example&lt;/h1&gt;
    &lt;div class="animate"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>7. Custom Checkbox</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Custom Checkbox Example&lt;/title&gt;
    &lt;style&gt;
        input[type="checkbox"] {
            display: none;
        }

.custom-checkbox {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #3498db;
            border-radius: 4px;
            position: relative;
        }

input[type="checkbox"]:checked + .custom-checkbox::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #3498db;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Custom Checkbox Example&lt;/h1&gt;
    &lt;label&gt;
        &lt;input type="checkbox"&gt;
        &lt;span class="custom-checkbox"&gt;&lt;/span&gt; Check me!
    &lt;/label&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>These CSS examples demonstrate various styling techniques and layout structures that can enhance your web design. By exploring these practical applications, you can improve your skills in creating visually appealing and user-friendly websites. Whether you're building a simple page or a complex application, CSS plays a crucial role in delivering a polished user experience.</p>

Web Technology View More