Playing Around With Default CSS Styles

Todays CSS tutorial is a simple yet affecting way to apply and remove default styles on a HTML document using CSS. In this post we will be looking at:

- Removing default styles from a HTML document using CSS
- Useful styles that can be set as defaults across a HTML document

Removing default styles from a HTML document using CSS

Have you ever been frustrated as to why the browsers automatically add padding, margin and borders to elements such as images and paragraphs? Suffer no more as in this post I will be showing you how to remove all default styles using a simple CSS selector.

The * selector is used to set global styles. The styles you add to the global selector will be applied to every element on your HTML page.

Useful styles that can be set as defaults across a HTML document

Below you can see how we use the global selector on our main website and how it may benefit your website.

Removing default margin and padding using CSS

To remove the default padding and margin on elements such as paragraphs and heading tags you can use the following code:

This technique allows you to control the style instead of letting the style control you

Setting your default font family

How many different fonts do you use on your page? Chances are you are using under 3. Many choose to define the font family for every selector when it can be easily assigned to all elements using the global selector.

Applying default font size

Much like font family font size is another style that is usually applied to every element individually. We prefer to simply define it on the global selector as shown below:

Removing the default border from images

Perhaps the most annoying default style is the blue border applied to images that link to another page as seen above. To remove this you could add border=”none” to every image on your website but it would take forever and produce more code than is needed. The best way to take care of this problem is to once again use your global selector as seen below.

Removing the default gray outline on images with CSS

By default most browsers show a gray border when a link is clicked or selected as shown above. Removing this couldn’t be simpler with CSS. Simply use the CSS style below on your global selector:

Popularity: 10%