CSS Tips & Tricks - General Use

Thu Apr 5, 2018

What is CSS?

CSS stands for Cascading Style Sheets. It defines how the HTML elements on your website will look. The first word, cascading, helps us understand how the CSS is applied. The CSS files are read by your browser like a “cascading” waterfall - from top to bottom - meaning that items at the bottom of the CSS file are more important than the ones at the top. Because CSS can cascade, browsers can often times interpret the styles differently, so you may often need some styles that are just specific to certain browsers.

Why should I use a CSS file instead of inline styles for my website?

Having a CSS file referenced by each of your templates is a better option than having inline CSS for a few different reasons.

  1. You can change the look and feel of your entire website by just changing a single CSS file

  2. All of your pages will have the same fonts, colors, sizes, etc. if they are referencing the same CSS file rather than having specific styles applied to them for different inline elements

  3. Unlike inline styles, you can apply different styles to different media-types (screen, print, tablet, mobile, etc.) 

How do I reference a CSS file?

<link rel="stylesheet" type="text/css" href="mystyle.css">

In Percussion CM1, under ‘Actions’ on your template editor, click on ‘Edit Metadata’. From there, expand the link that says ‘Additional Code’ and insert the following at the bottom of your ‘Additional Head Code’ area.


Where it says “mystyle.css”, replace that with the location of your CSS file.

A CSS file, or stylesheet, can be written in any text editor like Notepad, or something as advanced as Adobe Dreamweaver. It just must be saved with a .css extension at the end so that the browser knows what type of file it is. 

What is a media query?

Media queries are a must for responsive design. Media queries allow you to apply different styles to specific screen/device sizes.  For example, if you want to make all images have 100% width on any screen/device size that is 1024px or smaller, you would write:

@media screen and (max-width: 1024px) {
img { width: 100%; }

The bolded text above is the media query. It just wraps around any styles in the CSS file that you want to target only for that specific screen/device size. 

What are pseudo-classes?

A pseudo-class is used to call out a specific state of an HTML element. For example, you can write CSS to apply to only images when they are hovered over by writing: img:hover. Or, you can target the 3rd child image by typing: img:nth-child(3). There are lots of different pseudo-classes out there to use - some examples of my most commonly used pseudo-classes are below.

  • a:link - unvisited link

  • a:visited - visited link

  • a:active - selected link

  • :hover - apply style only when item is moused over (can be used with most elements, not just a)

  • :first-child - targets the first child element

  • :last-child - targets the last child element

  • :nth-child(2) - target a specific child element (typing 2 in the parentheses selects the 2nd child)

  • ::after - insert content after an element

  • ::before - insert content before an element

  • ::first-letter - select the first letter of an element

  • ::first-line - select the first line of an element

For more information on different CSS styles - check out http://www.w3schools.com/css/

Casey Aiello
Casey Aiello
Professional Services Manager | Web Consultant/Designer | Percussion Software

Along with being a Consultant, Casey is also the Professional Services Team Lead at Percussion and our in-house designer. She has a strong background in responsive web design and development. Casey knew that she wanted to work in the tech field ever since she was in elementary school. That strong passion led her to be a volunteer and strong advocate of various organizations that work to get more young women involved and excited about science and technology careers. In her free time, Casey enjoys spending time relaxing with family and friends.