Four Simple CSS Tips

3 min readFeb 25, 2021

I have a bit of a love hate relationship with CSS. Before my pivot into computer programming I used to do a lot of graphic design. So when I first started making webpages it was exceptionally frustrating when I couldn’t make them look the way I wanted them to. My background in graphic design is both a gift and a curse. Sure I learned about leading, kerning, rivers, widows, orphans, runts, and justified vs. rag type. Knowing about these details and knowing that I can manipulate them using CSS but not yet having the knowledge to do so is very frustrating. Until I learn some CSS that’s new and useful. Then I get that ‘click’ that programmers talk about. I want to learn more and more to the point that I‘ll spend hours on an about page on my localhost until it looks perfect. Even if I’m the only person who will ever see that about page the learning process is the key. I’m going to give you a couple CSS tips so when someone does see your webpage, you’ll be proud to show them.

Tip #1: Child Combinator

The ‘child combinator’ matches the elements of the second selector that are the direct children of the first element you pass it. This can be very useful if you want to style all of the <p> tags inside a div (div > p). Another useful application would be adding <a> tags in your footer (#footer > a), something a lot of websites have.

Several <a> tags in a footer you may be familiar with

CSS

//format
element1 > element2 { 
  style properties 
}span {
  font-weight: normal;
}

div > span {
  font-weight: bold;
}

HTML

<div>
  <span>Span #1, inside the div.
    <span>Span #2, inside the span that's inside the div.</span>
  </span>
</div>
<span>Span #3, outside of the div.</span>

Result

Span #1, inside the div. Span #2, inside the span that’s inside the div.

Span #3, outside of the div.

Tip #2: Selecting Multiple Elements

Consistency of design can make your webpage look more cohesive and focused. Don’t be afraid to use both serif and sans-serif fonts on the same page but try to limit yourself to two complimentary fonts. If you’re going to add a border to something it might also be nice if several elements, that maybe already have the same font, font-size, and color also have the same border. Did you know you can assign all these things at once? Not only can you use multiple selectors, you can use classes too.

.article, img, .toolbar {
    border: 1px solid #78c5c5;
    font-family: Verdana;
    background-color #323232
}

Tip #3: Drop Caps

p:first-letter {
  float: left;
  font-size: 3rem;
  line-height: 0.65;
  margin: 0.1em 0.1em 0.2em 0;
  color:#60c0c0;
}

Tip #4: Hovering

I know what you’re thinking, Hollywood lied to us, we should have hover-boards and hover-cars and hover-cities by now and even though they don’t appear to be feasible in my lifetime I can use hover effects in CSS right now. It’s pretty simple to do but try not to get too flashy with it the way I might have below.

CSS

img {
  border: 1px solid #000;
}img {
  border: 1px solid #f00;
  filter: invert(100%);
}