Using CSS’s Background Property

CSS’s background property actually covers a whole lot of other properties, meaning that the background property is actually sort of all-inclusive and will take up to 8 values. The background property shorthand covers the background-color (for when you want to define a color as the background of an element), background-image (for when you want to use an image as the background of an element), background-repeat (do you want the background image to repeat vertically or horizontally?), background-attachment (how do you want the background to be positioned in regards to the viewport?), background-position (where do you want your background to be positioned in regards to the surrounding elements?), background-origin (yet another positioning property), and background-clip (to specify the content limit of the background). Check out the syntax and the order of the properties in the example below to learn how to use the property for yourself. All of the properties included in the background shorthand can be defined on their own, but your code will look a lot cleaner if you just use the shorthand:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip];

How to Override Inline CSS Styles

One of the most frustrating aspects of working with old code is the inline styling that can’t be overridden with CSS. Usually, this means spending a significant amount of time combing through old (hopefully not unorganized) code to manually delete the inline styling, all the while the developer is thinking to him or herself, there […]

Read on...

Using @Supports to Compensate for Older Browsers

Here’s a neat little trick you don’t often hear about: did you know there’s a really simple way to compensate for older browsers that might not support CSS properties like flex-box or transitions? All you have to do is wrap the CSS rules that you think or know may not be supported by older versions of […]

Read on...

Using Min-Width and Max-Width in Your CSS

When you’re writing media queries to ensure that your designs are mobile-friendly and fully responsive, there’s a good chance that you’re defining your widths in percentages rather than other fixed units of measurements (pixels, ems, rems, etc). When you define the widths of your elements in percentages, your elements change size based on the size […]

Read on...

Using CSS to Create Triangles

Screen Shot 2016-09-09 at 8.04.01 PM

With CSS it’s super easy to create shapes out of pretty much any div. Some shapes are pretty straightforward to code, like squares and rectangles. Even circles are just squared with a border-radius set to 100%. Triangles, however, are a little more complicated to create. In order to make them, you have to manipulate the […]

Read on...

Color Values: How to Define a Color in CSS

There are many different scenarios in which you’d have to define a color in your CSS — this probably most commonly happens with the color or background-color property, but it’s certainly used with others as well. Defining your color values is the easy part, but deciding how to do so can sometimes be tricky, because there are so […]

Read on...

How to Style Your Cursor with CSS3

There are so many different ways to style your cursor using CSS3. Most developers probably know about cursor: pointer, but what about the dozens of other ways to have your cursor appear? What follows is a list of some of the most useful cursor styles. Combine them with the :hover pseudo-selector for your styling to take […]

Read on...

How to Use CSS3’s Viewport Units

CSS3 has a really cool (and completely underrated) feature that allows developers to define the size of an element relative to the viewport. The units are vh (viewport height) and vw (viewport width), and they can be applied to elements like width, height, font-size, margin…basically anything that you might normally define with a px or […]

Read on...

Top Tools to Debug Your CSS

Screen Shot 2016-08-22 at 7.31.59 PM

Writing CSS is so much easier when you have access to a debugger or a CSS validator. These tools allow you to identify and fix anything that might be wrong with your code, and many of the developer tools also let you edit the content of a live site, which provides invaluable support during a […]

Read on...

Using CSS to Create a Fixed Header

Fixed headers are a popular trend in web design, and adding one to your site can be as easy as adding a position: fixed line to your CSS, but often it’s a little more complicated than that. Some other styling factors you’ll need to consider are top, width, and z-index. It’s important that you set […]

Read on...