CSS Tutorial

CSS Reference

Last modified on: November 6, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8"><strong>CSS Reference</strong> is a comprehensive guide or resource that provides all the essential CSS properties, values, and selectors used to style web pages. This reference helps developers understand how each CSS property functions and provides examples, syntax, and use cases.</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="bbf73b4f-74e4-4be4-bb80-f9d151e7f3ae" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>A typical CSS reference covers the following categories:</p>
<ol>
<li>
<p><strong>CSS Selectors</strong><br />Selectors are used to target HTML elements for styling. They include:</p>
<ul>
<li><strong>Element selectors</strong> (e.g., <code>p</code>, <code>h1</code>)</li>
<li><strong>Class selectors</strong> (e.g., <code>.class-name</code>)</li>
<li><strong>ID selectors</strong> (e.g., <code>#id-name</code>)</li>
<li><strong>Attribute selectors</strong> (e.g., <code>[type="text"]</code>)</li>
<li><strong>Pseudo-classes</strong> (e.g., <code>:hover</code>, <code>:focus</code>)</li>
<li><strong>Pseudo-elements</strong> (e.g., <code>::before</code>, <code>::after</code>)</li>
</ul>
</li>
<li>
<p><strong>CSS Properties</strong><br />These define the appearance and behavior of HTML elements. Some commonly used properties include:</p>
<ul>
<li><strong>Color and Background</strong>: <code>color</code>, <code>background-color</code>, <code>background-image</code></li>
<li><strong>Layout</strong>: <code>width</code>, <code>height</code>, <code>padding</code>, <code>margin</code>, <code>display</code>, <code>position</code></li>
<li><strong>Typography</strong>: <code>font-size</code>, <code>font-family</code>, <code>font-weight</code>, <code>line-height</code></li>
<li><strong>Flexbox &amp; Grid</strong>: <code>display: flex</code>, <code>justify-content</code>, <code>align-items</code>, <code>grid-template-columns</code></li>
<li><strong>Borders and Shadows</strong>: <code>border</code>, <code>box-shadow</code></li>
<li><strong>Transitions and Animations</strong>: <code>transition</code>, <code>animation</code></li>
<li><strong>Text Styling</strong>: <code>text-align</code>, <code>text-transform</code>, <code>text-decoration</code></li>
</ul>
</li>
<li>
<p><strong>CSS Values</strong><br />Values define the settings for each property. They can be units like <code>px</code>, <code>em</code>, <code>%</code>, colors like <code>red</code>, <code>#fff</code>, or keywords like <code>auto</code> or <code>initial</code>.</p>
</li>
<li>
<p><strong>CSS Functions</strong><br />Functions are used to generate values for properties. Examples include:</p>
<ul>
<li><code>calc()</code></li>
<li><code>var()</code> (CSS Variables)</li>
<li><code>rgba()</code>, <code>hsla()</code>, <code>url()</code></li>
</ul>
</li>
<li>
<p><strong>CSS Media Queries</strong><br />Media queries allow for responsive design by applying different styles based on screen size, device, or orientation:</p>
<ul>
<li>Example: <code>@media (min-width: 768px) { /* styles */ }</code></li>
</ul>
</li>
<li>
<p><strong>CSS Box Model</strong><br />The box model defines how elements are structured in terms of content, padding, border, and margin. Key properties include:</p>
<ul>
<li><code>box-sizing</code></li>
<li><code>padding</code></li>
<li><code>border</code></li>
<li><code>margin</code></li>
</ul>
</li>
<li>
<p><strong>CSS Layout Techniques</strong><br />CSS has various layout techniques to position elements:</p>
<ul>
<li><strong>Flexbox</strong>: For flexible one-dimensional layouts.</li>
<li><strong>Grid</strong>: For two-dimensional layouts.</li>
<li><strong>Positioning</strong>: <code>absolute</code>, <code>relative</code>, <code>fixed</code>, <code>sticky</code>.</li>
</ul>
</li>
<li>
<p><strong>CSS Colors</strong><br />CSS supports multiple ways to specify colors:</p>
<ul>
<li>Named colors (<code>red</code>, <code>blue</code>, etc.)</li>
<li>Hexadecimal (<code>#FF5733</code>)</li>
<li>RGB (<code>rgb(255, 87, 51)</code>)</li>
<li>RGBA (<code>rgba(255, 87, 51, 0.5)</code>)</li>
<li>HSL (<code>hsl(9, 100%, 60%)</code>)</li>
</ul>
</li>
</ol>
<hr />
<h3>Example of a Basic CSS Reference</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 select-none">css</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-css"><code>/* Selectors */
p {
    font-size: 16px;
    color: #333;
}

.button:hover {
    background-color: #007bff;
}

/* Properties */
body {
    background-color: #f8f9fa;
}

h1 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #444;
}

/* Flexbox */
.container {
    display: flex;
    justify-content: space-between;
}

.item {
    flex: 1;
}

/* Media Queries */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More