A media query is a CSS technique that allows styles to be applied only when certain conditions about the device or screen are true.
Media queries are commonly used to make websites responsive, adapting layouts for different screen sizes such as desktops, tablets, and phones.
Common media query conditions: max-width, min-width, orientation
Basic Syntax
@media(condition) {/* CSS rules applied only if the condition is true */}
Example
@media(max-width:600px) { body {background:red; }}
Note
The rule in the example applies only when the screen width is 600px or smaller.
Layout techniques in CSS
Layouts let you correctly lay out (position) your boxes in relation to one another, and the browser viewport.
Box Model (margin/padding/border)
Flex
Grid
Positioning
Float (less common today)
Note
We will focus on Flexbox
CSS box model
The CSS box model module defines the margin and padding properties, which along with the height, width and border properties, make up the CSS box model.
Flexbox
Flexbox is a set of CSS properties for aligning block level content.
Flexbox defines two types of content: “containers” and “items”.
“Container” (sometimes referred to as the flex parent): the direct parent element of the HTML elements whose position you would like to control
“Items” (sometimes referred to as the flex children): the directly nested elements inside the parent container whose position you are controlling.
Most properties on the container can be set to determine how its items are laid out. Some properties can be directly applied to the flex items.
To label the container as a flex container we use the CSS set
indicates how to space the items inside the container along the main axis
align-items: flex-end; (flex-start, center, baseline,…) - indicates how to space the items inside the container along the cross axis
flex-direction: row; (column) - indicates whether the container flows horizontally or vertically (default row)
flex-wrap: wrap; (no-wrap, …) - indicates whether the container’s children should wrap on new lines
The Impact of Adjusting flex-direction
The default flex-direction is row. If you change the flex-direction to column you are changing the orientation of the axes.
The properties arranging elements along each axis does not change
Example: justify-content still controls items along the main axis. The main axis is just vertical now
CSS grid layout
It divides the page into major regions and defines the relationship in terms of size, position, and layering between parts of a control built from HTML primitives.
To label the container as a grid container we use the CSS set
div {display:grid;}
grid-column-gap and grid-row-gap specifies the gap between the columns and rows
grid-template-columns and grid-template-rows specifies the size of the rows in a grid layout
CSS Frameworks
CSS frameworks are pre-built collections of CSS styles and components that help developers build web pages faster.
They provide ready-made styles for common interface elements such as:
