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 has to be another way. It turns out, there actually is another way. By using the [style] parameter with your selectors in your CSS stylesheets, you can completely override any inline styling that might be in your HTML.

Let’s say that you have this inline styling on a div:

<div class="myDiv" style="border: 1px solid #000"></div>

If you tried to override this in your CSS by just writing a new style for it like below, it probably wouldn’t work, even if you used the sometimes frowned-upon !important.

border: none;

However, if you pair your .myDiv selector with a [style] bracket and use the !important value, you can override that pesky inline styling fairly easily:

border: none !important;

While this might not be considered the best practice way of doing things, there are many cases where it would be the easiest and quickest way to get rid of unwanted inline styling, and as a developer it’s definitely worth taking advantage of.

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...

How to Style Mandatory Fields with CSS3 Pseudo-Selectors

Screen Shot 2016-08-14 at 3.42.04 PM

It’s not uncommon for mandatory fields in a form to be marked as such — often these fields are marked with an asterisk or with a colored border around the input so that the user is aware that the particular form can’t be submitted without the required fields being filled out. With CSS3’s pseudo-selector :required, […]

Read on...