> Web Frontend (UI) > CSS tips

CSS tips

CSS can be confusing as hell, what style overrides what? Typically, you would use the browser’s F12 tool to see what styles are being applied to the selected element.

The most useful thing about CSS is to make your content responsive (i.e. elements reformat depending on the width of the user’s browser).

Making it responsive

Here’s how you would add padding to the left and right for screen size > 1337 pixels. (This is what I use for this site on the Category pages)

This goes between <style> tags or in the .css file:

.paddedContent {
    padding-right: 10rem;
    padding-left: 10rem;
}
@media only all and (max-width: 1337px) {
    .paddedContent {
        padding: 5px 1rem;
    }
}

Then wrap your content in a div:

<div class="paddedContent">
    Your text here
</div>

Quick Reference

Selectors:

tag
.class
#id

get yourself on the email list