selector { property: value; }
The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). An inline element does not start on a new line and only takes up as much width as necessary. display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
Overriding Default Display
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.
li {
display: inline;
}
span {
display: block;
}
Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.
Using max-width improves the browser's handling of small windows, making your site function better on phones. If for example, a div is set to width: 500px, but the viewport is less, content will be cut off; whereas with max-width, the window will resize to always fit in the viewport.
max-width overrides width, but min-width overrides max-width. min-width will prevent the value of the width property from becoming smaller than a specified value.
div {
/* if viewport width is 500px or less
the browser will add a horizontal bar */
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
The CSS overflow property controls what happens to content that is too big to fit into an area. The overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area. The overflow property only works for block elements with a specified height. The overflow property has the following values:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Users are used to scrolling websites vertically on both desktop and mobile devices - but not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.
The @media rule tells the browser to include a block of CSS properties only if a certain condition is true.
@media only screen and (max-width: 600px) {
div {
width: 100%;
}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Flexbox and CSS Grid are designed to be responsive and eliminate the need for media queries. However, they both offer many options as to design while remaining responsive.