Easy CSS Tricks Every Web Developer Needs to Know

Years into my own web design/development journey, I have to admit, I am always learning new css tricks. It seems like every day I stumble onto something new and exciting to add to the never-ending list of incredible online features. 

 

If you’re new to the game, CSS, cascading stylesheets, is what controls the visual and stylistic design of your website. Even if you’re using a drag-and-drop web editor like Squarespace or Wix, you’ll still need to know some basic CSS in order to make your website completely your own. 

 

*in Squarespace you can head to the design settings and click on ‘Custom CSS’ to access the CSS stylesheet for your website. This is were you can customize those pesky template designs that you don’t like!

 

First things first, once you’ve set up your CSS stylesheet in your coding program (or you’ve opened up the Custom CSS panel), this is how you’ll be writing your CSS code: 

 

.class-name{

property: value;

}

 

You’ll use a “.” followed by a class to target the specific piece of code in your HTML (if you want to target a whole element, skip the “.” and target the element itself). 

 

Next, you’ll state a command–”property”–and how you want your code to present this property–”value”. 

 

For example if I wanted the title text (h1) in my header to have a font of 25px and be blue, I would write it as such

 

.header h1{

font-size: 25px;

color: blue;

}

 

I chose my class “header”, further specified that I wanted the title text to be targeted, and then added in commands. 

 

So now that we’ve covered the basics, here are my top 7 CSS styling tricks that every developer should know. 

 

1. How to Change Font vs. Background Colors 

 

This one seems straightforward, but I still find myself mixing up the CSS target command to change a background-color vs. font color. 

 

To change the font color you want to change, select the text and then apply a color property. 

 

For example, to change the color of all your titles (h1) to color blue you would:

 

h1{

color: blue;

}

 

You can use any color values, whether it’s a hex code or rgb code:

 

h1{

color: #c3e0d9;

}

 

Now, this is not to be confused with the background color of your element, which uses the property “background-color”. 

 

Using this property you can target anything from small elements like the box holding your title to entire pages.

 

For example, to change the background of your page you would write it as such: 

 

body{

background-color: #c3e0d9;

}

 

 

 

I know I’m not the only one annoyed by the underline and blue coloring on all links. But never fear, you can easily change that with just a couple lines of code!

 

Target you all the links in your code (a), remove the underline using “text-decoration”, and add a font color: 

 

a{

text-decoration: none;

color: black;

}

 

 

3. Adding in New Fonts

 

There are two ways to add in a new font: the insanely straightforward way and a tricker but more flexible way. 

 

 

The Straightforward Way: 

 

While there are a handful of default font styles you can use in your web project, but they’re probably not what you’re looking for. Instead, you can use custom fonts with providers like Google Fonts or Adobe Fonts

 

Once you’ve selected your font, your font provider will offer an embed link for you to add into the <head> of your code

 

-Pro-tip: I always add notes in code to tell me where each embed code goes and which piece of code belongs to what. To do that in Atom, click “command” + “/” and then write in your note (“Google Fonts” or “Adobe Fonts”). 

 

Once you’ve imported the font, use the CSS rule provided in your stylesheet. It will look something like this: 

 

h1{

font-family: ‘Merriweather’, sans-serif;

}

 

 

 

The Harder Way

 

Sometimes you’ll have a font in mind that you can’t find with an online provider. When thats the case, you’ll want to use @font-face. 

 

Once you’ve downloaded you font files (here we’re using .otf files), create a folder titled “fonts”. 

 

Head to your CSS stylesheet and then add in the following code:

 

@font-face{
  src:url(“/fonts/BOSQUE.otf”);
  font-family:bosque;
}

 

Make sure you replace “bosque” with whichever font you’ve uploaded into your files. 

 

Finally, we’ll use the same command as we did in the straightforward method to change specific kinds of text: 

 

h1{
  font-family:bosque;
}

 

 

4. Centering Text

 

Traditionally, there are two ways to center your text. You could either target all the content in a particular element/page or you can target specific elements. Whichever you choose, you’ll then use the “text-align” command to center your text. 

 

All Content: 

 

div{

text-align: center;

}

 

Some Content

 

h1{

text-align: center;

}

 

OR

 

.header h1{

text-align: center;

}

 

HOWEVER, I like to create a helper class to make this process even easier. A helper class is a single targeted class you’ve written into your CSS that you can add to the class of any element in your HTML code so you don’t have to write unique CSS commands for each element you want centered.  

 

For example, if I have a div I’m using for my services with a paragraph of text I want centered, this is how I would write it: 

 

HTML: 

 

<div class=”services centered”>

<p> Here is where my paragraph would go…</p>

</div>

 

CSS: 

 

.centered{

text-align: centered;

}

 

 

5. Adding a Border

 

The great thing about learning this particular piece of CSS styling is how many ways you can use it. 

 

Learning to add a border means you’ll also know how to add a side border or even an underline to any element. 

 

To add a border, you just need to specify the thickness, the line style, and the color: 

 

div {

border: 2px solid black;

}

 

-Pro-Tip: you can also use RGB and hex codes for color here too!

 

Now, if you only want a border on the bottom you would specify your code like this: 

 

div{

border-bottom: 2px solid black;

}

 

For a top border, use “border-top”. For the right or left, you would write: “border-left” or “border-right”.

 

Easy as pie. 

 

 

6. Add a background Image to your Element

 

To add a background image to any element in your code, you will use the “background-image” property: 

 

div{

background-image: url(“/images/catpic.jpg”);

}

 

-Pro-tip: want your image to be centered and non-repeating? Add: 

 

div{

background-image: url(“/images/catpic.jpg”);

background-position: center;

background-size: cover;

}

 

 

 

Adding a hover effect lets your audience know when certain links or buttons (or even images) are clickable. And it’s super easy to do. 

 

In your CSS, add “:hover” to your “a” selector. This tells your browser to add this style ONLY when a mouse hovers over your link. Your link will otherwise look the same. 

 

a:hover{

color:#c3e0d9;

}

 

Happy coding!

X

Tash