DEV Community

Saravanan Lakshmanan
Saravanan Lakshmanan

Posted on

CSS Media Queries, CSS Outline, CSS Units

CSS Media Queries
CSS Media Queries enable web pages to adjust their layout and styles based on different screen sizes, devices, or orientations. They are essential for building responsive and adaptable web designs.

  • Apply CSS rules conditionally based on screen width or height.
  • Help create responsive layouts for mobile, tablet, and desktop devices.
  • Support conditions like orientation, resolution, and device type.
  • Improve user experience across different devices. 
<html>
<head>
    <style>
        .gfg {
            color: black;
        }
        @media screen and (max-width: 500px) {
            .gfg {
                color: green;
            }
        }
    </style>
</head>
<body>
    <div class="gfg">Sample Example of Media Query</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Media queries apply CSS rules based on device characteristics like screen width.
  • In your code, screens ≤500px wide change .gfg text color to green. Syntax: @media mediatype and (condition) { /* CSS styles */}

Media Types in CSS
Media types specify which devices the styles should apply to. Commonly used types include:

  • all → Suitable for all media devices.
  • print → Used for printers.
  • screen → Targeted at computer screens, tablets, smartphones, etc.
  • speech → Designed for screen readers that read the content aloud.

Media Queries for Multiple Screen Sizes

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gfg {
            color: black;
        }
        @media screen and (max-width: 800px) {
            .gfg {
                color: blue;
            }
        }
        @media screen and (max-width: 500px) {
            .gfg {
                color: green;
            }
        }
    </style>
</head>
<body>
    <div class="gfg">Sample Example of Media Query</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Styles adjust dynamically based on screen width using media queries.
  • For screens 800px or smaller, the text color changes to blue.
  • For screens 500px or smaller, the text color changes to green.

Media Queries for Multiple Screen Sizes with Additional Styles

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gfg {
            color: black;
            font-size: 20px;
            padding: 10px;
        }
        @media screen and (max-width: 800px) {
            .gfg {
                color: blue;
                font-size: 18px;
            }
        }
        @media screen and (max-width: 500px) {
            .gfg {
                color: green;
                font-size: 16px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="gfg">Sample Example of Media Query</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Styles dynamically adjust based on screen width using media queries.
  • For screens 800px or smaller, the text color becomes blue, and the font size decreases to 18px.
  • For screens 500px or smaller, the text color changes to green, the font size reduces to 16px, and the text is center-aligned.

CSS Media Query Features
Media queries allow developers to check various device characteristics. Here are some important features:

  • color → Specifies the number of bits per color component for the device.
  • grid → Checks whether the device is grid or bitmap.
  • height → Represents the height of the viewport.
  • aspect-ratio → Defines the width-to-height ratio of the viewport.
  • color-index → Indicates how many colors the device can display.
  • max-resolution → The highest resolution the device can achieve, measured in dpi or dpcm.
  • monochrome → Shows the number of bits per color on a monochrome device.
  • scan → Refers to the method of scanning used by the output device.
  • update → Describes how fast the device can update its display.
  • width → Represents the width of the viewport.

CSS Outline
CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.
Syntax
selector{
outline: outline-width outline-type outline-color;
/*outline: 2px solid grey;*/
}

Example: This example uses the outline property to create a dashed blue outline.

<!DOCTYPE html>
<html>

<head>
    <style>
        .dotted {
            outline: 2px dashed blue;
            color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Outline Property</h3>
    <p class="dotted">
        A Computer Science portal for geeks.
    </p>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS outline properties can be categorized into 4 types, namely, Outline-style, Outline-color, Outline-width & Outline-offset. We will discuss all the types of outline properties sequentially through the examples.

CSS Outline Properties
There are lots of properties comes under the CSS outline collection all of them are well described with the example.

Table of Content

  1. Outline-style
  2. Outline-color
  3. Outline-width
  4. Outline-offset

Difference between em and rem units in CSS
The em is based on the parent font size so that it can change in nested elements, while rem is based on the root font size, keeping the size same throughout the whole page.

1. em Unit
The em unit in CSS is relative to the font size of its parent element. It scales based on the current element’s font size, affecting the size of nested elements according to their parent's size.

When em is used for font-size, it’s based on the parent’s font size. For other properties, it’s based on the element’s font size, except in the first declaration where the parent is referenced.

<!DOCTYPE html>
<html>

<head> 
    <style>
        .parent {
            font-size: 20px;
        }

        .child-em {
            font-size: 2em;
            margin: 1.5em;
        }
    </style>
</head>

<body>
    <div class="parent">
        This is parent
        <div class="child-em">
            This is Child in em unit system
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

2. rem Unit
The rem unit in CSS is relative to the font size of the root element (). It provides consistent scaling across the entire document, ensuring that elements are sized relative to a single base font size.

<!DOCTYPE html>
<html>

<head>
    <style>
        .parent {
            font-size: 20px;
        }

        .child-rem {
            font-size: 2rem;
            margin: 1.5rem;
        }
    </style>
</head>

<body>
    <div class="parent">
        This is parent
        <div class="child-rem">
            This is Child in rem unit system
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

References:
https://www.w3schools.com/css/css3_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using
https://www.geeksforgeeks.org/css/css-media-queries/
https://www.geeksforgeeks.org/css/css-outline/

Top comments (0)