Great Big Lake Design - Peace of mind, thoughtful design

Creative, thoughtful branding, website design, and graphic design for small businesses, professionals, and entrepreneurs.

CSS Tips and Tricks

CSS Tips and Tricks

By

These CSS tips and tricks were presented by me as a talk at the Pullman WordPress Meetup on October 18, 2017. I gleaned many of the ideas here from the 2017 CSS Dev Conf. If you are a web designer/developer, I highly recommend this particular conference. The atmosphere was personal and the presentations were full of practical information. [last revision: December 9, 2017]

What is CSS?

CSS stands for Cascading Style Sheets. It is a language that is used to style web pages. If you are interested in doing some customization on your website beyond what is available in the options of a pre-designed WordPress theme, then learning about CSS is your next step. With CSS you can change the style of your typography, add image effects, change page layouts, and even add animation to your website.

For CSS Beginners

CSS Basics

Where do I put my CSS in WordPress?

  • In WP-Admin, go to “Appearances > Customizer > Additional CSS” (this is where you can add extra CSS)
  • **CAUTION** Avoid editing the “Appearances > Editor > (style.css)” unless you know what you’re doing (if you are using a pre-designed theme, any CSS you add here will be written over/lost when the theme is updated)

What does HTML/CSS look like?

HTML is the code that organizes the content of your web page into meaningful chunks (headings, paragraphs, lists, etc.). CSS is the code that tells your computer how the content/HTML is supposed to look.

This is a piece of HTML – this h2 element has a CSS class applied to it:
<h2 class="widget-title">This is my styled heading</h2>
This is the CSS that will be applied to all h2 elements that have a class of “widget-title”:
h2.widget-title {
     color: #f348d1; /* Comment: #f348d1 is a hexidecimal color */
     font-family: "Roboto", Arial, sans-serif;
     font-weight: bold;
     text-tranform: uppercase;
}

CSS Tutorials

If you really want to learn CSS, there are numerous tutorials online. I would suggest starting with the first tutorial listed below by Rachel Andrew.

  • The CSS Workshop (Rachel Andrew’s comprehensive step-by-step CSS video tutorial, the “Basics” section is free – the advanced tutorials run $99-$129; I have gone through all of these and they are great.)
  • W3C CSS Tutorials (free; examples with an online editor so that you can try things yourself)
  • CSS-Tricks (topics from beginning to advanced)
  • I subscribe to Lynda.com and they have many CSS tutorials. (NOTE: Some public libraries have a subscription to Lynda.com and let their residents use that subscription for free. Check with your local library.)

CSS Best Practices/Coding Standards

When writing in any programming language, you need to have some rules on how you are going to write things out and how you are going to name things so that everything is organized. Otherwise, you can easily get yourself or others confused when they come back at a later time and try to make sense of your code. There are lots of opinions out there, but since this is for the WordPress Meetup, check out the CSS coding standards from WordPress.org.

CSS Tools

CSS WYSIWYG Plugins for WordPress

If your website is in WordPress, there are a number of WordPress plugins that will assist you in modifying your CSS. You can use many of these tools in tandem with site builders like the Beaver Builder WYSIWYG page builder plugin. (Note: be aware that using page builder plugins can slow down your website.)

Try out CSS on your web page using the “Inspector” in Browsers

Using the “Inspector” can be a little intimidating at first. You may want to find a tutorial on just that. I just found a free tutorial on the inspector at the WCC.

Quick How-to on using the “Inspector”
  • Right-click on any webpage (specifically on the HTML element whose CSS you want to change) and then select “Inspect” (Inspector will load; in one new window you will see the HTML and in another you will see the CSS; you can click on an element in the HTML and then edit/add to the CSS that applies to it and see the changes live in the main window)
  • Download Firefox Developer Edition browser if you want to visually inspect pages coded using CSS Grid (click the little “waffle” icon)
  • NOTE ABOUT INSPECTORS: You can make changes and view them, but the CSS does not save to your web page – you have to add your new CSS to “Customizer > Additional CSS”

Other Tools

  • Codepen.io – Play with CSS, HTML and Javascript (Free for public pens/paid for private pens)
  • CanIUse.com – Go here to check to see if a CSS property is supported by all of the major browsers (check out CSS grid! The latest version of Microsoft Edge recently shipped with grid support, so all current major browsers now support it. Yea!!!)

CSS Tricks

Below are some links to a couple of Codepen pages that I created to demonstrate some interesting CSS tricks. If you sign up for a Codepen account, you can “fork” either of the pages below, save the “pen” on your own account and then play with making changes to it.

Partially Supported CSS Tricks

This last section has some tricks related to typeface display in the future. The first, “font-display,” is currently only supported in a couple of browsers. It is applied inside of the @font-face at-rule.

  • font-display: auto; (this property was created to allieviate FOIT – Flash of invisible text – “auto” is the default value) “auto” setting hides text that uses custom fonts and then displays it once the fonts finish loading
    • font-display: block; = browser puts an invisible font in place of text to hold the space; once custom font loads, then the text is displayed
    • font-display: swap; = browser uses available system fonts to display text until fonts load, then the page re-renders with the new font
    • font-display: fallback; = browser waits a short period of time – if custom font is not yet loaded, browser continues to use system fonts to display text rather than disturbing the reader with the fonts swapping and re-rendering the content
    • font-display: optional; = if custom font is not yet loaded, user gets mostly system fonts but fonts load in the background for user’s next visit to site
  • Variable Fonts – Variable fonts are going to be as exciting as CSS Grid for graphic designers (full support in all browsers is probably 2 years out). Imagine being able to load one font and then apply styles to it (bold, italic, even add serifs, etc.). To go in depth on fonts for the web, get the Webfont Handbook by Bram Stein at A Book Apart. See how variable fonts might be used in the future at Axis Praxis.

Learning CSS is a lot of fun. I encourage you to sign up for a free Codepen account and start playing with it today!