To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

CSS rules

CSS on its own is a set of rules that are applied to a web page that inform the browser how to render the page.

Within CSS are a collection of rules that allow even more complex things to happen than the standard rules - some rules give selectors the ability to overwrite others because they are given an even higher specificity than before due to these rules.

What these rules are

CSS has some very powerful rules that allow for specialised tools to be taken advantage of - thus they are not properties.

These rules include ones for importing other CSS stylesheets, including font faces and for developing for different screen sizes.

Import

CSS defines a rule that allows the importing of other CSS stylesheets in a very neat way.

By importing a stylesheet into another stylesheet, there are less stylesheets linked in the HTML which is in turn better for SEO (Search Engine Optimisation).

Importing CSS is also good because it can be overwritten at some point within the main CSS file.

CSS
div.doc{
	background: #ddd;
	color: #000;
}
		

The following example demonstrates overwriting the imported CSS:

CSS
@import('anothersheet.css')
div.doc{
	color: #f00;
}
		

Importing CSS is a good way of including CSS that has been shared from a content delivery network (CDN) such as Google Fonts.

Font

CSS can define 'custom fonts', that is, it can define links to fonts that the browser can download or access in order to use the website font.

It's crucial to note that different browsers have different font support, so stacking the fonts is a good idea.

A font is simply imported using the same @ symbol as shown below:

CSS
@font-face
{
	font-family: "CustomFont";
	src: "CustomFont.woff";
	src: "CustomFont.woff2";
	src: "CustomFont.ttf";
	src: "CustomFont.svg";
}
div.doc{
	font-family: CustomFont, Cambria, "Times New Roman", serif;
}
		

Specifying a font stack rather than just the individual custom font ensures backward compatibility with older versions of browsers that may still be in use (particularly Internet Explorer).

Media queries

Part 7 of this tutorial covers some responsive design aspects in more detail but as media queries (which are used for responsive design) are actually CSS rules, they are covered in minor detail here.

Media queries are ways of testing the device that is being used to display the web page for specific properties. For instance, a media query can test the width of the device, the pixel density or the device type.

To make a website work on certain devices differently, a media query surrounds the CSS:

CSS
@media only screen
{
	div.doc{
		background-color: green;
	}
}
		

This specific media query will work only on devices that have follow the screen property such as a desktop, laptop, tablet or smartphone. This means that it will not show up on a printed version of the website.

Provide feedback on this page
Comments are sent via email to me.