Best way learn the basics of CSS?

Themes
1

Hi all - this may be a naïve question, but could anyone recommend good online tools to learn CSS basics. I’m trying to tweak my template and it is going excruciatingly slowly, as I try to find how-tos, and the suggested code, for adjusting the sizes, colors, etc. of each element.

1 Like
2

Or, could anyone suggest the CSS code for changing the font in a specific element - in this case the sign-in button? I found how to change the font for the body, h1, and h2 etc, but don’t know how to do it for any specific element.

3

My preferred method for finding CSS tags is to use Firefox browser, the web developer tools in the settings menu, and then use the inspector to pick elements on the page and see what the style tags are. You can change the styles in the inspector to see what happens when editing, if it works how you want, copy the new styles edit to the code injection in your dashboard, wrapped in style tags.

To change the font in the text logo (in Edge theme for example) could be done like this:

<style>

.logo-text {
    font-family: 'Your font', another backup font;
    font-style: normal;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: 5px;
}

</style>

The elements will probably be named differently in different themes. So find the sign in tag with the inspector. Any custom fonts will need to be installed using @font-face in the stylesheet or Google webfonts. there’s another thread about that in the forum. :slight_smile:

4

Here’s a 12 hour free course via FreeCodeCamp:

And another great option via CodeCademy:

1 Like
5

Thank you, thank you

6

Thanks, John

7

This site has been around forever with lots of goodies!

8

My personal favourite (and it goes way back :sweat_smile:) is W3 schools:

That there above the general link. And here is their CSS course. It’s free, intuitive and really gets you going with hands on learning.

1 Like