Setting default styling

Setting default styling will shorten your stylesheet and eliminate much potential for error. It also overcomes problems caused by the strange default behaviour of certain browsers.

Inherited values

Take advantage of inheritance to set some default values. The idea is to apply the styling to the highest-level elements in order to include as much lower level content as possible. For example, if you wanted to apply some styling to everything in the document, you could select the <html> element (which contains everything) and apply the styling to that.

The example below applies a blue colour to all the text in the document. This works because all the paragraphs, which contain the text, are ‘chldren’ of the HTML element. This styling will apply until overruled by any of the higher-precedence selectors.

The styling you apply this way will do so until overruled by any of the higher-precedence selectors.

	
html {			[parent of all elements in HTML document]
  color: blue;		[text in HTML document is blue, and children of HTML inherit this]
  }

Universal selector

For values that aren't inherited, you can use the 'universal selector'. This selector is in the form of an asterisk (*), and it selects all elements.

Two examples of non-inherited values are those for margin and padding. To set a site-wide default for margins and padding you could use the ruleset below. If this were near the top of your stylesheet, every element would have zero margin and padding on all sides, saving you the need to repeat those settings all the way through your CSS. Note how the declarations are written the shorthand way.

The same goes for borders and outlines. This is handy because it overcomes the default behaviour of some versions of Internet Explorer.

	
* {
  margin: 0 0 0 0;			 
  padding: 0 0 0 0;
  border: none;
  outline:none;	
  }

Be aware that the universal selector (*) is at the bottom of the specificity food chain, so any other selector overrides it.

Reset value sets

Not everyone thinks you should use the universal selector to set defaults. There is a school of thought (championed by Eric Meyer) that believes you should use 'reset' value sets, which apply default values to lists of elements. This is your choice.

Element type

The element-type selector, like all selectors, overrides the universal selector, and it also overrides inherited values. You can therefore use this selector to supplement and/or override those methods to create a set of defaults that applies to all instances of an element type.

In the example below you can see some styling that applies to all paragraphs. For any paragraphs that differ in some way you can use an ID or class to specify the particular aspects that you want to be different. This 'core' styling will still apply for everything else.

	
p {					[selects all paragraphs]
  color: pink;				[overrides html setting above]
  margin-left: 2em;	  		[overrides universal 'margin-left' setting]
  text-decoration: underline;  	[additional default styling]		   
  }

Images

You should include some default styling for your images, as shown below.

	
img {
  max-width:100%;				
  }

A 'max-width' setting for your images achieves two purposes:

It prevents the browser from displaying the image any larger than it is
It allows the browser to scale down the image for smaller viewports

<Previous lesson

Next lesson>