Posted on by dustin

Tech of the Week: CSS

Welcome to the first installment of a weekly(ish) segment where I learn some things about a technology and then write some things about it. This week, I spent some time looking at CSS, and I’ll share some tricks and links with you.

CSS, or Cascading Stylesheets, is a language for telling the web browser how to lay out elements on a web page, and what they should look like.  This post isn’t intended as an introduction to CSS.  If you’re looking for that, Ali Spittel recently wrote a good post about it on the DEV forum.  If you’re just looking for information on layout, skip to the Resources section, where there are links to a tutorial on layout, as well as tutorials specifically on Flexbox and Grid.

Starting Off

The fist task I set myself was to just make a nice looking but not very complicated page.  The result looked like this:

A web page with rounded corners and drop shadows

The bottom half of a web page with rounded corners and drop shadows 

A few techniques that were used on this page are: rounded corners, drop shadows, and small caps text.  I’ll give more details on those in the next sections.

Rounded Corners

Rounded corners are accomplished with the border-radius CSS rule.  In this case, it was:

border-radius: 20px;

This property can be set for each corner individually.  You can see a few elements in Twitter’s UI that use this property: 

A screenshot of Twitter's web interface, showing its use of elements with rounded corners

  • The media preview in the tweet
  • The “What’s happening?” text field where you type tweets
  • The rounded left and right sides on the Tweet button
  • The circular user icons

If you’re using Firefox you can find out how rounded corners or some other effect is achieved by right-clicking the button or other rounded-cornered element, and clicking “Inspect Element”.  (Other browsers have similar capabilities.)  If you do that for a user icon in Twitter, you’ll see something like the following:

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

Note that sometimes percent is used and sometimes px.  A border-radius of 50% makes the element circular.

This MDN page has more info on border-radius.

Drop Shadows

Drop shadows are made using something like:

filter: drop-shadow(3px 3px 3px black);

I’m not sure why it’s a “filter”, but here are the MDN pages for the filter property and the drop-shadow filter value.  There’s also a property called box-shadow, which might just be the same thing without having to use it as a filter.

Small Caps and Uppercase

A couple things you can do with text using CSS are to uppercase it, using the text-transform property:

h1, h2 {
    font-family: monospace;
    text-transform: uppercase;
}

…or to make it into small caps using the font-variant property:

a {
    text-decoration: none;
    font-variant: small-caps;
}

There’s a tutorial on text styling linked from the Resources section.

Layout

CSS is good for styling, but what about layout?  CSS has a couple relatively new features called Flexbox and Grid, which might finally allow it to catch up with the ease of use of using HTML tables for layout.  Tables are supposed to be bad for accessibility reasons, because screen readers interpret them as “tabular data” (i.e. the stuff you’d put in a spreadsheet), and so you shouldn’t use them for layout (I *guess*).  This could have been solved easily if the HTML standard had added a single property telling screen readers to just treat it as a layout table instead of a data table.  Something like:

<table semantic="false">
  <!-- and so forth -->
</table>

<!-- the semantic="false" property
     doesn't actually work because 
     they don't want you to be happy -->

But I digress.  Flexbox and Grid exist now.  I didn’t delve into them this week.  Which is probably why things got so frustrating after I started focusing on layout without them.

One thing I spent a lot of time trying to replicate was Facebook’s layout, which has a navbar on the top and another one on the side that stay in place as you scroll. 

The top navbar that stays in place is accomplished using position: fixed.

header {
    position: fixed;

    /* position: fixed has
       to be used with one of:
       top, bottom, left, right */
    top: 0;

    width: 100%;
    margin: 0;
    padding: 1rem;
    height: 1rem;
}

But this will obscure some content.  So the solution is to make a div that’s the same size, *without* position: fixed, to go above the content.

.fakeHeader {
    height: 1rem;
    margin-top: 0;
    padding: 1rem;
}

Adding a sidebar was more difficult, and I never got it right without it screwing up the content area in some way or another.  there are recipes for adding sidebars (one of which is linked in the Resources section), but they tend to assume the lack of a top navbar.  Whenever I got the sidebar looking right, the content area would always get messed up in some way.  I’m guessing the solution would be to just use Flexbox to define the horizontal areas of the hidden fake topnav and the area below it, and then use another Flexbox to partition the area below the topnav into sidebar and content areas. 

Resources and Further Reading

Here are some links that I came across in my studies.

Conclusion

That’s it for this week.  Next week(ish) I’m going to be looking at the inner workings of WordPress themes, which should let me apply some of this CSS knowledge to give this blog a custom look.   If you want to be notified of future posts, you can subscribe to the Tech of the Week tag via RSS, subscribe to my whole blog via RSS, or follow me on Twitter.  The latter two might contain stuff that’s not tech-related.  In fact, the Twitter one definitely does.  Or you can just sit and refresh the blog for a week (probably more like two, tbh) until a new post appears.  See you then.

Update: The weekly schedule is no longer a thing, and I haven’t, as of 10/12/2021, done a post on WordPress themes. See here for details.