jiaRoom

Styling

I've talked about styling so much, but what exactly is it? Plain HTML will look very bland, being only a white background with text stacked on top. But with the magic of <style> we can make things into whatever we want. You can use tags as the target and it's useful for global style changes. But it can also use the class and id attributes to choose exactly which elements to affect. I often use a grid as the foundation for it all, here's how I do it personally.


#grid {
    display: grid;
    height: 100%;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas:
        "left header right"
        "left main right"
        "left footer right";
    overflow-x: hidden;
}

#header {
    grid-area: header;
}

#main {
    grid-area: main;
}

#footer {
    grid-area: footer;
}

#left {
    grid-area: left;
}

#right {
    grid-area: right;
}

Another long example, let's break it down. #grid{} is the parent container to the rest. It displays a grid, and has a height at 100% of it's own parent container which in this case is the <body>. The grid-remplate-columns: and rows are there to decide the size of the grid's sections. grid-remplate-area: determines what parts of the grid should be associated with that variable. To assign a grid-area we simply state the name of the variable. In this case either head, main, footer, left or right. overflow-x is only there to prevent clunky scrolling on smaller screens such as mobile devices.