Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 6.3CSS rules

Part 6.3CSS 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 course covers some responsive design aspects using media queries and expands on what is covered in this particular article.

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.

Type of media being used

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

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

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

Dark and light media

There are media queries that also affect the webpage based on the users preference for a dark or light mode.

Although this is a modern feature for web browsers, operating systems themselves had it for a good few years prior to its introduction to CSS.

This media query works on whether the user's operating system has dark mode or light mode set, assuming that it supports those features. It then passes the information to the browser which can determine which 'colour scheme' to go with:

At present there are two options:

  • dark
  • light
CSS
@media (prefers-color-scheme: dark) {
	#main_doc{
		background-color: #555;
    color: #ddd;
	}
}
@media (prefers-color-scheme: light) {
	#main_doc{
		background-color: #fff;
    color: #000;
	}
}
		

Using more modern CSS features such as CSS custom properties, it is also possible to change the page very easily:

CSS
:root {
  --main-background : #fff:
  --main-color : #fff:
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-background : #555:
    --main-color : #ddd:
  }
}
#main_doc{
	background-color: var(--main-background);
  color: var(--main-color);
}
      
Feedback 👍
Comments are sent via email to me.