Style with CSS
CSS is the style of our site. It lays out the content, allows responsive layouts on different devices, colours, adds the font and much more. There are a few key areas to focus on so lets use them in our site.
Units
There are many many units in CSS, from real world units, such as millimetres mm to relative units, such as the viewport width vw.
Web.dev has a fantastic page on units here.
Look at the page above and notice how many units are specific to typography, its worth trying out different things. Browsers have a default font size of 16px for text (though headings and other elements increase this size), units like em and rem are multipliers of this size.
(em can be a little strange as it is a multiplier of its parents font size. Have a play and see)
Units for layout
Units are used for things like font sizing and layout. The same set of units can be used for anything, for layout purposes you often want to use relative units (like percent or viewport width), but sometimes pixels are needed too.
Positioning
By default elements are positioned within the browser window. Normally elements will be stacked on top of each other (or next to each other) on the page, but they can be taken out of this standard layout.
If you change this property you can take the element out of the flow of the document and be very specific (you must be careful when doing this that the page still works responsively)
Find out a bit more here at W3 Schools
The example here shows how some of the position properties work.
Display
The display property changes how elements flow on the page. By default different elements have a different default display property. Some elements, like <p> and <div> take up the full width of the browser, others like <a> and <img> by default flow inline with other elements.
By changing this property you can create really interesting layouts. There are 2 particularly powerful layout methods called Flex and Grid that we will explore later on.
Have a look at this article on web.dev to learn more.
The code below will change images to take up a whole row:
img {
display: block;
}Flexbox
Flexbox is an amazing, responsive display type. It is used on a parent element to change the layout of children. Think of it as an algorithm to allow the browser to choose the best layout as circumstances change.
Josh Comeau has a fantastic (and interactive) article on Flexbox here
It is also well worth checking out the web.dev article too here
.parent {
display: flex;
flex-wrap: wrap;
}Grid
CSS Grid is another display method that a parent (or container) element can use to layout children elements. It works differently from flexbox and focuses on being specifically two dimensional. Like flexbox it has huge scope for creating responsive layouts.
Note that Grid and Flexbox can be used together (and often are).
.container {
display: grid;
grid-template-columns: 5em 100px auto;
grid-template-rows: 200px auto;
gap: 10px;
}Media queries
To change the style on different devices and browser sizes we use media queries. They are a bit like an if statement in JavaScript and allow you to ask a question. Such as "does the screen have a width bigger than 300px?"
@media (min-width: 300px) {
.large-screens {
display: block;
}
.small-screens {
display: none;
}
}