10 Css Tips That Everyone Should Know

December 15, 2016

Tina May

Co Founder of Institute of Code

CSS (aka cascading stylesheets) is what controls the visual aspects of the web.

While parts of CSS can be tricky (we’re looking at you positioning!), the basics are pretty easy to understand. The basic css structure looks like this:

selector { property: value; }

Where we select the elements that we want to style and then apply various properties to them.

A little CSS will go along way!

1. How to change the color of text

First select the text that you want to change, then apply the color property.

For example, let’s say we want to make all paragraphs a shade of purple (#8E44AD). The selector to select all elements is ‘p’ so we use that and change the color to purple.

 p { color: #8E44AD; }

To change all the level 1 headings to blue you would write…

h1 { color: #8E44AD; }

Colors can be set using color names, hex codes, and rgb values.

2. How to change the background color

To change the background color in css, first select the element you want to style first. If you want to apply the background to the whole page this would be the body.

body { background-color: #8E44AD; }

3. How to add a background image

To add a background image in css, you use the ‘background-image’ property (see, we told you it was simple!)

body { background-image: url('/images/sunset.png'); }

4. How to change the font

There are a couple of fonts that come ready-to-use in every browser (like Helvetica, Georgia, Arial & Verdana), but let’s be honest these are pretty ugly.  Most of the time you will want to add a custom font using a font provider like google fonts. Before you can use it in your css, you’ll need to add the google font to your site (instructions here).

Once you’ve done that you can style your text using the font’s that you have added (in this example we are using Lato on all the level 2 headings)

h2 { font-family: 'Lato'; }

5. How to change the boldness of text

To change how thick text is with css, or to make it bold, we use the font-weight property. To change all of our links to be bold, we use the ‘anchor link’ element with the ‘a’ selector.

a { font-weight: bold; }

If you are using a google font, you might have more options than just normal and bold, some fonts have options from 200 weight to 900 weight.

p { font-weight: 300; }

6. How to add a border in css

To create a border we need to specify the border thickness, style and color.

h1 { border: 1px solid grey; }

7. How to create a circle in CSS

To create rounded edges in CSS we use the border-radius property. For example, we could apply a 3px border-radius will round the corners to round the corners of every element with a class of button.

.button { border-radius: 3px; }

If we wanted to make circular images, we just need the border radius to be at least 50% and we need to start with a square image (otherwise we’ll end up with an oval).

img { border-radius: 50%; }

To do this we add ‘:hover’ to the end of our ‘a’ selector, which tells the browser to only apply this style when it’s being hovered.

a:hover { color: teal; }

9. How to center text

There are two main ways to centre content. If you want to align all the content in a section, you would use…

section { text-align: right; }

but if you just wanted to center (remember, US spelling for coding!) your headings you would use…

h1, h2, h3 { text-align: center; }

All links by default are blue and have an underline. To reset the styles of the links and style them yourself you might use something like this…

 a {
    text-decoration: none;
    color: teal;
    font-weight: bold
}

Written by: Tina May

Co Founder of Institute of Code