5 Tips on How to Use CSS in Web Development

In a very brief nutshell, if HTML is what you use to make a website say what you want it to say, CSS is what you use to make a website look how you want it to look. If you need a visual: HTML is a stick figure, CSS styles the stick figure in a nice jacket and jeans and teaches it to pose.

You can style your fonts, change the page layout, and even add animations.

We’re not saying CSS is used just to make your website look pretty – though that doesn’t hurt. Still, what you are aiming for is creating a great experience for the end user. A website that is easy to navigate, easy to read and easy to understand. That CSS can make it look awesome is the cherry on top.

CSS3 is the latest and greatest CSS iteration, and its properties are supported by all major browsers. If Internet Explorer can do it, so can you! Let’s look at some tips on how to use CSS in web development.

1. Reset or normalize default browser styles

Every browser has its own default styles that make sure that whatever you put together in HTML isn’t just one long, endless mass of words. So even if you did nothing else but HTML, your website would have headings, formatted links, and it would apply things like lists and paragraph padding.

CSS is used on top of browser defaults. The problem is that the browser defaults can get in the way of your CSS, especially since the defaults aren’t the same in all the browsers. Plus, they can change over time and mess up a website that originally looked ok.

What you want to do is resetting or normalizing the default browser styles so they don’t interfere with your cool CSS ideas.

• A reset file takes the slash and burn approach, setting all defaults to a baseline. You should still tweak it in a way that suits your project, but you will basically be starting with a clean slate.
• Normalizing is less extreme in that it makes the defaults consistent across browsers without trying to completely erase them.

2. Learn the Box Model

Don’t make the mistake of learning how to use CSS through a framework. In short, you’ll be learning that particular framework, not how to use CSS. If you ever need to not use the framework, and trust us, that will happen sooner or later, you will be miserable trying to catch up on learning things your thought you already knew.

Instead, learn the box model. It puts each HTML element into a box that represents the size, border, margin and padding. The browser will then use the box to determine how the element should appear on the website. Everything in CSS related to layout and position is influenced by the box model.

You’ll have more control over your creativity and you’ll actually learn how to use CSS, not just how to fake it with a framework.

3. Use a cheat sheet

CSS can be an amazing web development tool or a huge pain in the you-know-where. It’s easy to grasp but you have to put in the work to really master it. The properties interact, you need to learn the syntax, you never know exactly how each browser is going to wake up in the morning and decide to implement your positioning directives, etc.

Enter cheat sheets. You used them in school, you might as well use them now. They can help you remember what is available in CSS and guide you until you are a pro. There are many cheat sheets out there, just give Google a shout and it’ll provide. Why memorize all the CSS elements and latest standards if you don’t have to. Once you really know how to use CSS, you can just throw your cheat sheet away. Or write your own!

4. Use Firefox for de-bugging

Sometimes you’ll be scratching your head when the CSS you’ve just written gives you different results than you were hoping for. If your layout is bonkers, you will need to head over to DevTools and see what the problem might be.

Much better than Chrome in the de-bugging department, Firefox is top notch and intuitive. It not only breaks down the box model when inspecting an element, but you can also edit box properties on it directly. It also shows you all the properties that are influencing the box you are currently looking at and gives you annotations in the HTML that can let you know e.g. if one element is causing another to overflow. The graphics for flex and grid layout are also pretty nice and easy to use.

5. Complement the testing process with a feedback tool

No web development project is complete without a testing phase. And we know of no better bug reporting tool than Ybug.

The Ybug widget or extension allows any dev or tester to capture bugs at the click of a mouse. Include a screenshot, a comment, draw an arrow to whatever appears out of whack. Just like that it’ll be sent to you (or your PM or whoever is deemed appropriate) with information about the browser, screen, OS and more. Testing made easy.

Ybug integrates with many bug tracker or project management tools, so you don’t need to check any extra software separately. It can seamlessly become part of your existing process. Why do it the hard way when you can use something to make your life easier?