DEV Community: Raizo-03

DAY 7 OF CSS

Raizo-03 — Wed, 09 Jul 2025 16:10:30 +0000

Positioning was like unlocking a new superpower in CSS! What's your favorite positioning technique? Share your creative uses below! 🚀

DAY 6 OF CSS

Raizo-03 — Mon, 07 Jul 2025 16:32:05 +0000

The Mystery of Disappearing Elements

Today I discovered that there's more than one way to hide an element in CSS, and each method has different effects on layout! Understanding display and visibility properties opened up a whole new world of layout control.

CSS Display Property: The Layout Controller

The display property is fundamental to CSS layouts. It determines how an element participates in the document flow and how it's rendered.

Block Elements

.block-example {
    display: block;
    width: 100%;
    background-color: lightblue;
    padding: 10px;
    margin: 10px 0;
}

Block elements:

Take up the full width available
Start on a new line
Stack vertically
Examples: div, p, h1-h6, section

Inline Elements

.inline-example {
    display: inline;
    background-color: yellow;
    padding: 5px;
    /* Note: width and height have no effect on inline elements */
}

Inline elements:

Only take up as much width as needed
Don't break to new lines
Sit side by side
Can't have width/height set
Examples: span, a, em, strong

Inline-Block: Best of Both Worlds

.inline-block-example {
    display: inline-block;
    width: 150px;
    height: 100px;
    background-color: lightgreen;
    padding: 10px;
    margin: 5px;
}

Inline-block elements:

Sit side by side like inline elements
Can have width and height like block elements
Perfect for creating horizontal layouts
Great for navigation menus and button groups

The Display: None Technique

.hidden-element {
    display: none;
}

When you use display: none:

Element completely disappears from the page
Takes up no space in the layout
Other elements move up to fill the gap
Element is not accessible to screen readers

CSS Visibility Property: The Space Keeper

The visibility property offers a different approach to hiding elements:

.invisible-element {
    visibility: hidden;
}

.visible-element {
    visibility: visible; /* Default value */
}

Key differences with visibility: hidden:

Element becomes invisible but keeps its space
Layout remains unchanged
Other elements don't move
Still takes up room in the document flow

Display vs Visibility: The Showdown

Property	Element Visibility	Takes Up Space	Affects Layout
`display: none`	Hidden	No	Yes
`visibility: hidden`	Hidden	Yes	No
`visibility: visible`	Visible	Yes	No

Advanced Display Values

Flex Display

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Grid Display

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Table Display

.table-display {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}

Practical Examples I Built Today

1. Responsive Navigation Toggle

.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
    }
}

2. Show/Hide Content with JavaScript

.content-panel {
    display: block;
    transition: all 0.3s ease;
}

.content-panel.hidden {
    display: none;
}

/* Alternative approach that allows transitions */
.content-panel.invisible {
    visibility: hidden;
    opacity: 0;
}

3. Creating a Horizontal Button Group

.button-group {
    display: flex;
    gap: 10px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

When to Use What?

Use `display: none` when:

You want to completely remove an element from layout
Creating responsive designs (hide/show different content)
Toggling UI elements with JavaScript
Building dropdown menus or modals

Use `visibility: hidden` when:

You want to temporarily hide content without affecting layout
Creating fade-in/fade-out animations
Maintaining consistent spacing
Building image galleries or slideshows

Use `display: block/inline/inline-block` when:

Changing the natural display behavior of elements
Creating custom layouts
Building responsive designs
Styling navigation menus

Common Gotchas I Encountered

Inline elements ignore width/height

/* This won't work as expected */
span {
    width: 200px;  /* Ignored! */
    height: 100px; /* Ignored! */
}

/* Solution: Use inline-block */
span {
    display: inline-block;
    width: 200px;  /* Works! */
    height: 100px; /* Works! */
}

Margins behave differently

/* Inline elements: only left/right margins work */
.inline-element {
    margin: 20px; /* Only left/right applied */
}

/* Block elements: all margins work */
.block-element {
    margin: 20px; /* All sides applied */
}

Accessibility considerations

/* Hidden from screen readers */
.hidden {
    display: none;
}

/* Still announced by screen readers */
.visually-hidden {
    visibility: hidden;
}

Pro Tips I Learned

1. Smooth Transitions

.fade-element {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fade-element.hidden {
    opacity: 0;
    visibility: hidden;
}

2. Responsive Display Utilities

/* Hide on mobile */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none;
    }
}

/* Hide on desktop */
@media (min-width: 768px) {
    .hidden-desktop {
        display: none;
    }
}

3. Debugging Layout Issues

/* Temporary border to see element boundaries */
* {
    border: 1px solid red;
}

What's Next?

Tomorrow I'm diving into CSS positioning (static, relative, absolute, fixed) to learn how elements can break out of the normal document flow. Understanding display properties will be crucial for positioning!

Display and visibility were game-changers for my layouts! What's your go-to method for showing/hiding elements? Share your tips below! 🚀

DAY 5 OF CSS

Raizo-03 — Mon, 07 Jul 2025 15:20:03 +0000

Today I finally understood why my elements weren't positioning the way I expected them to. The answer? The CSS Box Model! Every element on a webpage is essentially a rectangular box, and understanding how this box works is crucial for mastering CSS layouts.

What is the Box Model?

The CSS Box Model describes how the different parts of an element's box are laid out. From the inside out, every element consists of:

Content - The actual content (text, images, etc.)
Padding - Space between content and border
Border - The border around the padding and content
Margin - Space outside the border

The Content Area

.content-example {
    width: 300px;
    height: 200px;
    background-color: lightblue;
}

The content area is where your actual content lives. When you set width and height, you're defining the content area dimensions (in the default box model).

Padding: Internal Spacing

.padding-example {
    padding: 20px;           /* All sides */
    padding: 10px 20px;      /* Vertical | Horizontal */
    padding: 10px 15px 20px 25px; /* Top | Right | Bottom | Left */

    /* Individual sides */
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

Padding creates breathing room inside your element. It's the space between your content and the border. Key points:

Padding inherits the background color/image of the element
Padding values can't be negative
Padding affects the total size of your element

Borders: The Frame

.border-example {
    border: 2px solid #333;

    /* Or specify each property individually */
    border-width: 2px;
    border-style: solid;
    border-color: #333;

    /* Different borders for each side */
    border-top: 1px solid red;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 4px double purple;
}

Borders sit between padding and margin. They can be:

Styles: solid, dashed, dotted, double, groove, ridge, inset, outset
Widths: Any length value or keywords like thin, medium, thick
Colors: Any valid CSS color value

Margins: External Spacing

.margin-example {
    margin: 20px;           /* All sides */
    margin: 10px 20px;      /* Vertical | Horizontal */
    margin: 10px 15px 20px 25px; /* Top | Right | Bottom | Left */

    /* Individual sides */
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;

    /* Center horizontally */
    margin: 0 auto;
}

Margins create space outside your element. Important concepts:

Margins can be negative (useful for overlapping elements)
Margins collapse vertically between adjacent elements
margin: 0 auto centers block elements horizontally

The Complete Box Model Example

.box-model-demo {
    /* Content dimensions */
    width: 200px;
    height: 100px;

    /* Padding adds space inside */
    padding: 20px;

    /* Border adds thickness */
    border: 5px solid #333;

    /* Margin adds space outside */
    margin: 30px;

    background-color: lightcoral;
}

Total element width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

In this example: 30 + 5 + 20 + 200 + 20 + 5 + 30 = 310px

Box-Sizing: Changing the Game

/* Default behavior */
.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Total width: 200 + 40 + 10 = 250px */
}

/* Alternative behavior */
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Total width: 200px (padding and border included) */
}

The box-sizing property changes how width and height are calculated:

content-box (default) - width/height applies to content only
border-box - width/height includes padding and border

Practical Tips I Learned

1. The Universal Border-Box Reset

* {
    box-sizing: border-box;
}

This makes sizing more intuitive and predictable!

2. Margin Collapse

.element1 { margin-bottom: 20px; }
.element2 { margin-top: 30px; }
/* Gap between elements is 30px, not 50px! */

3. Debugging with Developer Tools

Use browser dev tools to visualize the box model. The visual representation shows exactly how much space each part takes up.

Common Gotchas I Encountered

Forgetting about margin collapse - Adjacent margins don't add up
Not accounting for padding/border in width calculations - Elements become wider than expected
Negative margins - Can cause overlapping, but useful for fine-tuning
Percentage margins - Calculated based on parent's width, even for top/bottom

What's Next?

Tomorrow I'm diving into CSS positioning (static, relative, absolute, fixed) to see how elements can break out of the normal document flow. The box model foundation will be crucial for understanding positioning!

The box model was a game-changer for me! What CSS concept gave you the biggest "aha!" moment? Share in the comments! 💭

DAY 4 OF CSS

Raizo-03 — Sat, 05 Jul 2025 13:04:13 +0000

Today I dove deep into CSS background properties, and wow - there's so much more to backgrounds than just setting a color! Here's what I discovered and practiced.
The Basics: Background Color
Starting simple with background-color:
css#background-color {
background-color: aquamarine;
}
This creates a solid color background. Simple but effective for establishing visual hierarchy and adding personality to elements.
Adding Images with Background-Image
Things get interesting when we add images:
css#background-image {
background-image: url("../code.png");
background-repeat: no-repeat;
background-size: cover;
}
The background-image property opens up a world of possibilities. Combined with background-size: cover, it ensures the image covers the entire element while maintaining aspect ratio.
Controlling Repetition
Sometimes you want patterns or controlled repetition:
css#background-repeat {
background-image: url("../code.png");
background-repeat: repeat-x;
}
background-repeat options include:

repeat (default) - tiles in both directions
repeat-x - only horizontally
repeat-y - only vertically
no-repeat - shows once

Background Attachment
The background-attachment property controls scrolling behavior:
css#background-attachment {
background-image: url("../code.png");
background-attachment: scroll;
}
Options are:

scroll (default) - background scrolls with content
fixed - background stays fixed during scroll
local - background scrolls with element's content

Positioning Backgrounds
Control exactly where your background appears:
css#background-position {
background-image: url("../code.png");
background-position: center center;
}
You can use keywords (top, bottom, left, right, center) or precise values (50px 100px, 50% 25%).
Background Size Control
Make backgrounds fit perfectly:
css#background-size {
background-image: url("../code.png");
background-size: cover;
}
Key background-size values:

cover - scales to cover entire element
contain - scales to fit within element
auto - original size
Custom values like 50px 100px or 50% 75%

The Shorthand Property
CSS loves shortcuts! The background shorthand combines multiple properties:
css#background-shorthand {
background: #f0f0f0 url("../code.png") no-repeat;
}
This sets color, image, and repetition in one line. The order is flexible, but typically: color image repeat attachment position/size.
Key Takeaways

Layering: You can combine background colors with images for fallback effects
Performance: Consider image size and format for web performance
Accessibility: Ensure sufficient contrast between background and text
Responsive: Use background-size: cover or contain for responsive designs

DAY 3 OF CSS

Raizo-03 — Sat, 05 Jul 2025 13:01:19 +0000

CSS provides powerful tools for controlling text appearance, spacing, alignment, and typography. This guide covers text formatting properties and how to integrate custom fonts into your web projects.

✨ Text Appearance Properties

Control the visual appearance of text with these essential properties.

Property	Description	Example
`color`	Specifies the color of the text	`color: #333;`
`text-transform`	Controls the capitalization of text	`text-transform: uppercase;`
`text-shadow`	Defines the shadow effect of the text	`text-shadow: 2px 2px 4px #000000;`

Text Transform Values:

uppercase - Converts text to uppercase
lowercase - Converts text to lowercase
capitalize - Capitalizes the first letter of each word
none - No transformation

Text Shadow Syntax:

text-shadow: horizontal-offset vertical-offset blur-radius color;

Example:

h1 {
    color: #2c3e50;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

📐 Text Alignment Properties

Control how text is positioned within its container.

Property	Description	Example
`text-align`	Sets the horizontal alignment of text	`text-align: center;`
`text-align-last`	Sets the alignment of the last line of a block container	`text-align-last: right;`

Text Align Values:

left - Aligns text to the left (default)
right - Aligns text to the right
center - Centers the text
justify - Stretches text to fill the line width

Example:

.header-text {
    text-align: center;
}

.paragraph {
    text-align: justify;
    text-align-last: right;
}

📏 Text Spacing Properties

Control the spacing and layout of text elements.

Property	Description	Example
`text-indent`	Specifies the indentation of the first line of text	`text-indent: 20px;`
`line-height`	Sets the height of a line box	`line-height: 1.5;`
`letter-spacing`	Increases or decreases the space between characters	`letter-spacing: 2px;`
`word-spacing`	Increases or decreases the space between words	`word-spacing: 4px;`
`white-space`	Specifies how white space inside an element is handled	`white-space: nowrap;`

White Space Values:

normal - Default behavior, collapses whitespace
nowrap - Prevents text from wrapping
pre - Preserves whitespace like <pre> tag
pre-wrap - Preserves whitespace but allows wrapping
pre-line - Preserves line breaks but collapses other whitespace

Example:

.article-text {
    text-indent: 30px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    word-spacing: 2px;
}

.no-wrap {
    white-space: nowrap;
}

🔤 Font Properties

Control the font family, size, weight, and style of text.

Property	Description	Example
`font-family`	Specifies the font family for text	`font-family: 'Arial', sans-serif;`
`font-size`	Sets the size of the font	`font-size: 16px;`
`font-weight`	Sets the weight (boldness) of the font	`font-weight: bold;`
`font-style`	Sets the style of the font	`font-style: italic;`
`font-variant`	Specifies the variant of the font	`font-variant: small-caps;`

Font Weight Values:

normal or 400 - Normal weight
bold or 700 - Bold weight
lighter - Lighter than parent element
bolder - Bolder than parent element
100-900 - Numeric values (100 = lightest, 900 = boldest)

Font Style Values:

normal - Normal text
italic - Italic text
oblique - Oblique text (slanted)

Example:

.heading {
    font-family: 'Georgia', serif;
    font-size: 2.5em;
    font-weight: 700;
    font-style: normal;
    font-variant: small-caps;
}

🌐 Custom Fonts Integration

Method 1: Using Google Fonts with `<link>` Tag

Include Google Fonts in your HTML <head> section:

<head>
    <!-- Google Fonts Link -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Sunuwar&family=Poppins:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>

Then use in CSS:

body {
    font-family: 'Poppins', sans-serif;
}

h1, h2 {
    font-family: 'Noto Sans Sunuwar', sans-serif;
}

p {
    font-family: 'Roboto', sans-serif;
}

Method 2: Using `@import` in CSS

Import fonts directly in your CSS file:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sunuwar&family=Poppins:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

h1, h2 {
    font-family: 'Noto Sans Sunuwar', sans-serif;
}

🎯 Font Family Best Practices

Font Stack (Fallback Fonts)

Always provide fallback fonts in case your custom font fails to load:

.text {
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

Font Family Categories:

serif - Fonts with decorative strokes (Times New Roman, Georgia)
sans-serif - Fonts without decorative strokes (Arial, Helvetica)
monospace - Fixed-width fonts (Courier New, Monaco)
cursive - Handwriting-style fonts
fantasy - Decorative fonts

Font Loading Optimization

Use preconnect for faster font loading:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

📊 Complete Example

Here's a comprehensive example combining text formatting and custom fonts:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting Example</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        h1 {
            font-family: 'Poppins', sans-serif;
            font-size: 2.5em;
            font-weight: 700;
            color: #2c3e50;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            letter-spacing: 1px;
        }

        h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.8em;
            font-weight: 600;
            color: #34495e;
            margin-top: 30px;
        }

        p {
            font-weight: 400;
            text-align: justify;
            text-indent: 25px;
            word-spacing: 1px;
            margin-bottom: 15px;
        }

        .highlight {
            background-color: #f39c12;
            color: white;
            padding: 2px 6px;
            font-weight: 500;
        }

        .quote {
            font-style: italic;
            font-size: 1.1em;
            color: #7f8c8d;
            text-align: center;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <h1>Custom Typography</h1>
    <h2>Professional Text Formatting</h2>
    <p>This example demonstrates various text formatting properties combined with custom fonts from Google Fonts.</p>
    <p class="quote">"Typography is the craft of endowing human language with a durable visual form."</p>
</body>
</html>

💡 Key Takeaways

Text Formatting Essentials:

Text Appearance: Use color, text-transform, and text-shadow for visual impact
Text Alignment: Control positioning with text-align and text-align-last
Text Spacing: Fine-tune readability with line-height, letter-spacing, and word-spacing
Font Properties: Specify typography with font-family, font-size, font-weight, and font-style

Custom Fonts Best Practices:

Always provide fallback fonts in your font stack
Use preconnect for faster Google Fonts loading
Choose appropriate font weights for different text elements
Consider performance - don't load unnecessary font variants
Test font loading across different devices and connection speeds

Performance Tips:

Limit font variants - only load the weights and styles you need
Use font-display: swap for better loading performance
Consider system fonts for faster loading times
Optimize font loading with preconnect and preload techniques

This comprehensive approach to text formatting and custom fonts will help you create visually appealing and professionally designed web pages!

DAY 2 OF CSS

Raizo-03 — Thu, 03 Jul 2025 08:52:20 +0000

🎯 Overview of CSS Selectors

CSS selectors are patterns used to select and style HTML elements. They are the foundation of CSS styling, allowing you to target specific elements or groups of elements with precision.

🏷️ Basic Selectors

1. Universal Selector (`*`)

Selects all elements on the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. Element Selector (Type Selector)

Selects all elements of a specific HTML tag.

p {
    color: #333;
    line-height: 1.6;
}

h1 {
    font-size: 2em;
    color: navy;
}

3. Class Selector (`.classname`)

Selects elements with a specific class attribute.

.highlight {
    background-color: yellow;
    padding: 5px;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
}

4. ID Selector (`#idname`)

Selects the element with a specific ID attribute.

#header {
    background-color: #333;
    color: white;
    padding: 20px;
}

#main-content {
    max-width: 800px;
    margin: 0 auto;
}

🔗 Combinator Selectors

1. Descendant Selector ()

Selects elements that are descendants of another element.

/* Selects all <p> elements inside <div> elements */
div p {
    font-style: italic;
}

/* Selects all <a> elements inside elements with class "nav" */
.nav a {
    text-decoration: none;
    color: #333;
}

2. Child Selector (`>`)

Selects elements that are direct children of another element.

/* Selects only direct <li> children of <ul> */
ul > li {
    list-style-type: disc;
}

/* Selects direct <p> children of <div> with class "container" */
.container > p {
    margin-bottom: 15px;
}

3. Adjacent Sibling Selector (`+`)

Selects the element immediately following another element.

/* Selects the first <p> that comes immediately after an <h1> */
h1 + p {
    font-weight: bold;
    margin-top: 0;
}

/* Selects <label> immediately following <input> */
input + label {
    margin-left: 10px;
}

4. General Sibling Selector (`~`)

Selects all siblings that come after a specific element.

/* Selects all <p> elements that are siblings after <h2> */
h2 ~ p {
    color: #666;
}

/* Selects all <div> elements that are siblings after <header> */
header ~ div {
    margin-top: 20px;
}

🎨 Pseudo-Class Selectors

1. Dynamic Pseudo-Classes

Respond to user interactions.

/* Hover effect */
a:hover {
    color: #ff6b6b;
    text-decoration: underline;
}

/* Focus state for form elements */
input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Active state when clicking */
button:active {
    transform: scale(0.95);
}

/* Visited links */
a:visited {
    color: purple;
}

2. Structural Pseudo-Classes

Based on element position in the document.

/* First child element */
p:first-child {
    font-weight: bold;
}

/* Last child element */
li:last-child {
    border-bottom: none;
}

/* Nth child (odd/even or specific numbers) */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:nth-child(odd) {
    background-color: white;
}

/* Every 3rd element */
div:nth-child(3n) {
    margin-right: 0;
}

/* First of type */
h2:first-of-type {
    margin-top: 0;
}

🔤 Pseudo-Element Selectors

Create virtual elements for styling specific parts of an element.

/* Style the first letter of paragraphs */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #333;
}

/* Style the first line of paragraphs */
p::first-line {
    font-variant: small-caps;
}

/* Add content before elements */
.quote::before {
    content: """;
    font-size: 1.5em;
    color: #666;
}

/* Add content after elements */
.quote::after {
    content: """;
    font-size: 1.5em;
    color: #666;
}

📋 Attribute Selectors

Select elements based on their attributes.

1. Basic Attribute Selectors

/* Elements with a specific attribute */
[title] {
    border-bottom: 1px dotted #333;
}

/* Elements with a specific attribute value */
[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}

/* Elements with attribute containing specific value */
[class~="highlight"] {
    background-color: yellow;
}

2. Advanced Attribute Selectors

/* Attribute starts with specific value */
[href^="https"] {
    color: green;
}

/* Attribute ends with specific value */
[src$=".jpg"] {
    border: 2px solid #333;
}

/* Attribute contains specific substring */
[title*="important"] {
    font-weight: bold;
}

/* Attribute starts with value followed by hyphen */
[lang|="en"] {
    font-family: "English Font", sans-serif;
}

🎯 Grouping Selectors

Apply the same styles to multiple selectors.

/* Group multiple selectors with commas */
h1, h2, h3 {
    color: #333;
    font-family: Georgia, serif;
}

.primary-btn, .secondary-btn, .danger-btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

🔄 Selector Specificity

Understanding how CSS determines which rules to apply when multiple selectors target the same element.

Specificity Hierarchy (from highest to lowest):

Inline styles (style="...") - 1000 points
IDs (#id) - 100 points
Classes, attributes, pseudo-classes (.class, [attr], :hover) - 10 points
Elements and pseudo-elements (div, ::before) - 1 point

Examples:

/* Specificity: 1 (element) */
p { color: black; }

/* Specificity: 10 (class) */
.text { color: blue; }

/* Specificity: 100 (ID) */
#special { color: red; }

/* Specificity: 111 (ID + class + element) */
#special .text p { color: green; }

💡 Practical Examples

Navigation Menu Styling

/* Basic navigation */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
}

nav ul li a:hover {
    background-color: #f0f0f0;
    border-radius: 5px;
}

nav ul li:last-child {
    margin-right: 0;
}

Form Styling

/* Form inputs */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Required fields */
input[required] {
    border-left: 3px solid #ff6b6b;
}

🔍 Key Takeaways

Basic selectors target elements by tag, class, or ID
Combinator selectors target elements based on their relationship to other elements
Pseudo-classes target elements in specific states (:hover, :focus, :nth-child)
Pseudo-elements create virtual elements (::before, ::after, ::first-letter)
Attribute selectors target elements based on their attributes
Specificity determines which styles are applied when multiple rules conflict
Grouping selectors helps apply the same styles to multiple elements efficiently

DAY 1 OF CSS

Raizo-03 — Thu, 03 Jul 2025 08:03:28 +0000

Day 1: CSS Fundamentals

🎨 CSS Overview

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages.

What CSS Does:

Styling: Controls colors, fonts, spacing, and layout
Layout: Positions elements on the page
Responsive Design: Makes websites work on different screen sizes
Visual Effects: Adds animations, transitions, and interactive elements

Why Use CSS:

Separation of Concerns: Keeps content (HTML) separate from presentation (CSS)
Reusability: One CSS file can style multiple HTML pages
Maintainability: Easy to update the look of an entire website
Performance: Faster loading times through external stylesheets

🏷️ CSS Selectors

Selectors are patterns used to select and style HTML elements. They tell the browser which elements to apply the CSS rules to.

Basic Selectors

Selector Type	Syntax	Description	Example
Element Selector	`element`	Selects all elements of a specific type	`p { color: blue; }`
Class Selector	`.classname`	Selects elements with a specific class	`.highlight { background: yellow; }`
ID Selector	`#idname`	Selects element with a specific ID	`#header { font-size: 24px; }`
Universal Selector	`*`	Selects all elements	`* { margin: 0; }`

Selector Examples:

/* Element selector - targets all <h1> elements */
h1 {
    color: navy;
    font-size: 28px;
}

/* Class selector - targets elements with class="button" */
.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
}

/* ID selector - targets element with id="navigation" */
#navigation {
    background-color: #333;
    height: 60px;
}

/* Universal selector - targets all elements */
* {
    box-sizing: border-box;
}

📝 The `<style>` Tag

The <style> tag is used to include CSS directly in an HTML document. It's placed within the <head> section.

Syntax:

<head>
    <style>
        /* CSS rules go here */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>

Three Ways to Add CSS:

Inline CSS (directly in HTML elements)

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

Internal CSS (using <style> tag)

   <style>
       p { color: red; font-size: 16px; }
   </style>

External CSS (separate .css file)

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

🎯 CSS Properties and Values

CSS properties define what aspect of an element you want to style, and values specify how you want to style it.

Common Text Properties

Property	Description	Example Values
`color`	Text color	`red`, `#ff0000`, `rgb(255,0,0)`
`font-size`	Size of text	`16px`, `1.2em`, `large`
`font-family`	Font type	`Arial`, `serif`, `sans-serif`
`font-weight`	Text thickness	`normal`, `bold`, `400`, `700`
`text-align`	Text alignment	`left`, `center`, `right`, `justify`

Common Layout Properties

Property	Description	Example Values
`margin`	Space outside element	`10px`, `0 auto`, `5px 10px`
`padding`	Space inside element	`20px`, `10px 15px`, `5px 10px 15px 20px`
`width`	Element width	`100px`, `50%`, `auto`
`height`	Element height	`200px`, `100vh`, `auto`
`background-color`	Background color	`white`, `#f0f0f0`, `rgba(0,0,0,0.5)`

Common Border Properties

Property	Description	Example Values
`border`	All border properties	`1px solid black`, `2px dashed red`
`border-width`	Border thickness	`1px`, `thin`, `medium`, `thick`
`border-style`	Border style	`solid`, `dashed`, `dotted`, `none`
`border-color`	Border color	`black`, `#333`, `rgb(100,100,100)`

Property Examples:

/* Text styling */
h1 {
    color: #2c3e50;
    font-size: 32px;
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    text-align: center;
}

/* Box model styling */
.card {
    width: 300px;
    height: 200px;
    margin: 20px auto;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Multiple properties */
.button {
    color: white;
    background-color: #007bff;
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

💡 Key Takeaways

CSS controls the visual presentation of HTML elements
Selectors determine which elements to style
Properties define what to style (color, size, spacing, etc.)
Values specify how to style the selected properties
The <style> tag allows you to include CSS directly in HTML
External stylesheets are the preferred method for larger projects

🔍 CSS Rule Structure

Every CSS rule follows this basic structure:

selector {
    property: value;
    property: value;
}

Example:

.my-class {
    color: blue;
    font-size: 18px;
    margin: 10px;
}

This foundational knowledge forms the basis for all CSS styling and is essential for creating visually appealing web pages!

DAY 8 OF HTML

Raizo-03 — Wed, 02 Jul 2025 07:54:03 +0000

Introduction

This is a brief introduction to other important HTML tags that are commonly used in web development.

📋 HTML Tags Overview

`<meta>` Tag

Description:

Defines metadata about an HTML document, such as character set, author, and viewport settings
Placed within the <head> section of the document
Commonly used for setting the character encoding and viewport for responsive design
Used to provide information to search engines and browsers
Helps for SEO and ensures proper rendering of the page

Usage Examples:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

`<link>` Tag

Description:

Defines the relationship between the current document and an external resource
Commonly used to link to stylesheets (CSS) and icons
Placed within the <head> section of the document
Helps browsers understand how to handle the linked resource

Usage Examples:

<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">

`<script>` Tag

Description:

Defines a client-side script, such as JavaScript
Can be placed in the <head> or <body> section
Commonly used to add interactivity and dynamic content to web pages
Can link to external script files or contain inline scripts

Usage Examples:

<script src="script.js"></script>
<script>
  alert("Hello, World!");
</script>

`<iframe>` Tag

Description:

Defines an inline frame, which is used to embed another document within the current HTML document
Commonly used to embed videos, maps, or other web pages
Can specify the size and border of the iframe

Usage Examples:

<iframe src="https://www.example.com" width="600" height="400" title="alternative-title"></iframe>

`<progress>` Tag

Description:

Represents the progress of a task, such as file upload or download
Can display a value between 0 and 1, or a range of values
Commonly used to show the completion status of a process

Usage Examples:

<progress value="0.5" max="1"></progress>

Interactive Example:

<button id="progress-btn">Toggle Progress Bar</button>
<progress id="progress" value="0.5" max="1" hidden></progress>

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("progress-btn").addEventListener("click", function() {
        const progress = document.getElementById("progress");
        progress.hidden = !progress.hidden; // Toggle visibility                                                
    });
});
</script>

💡 Key Takeaways

Meta tags are essential for SEO and proper page rendering
Link tags connect external resources like CSS and favicons
Script tags add interactivity with JavaScript
Iframe tags embed external content seamlessly
Progress tags provide visual feedback for ongoing processes

DAY 7 OF HTML

Raizo-03 — Tue, 01 Jul 2025 18:24:04 +0000

Today I explored semantic and non-semantic HTML — learning how different elements affect structure, accessibility, readability, and developer experience. I also learned how to combine them with class, id, CSS, and JavaScript for a complete and maintainable layout.

🧱 Non-Semantic HTML Elements

Non-semantic HTML elements don't describe their meaning. They simply act as generic containers. While useful for layout and styling, they give no information about the content they wrap.

🧐 What are they?

<div> – used as a generic block container
<span> – used as a generic inline container
<font> – used in the past for styling text (now obsolete)

📊 Non-Semantic Elements Overview

Tag Name	Description
`<span>`	Defines an inline section in a document
`<div>`	Defines a block-level container in a document
`<font>`	Defines font styles (obsolete in HTML5)

Note: There are many non-semantic tags — but use them wisely.

🏷️ Understanding `class` and `id` Attributes

You can style or target any element using class or id — including both semantic and non-semantic tags. These attributes are essential for applying CSS or JavaScript.

Attribute	Purpose	Example
`class`	Reusable identifier for styling multiple elements	`<div class="container">`
`id`	Unique identifier for a single element	`<div id="header">`

🚨 Reminder:

id must be unique per page.

class can be reused across multiple elements.

📦 Semantic HTML Elements

Semantic elements describe their meaning in both name and behavior — making your code more readable, accessible, and SEO-friendly.

✅ Benefits of Semantic HTML

Makes your code self-documenting
Helps screen readers and assistive tech
Improves SEO and indexing
Encourages clean layout structure

🧾 Semantic Elements Overview

Tag Name	Description	Example
`<header>`	Defines the page or section header	`<header>My Website</header>`
`<nav>`	Defines navigation links	`<nav>...</nav>`
`<article>`	Defines self-contained content	`<article>...</article>`
`<section>`	Defines a document section	`<section>...</section>`
`<footer>`	Defines footer content	`<footer>...</footer>`

🔁 Can You Combine Semantic and Non-Semantic HTML?

Yes! Most real-world websites use a mix of both. You might use a <section> for a content block and wrap smaller layout components inside <div> tags for structure or styling purposes.

<section class="blog-post">
  <article>
    <h2>Blog Title</h2>
    <p>This is the blog content.</p>
  </article>
  <div class="sidebar">
    <p>Related Links</p>
  </div>
</section>

DAY 6 OF HTML

Raizo-03 — Mon, 30 Jun 2025 16:56:16 +0000

Day 6 of HTML

Today I mastered HTML special characters, learning how to properly display symbols, entities, and international text that goes beyond basic ASCII. Here's everything I discovered about handling special characters in HTML:

🔤 HTML Character Fundamentals

HTML special characters are essential for displaying symbols, accented letters, mathematical notation, and emojis that can't be typed directly on a standard keyboard.

Core Character Concepts:

HTML Entities — coded representations of special characters
Character Sets — defining which characters are supported
Numeric Entities — decimal and hexadecimal character codes
Named Entities — human-readable character names
Unicode Support — international character handling
Emoji Integration — modern symbol display

🎯 Character Encoding Basics

Setting Your Document Charset

Always declare your character encoding in the document head:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
</head>

Why UTF-8?

Supports all Unicode characters (over 1 million!)
Backward compatible with ASCII
Most widely supported encoding
Handles emojis and international text

🔢 HTML Entities Deep Dive

1. Named Character Entities

Human-readable names for common symbols:

<!-- Basic symbols -->
&lt; &gt; &amp; &quot; &apos;
<!-- Displays: < > & " ' -->

<!-- Copyright and trademark -->
&copy; &reg; &trade;
<!-- Displays: © ® ™ -->

<!-- Currency symbols -->
&dollar; &cent; &pound; &yen; &euro;
<!-- Displays: $ ¢ £ ¥ € -->

<!-- Mathematical symbols -->
&plusmn; &times; &divide; &frac12; &frac14;
<!-- Displays: ± × ÷ ½ ¼ -->

<!-- Arrows and symbols -->
&larr; &rarr; &uarr; &darr; &harr;
<!-- Displays: ← → ↑ ↓ ↔ -->

2. Numeric Character Entities

Use decimal or hexadecimal codes for any Unicode character:

<!-- Decimal format -->
&#169; &#174; &#8482;
<!-- Displays: © ® ™ -->

<!-- Hexadecimal format -->
&#x00A9; &#x00AE; &#x2122;
<!-- Displays: © ® ™ -->

<!-- Accented characters -->
&#224; &#225; &#226; &#227; &#228;
<!-- Displays: à á â ã ä -->

3. Essential HTML Reserved Characters

These characters have special meaning in HTML and must be escaped:

<!-- Reserved characters -->
&lt;    <!-- Less than: < -->
&gt;    <!-- Greater than: > -->
&amp;   <!-- Ampersand: & -->
&quot;  <!-- Double quote: " -->
&apos;  <!-- Apostrophe/single quote: ' -->
&nbsp;  <!-- Non-breaking space:   -->

🌍 International Character Support

Accented Letters

<!-- French -->
&agrave; &egrave; &ccedil; &ocirc;
<!-- Displays: à è ç ô -->

<!-- Spanish -->
&ntilde; &aacute; &eacute; &iacute;
<!-- Displays: ñ á é í -->

<!-- German -->
&auml; &ouml; &uuml; &szlig;
<!-- Displays: ä ö ü ß -->

<!-- Scandinavian -->
&aring; &aelig; &oslash;
<!-- Displays: å æ ø -->

Greek Letters (Great for Math/Science)

<!-- Common Greek letters -->
&alpha; &beta; &gamma; &delta; &pi; &sigma; &omega;
<!-- Displays: α β γ δ π σ ω -->

<!-- Capital Greek letters -->
&Alpha; &Beta; &Gamma; &Delta; &Pi; &Sigma; &Omega;
<!-- Displays: Α Β Γ Δ Π Σ Ω -->

😀 Emoji and Modern Symbols

Direct Emoji Usage

With UTF-8, you can use emojis directly:

<p>I love coding! 💻 ❤️ 🚀</p>
<p>Weather today: ☀️ 🌤️ 🌧️</p>
<p>Food: 🍕 🍔 🍣 🍰</p>

Emoji via Unicode Entities

<!-- Decimal format -->
&#128512; &#128513; &#128514;
<!-- Displays: 😀 😁 😂 -->

<!-- Hexadecimal format -->
&#x1F600; &#x1F601; &#x1F602;
<!-- Displays: 😀 😁 😂 -->

<!-- Professional emojis -->
&#x1F4BB; &#x1F4C8; &#x1F4CA; &#x1F4CB;
<!-- Displays: 💻 📈 📊 📋 -->

🔣 Specialized Symbol Categories

Mathematical Symbols

<!-- Basic math -->
&sum; &prod; &radic; &infin; &int;
<!-- Displays: ∑ ∏ √ ∞ ∫ -->

<!-- Comparison operators -->
&le; &ge; &ne; &equiv; &asymp;
<!-- Displays: ≤ ≥ ≠ ≡ ≈ -->

<!-- Set theory -->
&isin; &notin; &ni; &sub; &sup;
<!-- Displays: ∈ ∉ ∋ ⊂ ⊃ -->

Typography Symbols

<!-- Quotation marks -->
&lsquo; &rsquo; &ldquo; &rdquo;
<!-- Displays: ' ' " " -->

<!-- Dashes and spaces -->
&ndash; &mdash; &thinsp; &ensp; &emsp;
<!-- Displays: – — (thin space) (en space) (em space) -->

<!-- Special punctuation -->
&hellip; &bull; &middot; &sect; &para;
<!-- Displays: … • · § ¶ -->

💡 Practical Example: Multilingual Content

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>International Café Menu</title>
</head>
<body>
  <h1>Café International ☕</h1>

  <h2>Beverages &amp; Prices</h2>
  <ul>
    <li>Café au Lait &mdash; &euro;3.50</li>
    <li>Cappuccino &mdash; &dollar;4.25</li>
    <li>Espresso &mdash; &pound;2.75</li>
    <li>Matcha Latte &mdash; &yen;480</li>
  </ul>

  <h2>Specialties from Around the World 🌍</h2>
  <ul>
    <li><strong>French:</strong> Crème brûlée &copy; Chef François</li>
    <li><strong>Spanish:</strong> Café con leche y churros</li>
    <li><strong>German:</strong> Schwarzwälder Kirschtorte</li>
    <li><strong>Greek:</strong> Frappé with μέλι (honey)</li>
  </ul>

  <footer>
    <p>&copy; 2024 Café International. All rights reserved &reg;</p>
    <p>Made with ❤️ and lots of ☕</p>
  </footer>
</body>
</html>

DAY 5 OF HTML

Raizo-03 — Mon, 30 Jun 2025 16:22:42 +0000

Day 5 of HTML

Today I mastered HTML forms, learning how to create interactive user interfaces that collect and process user input. Here's everything I discovered about building forms:

📝 HTML Form Fundamentals

HTML forms are the backbone of user interaction on the web, allowing users to input data that can be sent to servers for processing.

Essential Form Elements:

<form> — container for the entire form with action and method attributes
<input> — versatile input field with multiple types
<textarea> — multi-line text input area
<select> — dropdown selection menu
<option> — individual choices within select elements
<optgroup> — groups related options together
<label> — describes form controls for accessibility
<button> — clickable form submission or action buttons

🔧 Form Element Deep Dive

1. The `<form>` Element

The form element wraps all form controls and defines how data is submitted.

<form action="/submit" method="POST">
  <!-- form controls go here -->
</form>

Key Attributes:

action — URL where form data is sent
method — HTTP method (GET or POST)
enctype — encoding type for file uploads
novalidate — disables browser validation

2. Input Element Types

The <input> element is incredibly versatile with many type variations:

<!-- Text inputs -->
<input type="text" name="username" placeholder="Enter username">
<input type="email" name="email" required>
<input type="password" name="password">

<!-- Selection inputs -->
<input type="checkbox" name="newsletter" value="yes">
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

<!-- Date and time -->
<input type="date" name="birthday">
<input type="time" name="appointment">

<!-- Numbers and ranges -->
<input type="number" name="age" min="18" max="100">
<input type="range" name="volume" min="0" max="100">

<!-- File and hidden -->
<input type="file" name="avatar" accept="image/*">
<input type="hidden" name="user_id" value="12345">

3. Textarea for Multi-line Text

Perfect for longer text input like comments or messages:

<textarea name="message" rows="4" cols="50" placeholder="Your message here...">
</textarea>

4. Select Dropdowns

Create dropdown menus for single or multiple selections:

<select name="country">
  <option value="">Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

<!-- Multiple selection -->
<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

5. Grouping Options

Use <optgroup> to organize related options:

<select name="food">
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="spinach">Spinach</option>
  </optgroup>
</select>

6. Labels for Accessibility

Always associate labels with form controls:

<!-- Explicit labeling -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

<!-- Implicit labeling -->
<label>
  Phone Number:
  <input type="tel" name="phone">
</label>

🎯 Complete Form Example

Here's a practical contact form putting it all together:

<form action="/contact" method="POST">
  <div>
    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="subject">Subject:</label>
    <select id="subject" name="subject">
      <option value="general">General Inquiry</option>
      <option value="support">Technical Support</option>
      <option value="billing">Billing Question</option>
    </select>
  </div>

  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <div>
    <input type="checkbox" id="newsletter" name="newsletter" value="yes">
    <label for="newsletter">Subscribe to newsletter</label>
  </div>

  <button type="submit">Send Message</button>
  <button type="reset">Clear Form</button>
</form>

Day 4 of HTML

Raizo-03 — Tue, 24 Jun 2025 14:20:04 +0000

Today I mastered HTML tables, learning how to create structured tabular data with proper semantics and styling. Here's everything I discovered about building tables:

📊 HTML Table Structure

HTML tables are built using a hierarchical structure of elements that organize data into rows and columns.

Basic Table Elements:

<table> — container for the entire table
<tr> — table row (horizontal)
<th> — table header cell
<td> — table data cell
<caption> — table title/description

Simple Table Example:

<table>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Maria Santos</td>
    <td>95</td>
  </tr>
</table>

🏗️ Semantic Table Structure

For better accessibility and organization, use semantic table elements:

Table Sections:

<thead> — groups header content
<tbody> — groups body content
<tfoot> — groups footer content

Well-Structured Table:

<table>
  <caption>Student Grades Report</caption>

  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Math</th>
      <th>Science</th>
      <th>Average</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>95</td>
      <td>92</td>
      <td>93.5</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Jane Smith</td>
      <td>88</td>
      <td>94</td>
      <td>91</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="4">Class Average</td>
      <td>92.25</td>
    </tr>
  </tfoot>
</table>

🔗 Table Attributes

`colspan` Attribute:

Specifies how many columns a cell should span horizontally.

<table>
  <tr>
    <th colspan="3">Quarter 1 Results</th>
  </tr>
  <tr>
    <th>Student</th>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>90</td>
    <td>88</td>
  </tr>
</table>

`rowspan` Attribute:

Specifies how many rows a cell should span vertically.

<table>
  <tr>
    <th rowspan="3">Subjects</th>
    <th>Math</th>
    <td>95</td>
  </tr>
  <tr>
    <th>Science</th>
    <td>92</td>
  </tr>
  <tr>
    <th>English</th>
    <td>88</td>
  </tr>
</table>

Complex Table with Both Attributes:

<table>
  <caption>Student Performance Dashboard</caption>

  <thead>
    <tr>
      <th rowspan="2">Names</th>
      <th colspan="2">Core Subjects</th>
      <th rowspan="2">Average</th>
    </tr>
    <tr>
      <th>Mathematics</th>
      <th>Science</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Jaymar</td>
      <td>94</td>
      <td>92</td>
      <td>93</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>89</td>
      <td>95</td>
      <td>92</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>91</td>
      <td>87</td>
      <td>89</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">Total Students</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

🎨 Basic Table Styling

Here's the CSS I used to style my tables:

table, tr, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

caption {
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2em;
}

thead {
  background-color: yellow;
}

tbody {
  background-color: lightblue;
}

tfoot {
  background-color: lightgray;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  font-weight: bold;
}

📋 Practical Table Examples

Product Comparison Table:

<table>
  <caption>Laptop Comparison</caption>

  <thead>
    <tr>
      <th>Feature</th>
      <th>Basic Model</th>
      <th>Pro Model</th>
      <th>Premium Model</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>RAM</td>
      <td>8GB</td>
      <td>16GB</td>
      <td>32GB</td>
    </tr>
    <tr>
      <td>Storage</td>
      <td>256GB SSD</td>
      <td>512GB SSD</td>
      <td>1TB SSD</td>
    </tr>
    <tr>
      <td>Price</td>
      <td>$899</td>
      <td>$1,299</td>
      <td>$1,899</td>
    </tr>
  </tbody>
</table>

Schedule Table:

<table>
  <caption>Weekly Class Schedule</caption>

  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>9:00 AM</td>
      <td>Math</td>
      <td>Science</td>
      <td>Math</td>
      <td>Science</td>
      <td>Review</td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td>English</td>
      <td>History</td>
      <td>English</td>
      <td>History</td>
      <td colspan="1">Free Period</td>
    </tr>
  </tbody>
</table>

♿ Table Accessibility

Best Practices:

Always use <th> for headers
Include scope attribute for complex tables
Use <caption> to describe table content
Provide alternative text for data tables

<table>
  <caption>Monthly Sales Report by Region</caption>

  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">January</th>
      <th scope="col">February</th>
      <th scope="col">March</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$50,000</td>
      <td>$55,000</td>
      <td>$52,000</td>
    </tr>
    <tr>
      <th scope="row">South</th>
      <td>$48,000</td>
      <td>$51,000</td>
      <td>$49,000</td>
    </tr>
  </tbody>
</table>

DEV Community: Raizo-03

DAY 7 OF CSS

Tags

DAY 6 OF CSS

The Mystery of Disappearing Elements

CSS Display Property: The Layout Controller

Block Elements

Inline Elements

Inline-Block: Best of Both Worlds

The Display: None Technique

CSS Visibility Property: The Space Keeper

Display vs Visibility: The Showdown

Advanced Display Values

Flex Display

Grid Display

Table Display

Practical Examples I Built Today

1. Responsive Navigation Toggle

2. Show/Hide Content with JavaScript

3. Creating a Horizontal Button Group

When to Use What?

Use display: none when:

Use visibility: hidden when:

Use display: block/inline/inline-block when:

Common Gotchas I Encountered

Pro Tips I Learned

1. Smooth Transitions

2. Responsive Display Utilities

3. Debugging Layout Issues

What's Next?

Tags

DAY 5 OF CSS

What is the Box Model?

The Content Area

Padding: Internal Spacing

Borders: The Frame

Margins: External Spacing

The Complete Box Model Example

Box-Sizing: Changing the Game

Practical Tips I Learned

1. The Universal Border-Box Reset

2. Margin Collapse

3. Debugging with Developer Tools

Common Gotchas I Encountered

What's Next?

Tags

DAY 4 OF CSS

DAY 3 OF CSS

✨ Text Appearance Properties

Text Transform Values:

Text Shadow Syntax:

📐 Text Alignment Properties

Text Align Values:

📏 Text Spacing Properties

White Space Values:

🔤 Font Properties

Font Weight Values:

Font Style Values:

🌐 Custom Fonts Integration

Method 1: Using Google Fonts with <link> Tag

Method 2: Using @import in CSS

🎯 Font Family Best Practices

Font Stack (Fallback Fonts)

Font Loading Optimization

📊 Complete Example

💡 Key Takeaways

Text Formatting Essentials:

Custom Fonts Best Practices:

Performance Tips:

DAY 2 OF CSS

🎯 Overview of CSS Selectors

🏷️ Basic Selectors

1. Universal Selector (*)

2. Element Selector (Type Selector)

3. Class Selector (.classname)

4. ID Selector (#idname)

🔗 Combinator Selectors

1. Descendant Selector ()

2. Child Selector (>)

3. Adjacent Sibling Selector (+)

Use `display: none` when:

Use `visibility: hidden` when:

Use `display: block/inline/inline-block` when:

Method 1: Using Google Fonts with `<link>` Tag

Method 2: Using `@import` in CSS

1. Universal Selector (`*`)

3. Class Selector (`.classname`)

4. ID Selector (`#idname`)

2. Child Selector (`>`)

3. Adjacent Sibling Selector (`+`)

4. General Sibling Selector (`~`)

📝 The `<style>` Tag

`<meta>` Tag

`<link>` Tag

`<script>` Tag

`<iframe>` Tag

`<progress>` Tag

🏷️ Understanding `class` and `id` Attributes