CSS

Basic CSS
Web
Frontend
css
html

Basic CSS

Practical Example

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Units and Colors</title>
    <style>
        /* Setting the root font size */
        html {
            font-size: 16px; /* 1rem = 16px */
        }

        /* Styling the body with padding */
        body {
            padding: 2rem; /* 2 * 16px = 32px */
        }

        /* Styling a container */
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 1rem;
        }

        /* Styling a box with different units */
        .box {
            width: 10rem; /* 10 * 16px = 160px */
            height: 100px; /* 100px */
            background-color: #007bff; /* Blue color */
            color: white;
            margin-bottom: 1rem; /* 1 * 16px = 16px */
            padding: 1rem; /* 1 * 16px = 16px */
        }

        /* Using pseudo-elements */
        .box::before {
            content: "Before ";
        }
        .box::after {
            content: " After";
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
    </div>
</body>
</html>

Explanation: - The html element’s font size is set to 16px, making 1rem equal to 16px. - The body element has padding of 2rem, which is 32px. - The .container class centers the container and gives it a background color and padding. - The .box class uses rem and px units for width, height, margin, and padding, and adds a background color. - The ::before and ::after pseudo-elements add content before and after the .box content.

This example demonstrates how to use different CSS units, margins, paddings, and colors to style a webpage.

The Viewport

The viewport line in the HTML code is a meta tag that provides instructions to the browser on how to control the page’s dimensions and scaling on different devices. It’s especially important for responsive web design, which aims to make web pages look good on all devices, including desktops, tablets, and smartphones.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Breaking It Down

  1. name="viewport":
    • This specifies that the meta tag is related to the viewport, which is the area of the web page that is visible to the user.
  2. content="...":
    • This attribute defines the properties and behavior of the viewport. The values inside the quotes ("...") are the specific instructions given to the browser.
  3. width=device-width:
    • This instructs the browser to set the width of the viewport to the width of the device’s screen. For example, on a smartphone, the width will match the screen’s width in pixels.
    • Why it matters: Without this, the browser might assume a default width (often around 980 pixels), which can lead to zoomed-out or poorly scaled content on smaller screens like phones.
  4. initial-scale=1:
    • This sets the initial zoom level when the page is first loaded. 1 means no zoom (100% scale), so the page is displayed at its natural size.
    • Why it matters: It ensures that the content is displayed at the correct size from the start, without the need for users to zoom in or out.
  5. viewport-fit=cover:
    • This is used to control how the viewport interacts with device notches and other non-rectangular screen areas, especially on newer devices like iPhones with “notches” or “cutouts.”
    • cover means the viewport should fill the entire screen, including areas under any display cutouts, so the content will stretch to the edges of the screen.
    • Why it matters: It ensures that your content can take full advantage of the screen space, including areas around any notches or other non-rectangular parts of the display.

Why It’s Important

  • Responsive Design: The viewport meta tag is critical for responsive web design, which allows web pages to adapt to different screen sizes and orientations. Without it, web pages may not display correctly on mobile devices, leading to poor user experiences.

  • Preventing User Zoom Issues: Setting the initial scale and width ensures that users don’t have to pinch to zoom or scroll horizontally to see content properly on small screens.

Example Scenario

On a smartphone, if you didn’t have the viewport meta tag, your page might initially load in a zoomed-out state, making text very small and difficult to read. Users would then have to zoom in manually, which is not ideal for usability. With the viewport tag, the page adjusts itself to the screen size, making text readable and content easily accessible without extra effort from the user.

CSS Selectors

  1. Universal Selector (*):

    • The universal selector * targets all elements on the page. It is often used in resets to apply styles to every element.

    • Example:

      * {
  margin: 0;
  padding: 0;
}

  2. Pseudo-elements (::before and ::after):

    • Pseudo-elements are used to style specific parts of an element. They are not actual elements in the HTML but are used to apply styles to certain parts of an element’s content.

    • ::before and ::after are commonly used to insert content before or after the content of an element.

    • Example:

      .example::before {
  content: "Before ";
}
.example::after {
  content: " After";
}

    • In the above example, if you have an element <div class="example">Content</div>, it will render as “Before Content After”.

CSS Units

  1. Pixels (px):

  • Pixels are a fixed unit of measurement. The size of a pixel can vary depending on the screen resolution and device, but it is generally consistent within a given device.

  • Example:

    .box {
  width: 100px; /* 100 pixels wide */
  height: 50px; /* 50 pixels tall */
}

  1. Root Em (rem):

    • rem stands for “root em” and is a relative unit of measurement. It is relative to the root element’s font size, which is usually the <html> element.

    • If the root element’s font size is 16px, then 1rem equals 16px.

    • Example:

      html {
  font-size: 16px; /* 1rem = 16px */
}
.box {
  width: 10rem; /* 10 * 16px = 160px */
  height: 5rem; /* 5 * 16px = 80px */
}

  2. Em (em):

    • em is similar to rem but is relative to the font size of the element it is used on, not the root element.

    • Example:

      .parent {
  font-size: 20px;
}
.child {
  width: 2em; /* 2 * 20px = 40px */
  height: 1.5em; /* 1.5 * 20px = 30px */
}

  3. Percentage (%):

    • Percentages are relative to the parent element’s size.

    • Example:

      .parent {
  width: 400px;
  height: 200px;
}
.child {
  width: 50%; /* 50% of 400px = 200px */
  height: 50%; /* 50% of 200px = 100px */
}

  4. Viewport Width (vw) and Viewport Height (vh):

    • vw and vh are relative to the viewport’s width and height, respectively.

    • 1vw is 1% of the viewport’s width, and 1vh is 1% of the viewport’s height.

    • Example:

      .box {
  width: 50vw; /* 50% of the viewport's width */
  height: 50vh; /* 50% of the viewport's height */
}

  5. How to Know the Size on Screen:

  • The size of a px or rem on the screen can be checked using browser developer tools. Right-click on an element, select “Inspect,” and you can see the computed styles, including the width and height in pixels.

Margin and Padding

Margin:

  • Margin is the space outside the border of an element. It creates space between the element and its neighboring elements.

  • Example:

    .box {
  margin: 20px; /* 20px space outside the element */
}

Padding:

  • Padding is the space inside the border of an element. It creates space between the content of the element and its border.

  • Example:

    .box {
  padding: 20px; /* 20px space inside the element */
}

Margin-Bottom, Margin-Top, etc.:

  • You can set margins and paddings for specific sides of an element using properties like margin-top, margin-right, margin-bottom, margin-left, and similarly for padding.

  • Example:

    .box {
  margin-top: 10px; /* 10px space at the top */
  margin-bottom: 20px; /* 20px space at the bottom */
  padding-left: 15px; /* 15px space inside the left side */
  padding-right: 25px; /* 25px space inside the right side */
}

Colors

Hexadecimal Color Codes:

  • Colors in CSS can be specified using hexadecimal codes, which are a combination of six characters (0-9, A-F) representing the red, green, and blue components of the color.

  • Example:

    .box {
  background-color: #007bff; /* Blue color */
}

RGB and RGBA:

  • Colors can also be specified using the rgb or rgba functions, where rgba includes an alpha value for transparency.

  • Example:

    .box {
  background-color: rgb(0, 123, 255); /* Blue color */
  background-color: rgba(0, 123, 255, 0.5); /* Blue color with 50% opacity */
}

Named Colors:

  • CSS also supports named colors, which are predefined color names.

  • Example:

    .box {
  background-color: blue; /* Blue color */
}

Finding Color Codes:

  • You can use color pickers available in design tools like Adobe Photoshop, GIMP, or online tools like ColorPicker.
  • Browser developer tools also have built-in color pickers. Right-click on an element, select “Inspect,” and you can see and modify the color properties.

CSS Base Reset

CSS libraries like Tailwind applies a base reset to normalize the appearance of HTML elements across different browsers. This reset includes removing default margins and paddings, which can result in elements being flush against the edges of the window.

Here is an example of what the base reset might look like:

/* Example of Tailwind CSS base reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

Most browsers apply a default margin to the body element (often 8px). This margin can cause the content to be spaced away from the edges of the viewport. Even though the * selector applies to all elements, resetting the body margin and padding explicitly ensures that the body is included in this reset, preventing any default browser-specific margins or paddings that could affect the layout.

Example: Adding Padding to the Body

To add space between the content and the window border, you can use Tailwind CSS utility classes to add padding or margin to your elements.

You can add padding to the body element to create space between the content and the window border.

HTML Structure:

<body class="p-4">
    <main class="container">
        <h1>Markdown rendering example</h1>
        <div class="marked">
            Here are some _markdown_ elements.

            - This is a list item
            - This is another list item
            - And this is a third list item

            **Fenced code blocks work here.**
        </div>
    </main>
</body>

Explanation: - The p-4 class adds padding to all sides of the body element. The 4 represents a spacing unit defined by Tailwind CSS, which typically corresponds to 1rem (16px).

Example: Adding Margin to the Container

Alternatively, you can add margin to the main container to create space around it.

HTML Structure:

<body>
    <main class="container mx-4">
        <h1>Markdown rendering example</h1>
        <div class="marked">
            Here are some _markdown_ elements.

            - This is a list item
            - This is another list item
            - And this is a third list item

            **Fenced code blocks work here.**
        </div>
    </main>
</body>

Explanation:

  • The mx-4 class adds horizontal margin to the main container. The 4 represents a spacing unit defined by Tailwind CSS, which typically corresponds to 1rem (16px).

Determining the appropriate values for font sizes, box widths, and other dimensions in a design involves a combination of design principles, user experience considerations, and practical testing. Here are some guidelines and best practices to help you make these decisions:

Design CSS Sizes

1. Design Principles and Guidelines

Typography

  • Readability: Ensure that text is easily readable. A common base font size for body text is 16px, which is a good starting point for most designs.
  • Hierarchy: Use different font sizes to create a visual hierarchy. Headings should be larger than body text, and subheadings should be somewhere in between.
  • Line Height: Set an appropriate line height (usually 1.5 times the font size) to ensure text is easy to read.
  • Responsive Design: Use relative units like em or rem for font sizes to ensure they scale appropriately on different devices.

Layout

  • Grid Systems: Use a grid system to create a consistent layout. Common grid systems include 12-column grids, which help in determining the width of elements.
  • Spacing: Use consistent spacing for margins and paddings to create a clean and organized layout. This can be achieved using a spacing scale (e.g., 4px, 8px, 16px, 32px).
  • Responsive Design: Ensure that your layout adapts to different screen sizes. Use media queries to adjust widths, font sizes, and other dimensions for different devices.

2. User Experience Considerations

  • Accessibility: Ensure that font sizes are large enough for all users, including those with visual impairments. The Web Content Accessibility Guidelines (WCAG) recommend a minimum font size of 16px.
  • Touch Targets: Ensure that interactive elements (e.g., buttons, links) are large enough to be easily tapped on touch devices. A minimum size of 44px by 44px is recommended.
  • Content: Consider the type and amount of content. For example, a blog post might require a wider content area than a sidebar.

3. Practical Testing and Iteration

  • Prototyping: Use design tools like Figma, Sketch, or Adobe XD to create prototypes and test different font sizes and dimensions.
  • User Testing: Conduct user testing to gather feedback on readability, usability, and overall design.
  • Browser Developer Tools: Use browser developer tools to experiment with different values and see how they affect the design in real-time.

Example: Determining Font Sizes and Box Widths

Step 1: Define Base Font Size

Start with a base font size for body text. A common choice is 16px.

body {
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Line height for readability */
}

Step 2: Define Heading Sizes

Create a hierarchy for headings using relative units.

h1 {
    font-size: 2rem; /* 32px */
}
h2 {
    font-size: 1.5rem; /* 24px */
}
h3 {
    font-size: 1.25rem; /* 20px */
}

Step 3: Define Box Widths and Spacing

Use a grid system and spacing scale to determine box widths and spacing.

.container {
    width: 80%; /* 80% of the viewport width */
    max-width: 1200px; /* Maximum width for larger screens */
    margin: 0 auto; /* Center the container */
    padding: 1rem; /* 16px padding */
}

.box {
    width: calc(100% / 3 - 2rem); /* One-third of the container width minus spacing */
    margin: 1rem; /* 16px margin */
    padding: 1rem; /* 16px padding */
    background-color: #f0f0f0; /* Background color */
}

Step 4: Responsive Design

Use media queries to adjust font sizes and box widths for different screen sizes.

@media (max-width: 768px) {
    .container {
        width: 90%;
    }

    .box {
        width: calc(100% / 2 - 1rem); /* Adjust for smaller screens */
    }
}

@media (max-width: 480px) {
    .box {
        width: 100%; /* Full width for very small screens */
        margin: 0 0 1rem 0; /* Adjust margin */
    }
}

Summary

Determining the appropriate values for font sizes, box widths, and other dimensions involves:

  1. Design Principles: Follow guidelines for readability, hierarchy, and layout.
  2. User Experience: Consider accessibility, touch targets, and content requirements.
  3. Practical Testing: Use design tools, user testing, and browser developer tools to iterate and refine your design.

By combining these approaches, you can create a design that is both visually appealing and user-friendly.