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.
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.
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 […]
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 […]
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 […]
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 […]
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, […]