CSS Beyond Code.org

Photo by Denise Chan on Unsplash

Finished Lesson 11 in the CS Discoveries Web Development unit? Add more flair to your website with these CSS tricks.

With just code, we’ll add awesome fonts, color-changing links, beautiful buttons, shadows, and rainbows to your page.

Use a Google Font

Bored of the default web fonts? Google offers a great selection of fancy fonts.

1. Go to Google Fonts and find a font you like.
2. Go to the HTML file where you want to use the font. In between the head tags, paste in the following code — just change “Your Font Name” to the name of the font you want.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Your Font Name">

3. In the CSS file that is linked to your HTML file, you can now use the font as a value for the font-family property:

h1 {
    font-family: 'Your Font Name', arial;
}

List the font in between single quotation marks, like in the example. It’s recommended you list a back-up font as well (here, arial) in case your first-choice font is unable to be retrieved from Google.

Customize your links with pseudo classes

Want to make your links light up when you mouse over them? Time to break out something called pseudo classes.

If you’ve customized your links before, chances are that you’ve used the a selector:

a {
    text-decoration: none;
}

(Fun fact: The line text-decoration: none; makes the default link underline go away.)

You can make a link change color when you hover over it by using the a:hover selector.

a:hover {
    color: deeppink;
}

Selectors with a colon are called pseudo classes. In addition to a:hover, there are also the a:active and a:visited pseudo classes for links (active refers to a link that is being clicked on, and visited refers to a visited link).

Create rounded corners and circular shapes

Do the corners of your images just seem too pointy? Round them off with the border-radius property.

img {
    border-radius: 10px;
}

Want to make an image circular? Here’s how you do it:

img {
    border-radius: 50%;
}

You can use border-radius on other elements, too! Say you wanted to turn your links into buttons with rounded corners. Here’s one way of doing that:

a {
    text-decoration: none;
    background-color: deeppink;
    color: black;
    padding: 5px 7px;
    border-radius: 20px;
}

Play around with the colors, pixel values, and pseudo classes (see above) to customize your link buttons!

Add shadows to your webpage

Need some dramatic lighting? Try adding shadows to your images with this code:

img {
    box-shadow: 5px 5px 3px black;
}

Play around with the different pixel values and try to figure out what each one does. (Click here for the answer.)

Pro tip: sometimes shadows look better if the color is a little transparent. To add transparency, we can change black in the code above to an rgba value:

img {
    box-shadow: 5px 5px 3px rgba(0, 0, 0, .5);
}

The .5 at the end means that the color is 50% transparent. You can change the .5 to any value between 0 (invisible) and 1 (opaque).

You can also add shadows to text. Try adding the code inside the curly brackets to one of your elements (here I’m adding to it to the h1 element):

h1 {
    text-shadow: -2px 2px 2px black;
}

Try playing around with the pixel values or the color (see if you can make it transparent again!).

Animate your CSS transitions

Personally, I find it a little jarring when I hover over a link and it abruptly changes to another color.

Let’s add a transition to make our links change color more smoothly when the user hovers over them:

Can you find the line with the transition? If you have links that change color or background-color, add similar lines to your code. Play around with the transition time to see what you like best.

Make rainbows on your page with gradients

Why have just one color as your background? With gradients, you can make your webpage background look like a sunset:

body {
    background: linear-gradient(yellow, red);
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Try changing the colors to see what happens.

No need to stop at two colors. You can make a rainbow:

body {
    background: linear-gradient(red, yellow, lawngreen, mediumturquoise, mediumblue, magenta);
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Instead of a linear gradient, you can also use a radial gradient that radiates color from the center of the screen:

body {
    background: radial-gradient(yellow, green);
}

A great resource for beautiful gradients is Web Gradients. (Thanks to some 6th grade students who discovered this!)

Play around with the gradients and colors and see what you like best!

What next?

If you’ve been copying and pasting CSS from this article into your site, take some time to clean up your code.

• Choose the pieces of CSS that you like best from this article, and keep those pieces.
• Delete CSS you’re not using.
• Consolidate rule sets so they’re not repetitive.

Don’t forget to customize the colors and other aspects of the code to make the designs your own!

The content of this article was inspired by HTML Dog’s CSS Tutorials.