Website Fundamentals: What is CSS?
Yep, it’s another geeky three letter acronym (TLA). You may feel CSS has no relevance for you. But, if you ever looked at a web page and thought “That looks nice!”, then you have CSS to thank for that.
When you look at that pretty website, the absolute minimum required to create it will be:
- An HTML file
- A Cascading Style Sheet – or CSS file
So What’s the Difference?
An HTML file is a document which contains all the elements to appear on the page. On it’s own it will look pretty dull. Beyond the order in which elements will appear on the page, an HTML file will contain few, if any, instructions as to how the entire page will look.
A CSS file will contain no content, it is set of instructions for explaining how a document should look. The colours to use, the typefaces to use, how big and how bold should the headlines be and so on …
Why Have a Separate CSS File?
Well, you can include CSS in your HTML and you can include some content in your CSS but, for most applications is a bad idea.
Consider this …
Kids, Do Not Try This at Home …
If you wrote a web page and you wanted all the headlines to be in some groovy retro typeface like Hobo or University Serif you could define it on your page like this:
<html>
<head>
</head>
<body>
<p style="font-family: Hobo;">
Kids, do not try this at home …
</p>
<p style="font-family: Hobo;">
Hobo is an ugly font.
</p>
</body>
</html>Code language: HTML, XML (xml)This code will display a couple of paragraphs – the <p> tag – and, within each, an instruction to show it in the 70’s classic display font ‘Hobo’.
You wouldn’t want to style all the paragraphs in this way for a long document – it takes extra time to type and, if you decided you didn’t like Hobo, you would have to change every single <p> tag on the page.
So you can add a rule to the <head> of your file – rules set in the head will apply to every tag that matches this rule in the document. This is CSS.
<html>
<head>
<style>
p {
font-family: Hobo;
}
</style>
</head>
<body>
<p>Look at me, still in Hobo</p>
<p>So am I.</p>
</body>
</html>Code language: HTML, XML (xml)This is fine but what if more than one person is contributing to the website? It’s unlikely everyone would remember to use the same style rules in every HTML file on the site.
It’s much easier to have a single set of rules which are just included on every page like this.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media=”screen” />
</head>
<body>
<p>Look at me, <em>still</em> in Hobo</p>
<p>So am I.</p>
</body>
</html>Code language: HTML, XML (xml)This would add the same set of rules (or style sheet) to every HTML file which references it. Every page will appear with consistent styles and appearances – the authors of the web pages do not even need to know or understand CSS, the pages will look right.
What’s more, should the website need a re-brand, only the CSS file need be changed. Every single HTML file will update itself automatically.
So What’s With the Cascading?
A rule is fine. For example, this:
a {
color: red;
}Code language: CSS (css)Will make every <a> tag (a link) on the page red.
But because HTML describes a set of entities within entities (a link is in a navigation bar which is in the masthead which is in the document), everything has a ‘context’. CSS allows you to address matching tags within that context.
For example:
header nav a {
color: #fff;
}Code language: CSS (css)This will make that link in the navigation bar in the masthead white. Whereas this:
footer a {
font-size: 80%;
color: grey;
}Code language: CSS (css)Will make all those fiddly legalese links in the foot of the page grey and small.
Put all these together in a single stylesheet
a {
color: red;
}
header nav a {
color: #fff;
}
footer a {
font-size: 80%;
color: grey;
}Code language: CSS (css)And each rule will ‘cascade’ down to each matched element in its context within the document. Copy a link from the middle of the HTML to inside the <footer> tag and it will automatically become small and grey.
Is That It?
Well Yes …
Yes that is the nuts and bolts of CSS. There are technologies which extend CSS (SASS, SCSS and so the like) but in the end what is added to your web page to make your web page look the way it does is a straight CSS file in the format displayed above.
… and No
There are a lot more properties you can define with CSS beyond colour (color) and font-size.
- CSS is vital for creating web layouts – defining the width and height of blocks and how they appear on the page.
- CSS can be vital for creating visual clues as to how to navigate a site.
Consider an innocent link like this …
It can easily get lost on a complex page. But add some CSS like this …
<style>
.go_home_man a {
text-decoration: none;
color: #000;
font-weight: 700 !important;
display: inline-block;
padding: .5em 1em;
background-color: #FF0;
border: 2px solid #000;
font-size: 240% !important;
border-radius: .5em;
box-shadow: 0 2px 5px rgba( 0,0,0,.3 ), inset 0 -2px 2px rgba( 0,0,0,.3 ), inset 0 2px 2px rgba( 255,255,255,.3 );
transition: all .5s ease;
margin: 3em 0;
text-transform: uppercase;
}
.go_home_man a:hover {
color: #FF0 !important;
background-color: #000;
}
</style>Code language: HTML, XML (xml)… and this link will instantly become a criminally ugly visual command and powerful driver for user behaviour on your site.
And There’s More
CSS can control sounds on a website – using properties like azimuth (where the sound appears to come from).
CSS can manipulate photos – for example this:
And this:
And this:
All use the same image file and just a few CSS rules – like this.
<style>
.spinning_donkey {
perspective: 500px;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.spinning_donkey > * {
width: 200px;
height: 200px;
transform: rotateZ(45deg);
animation: rotateAnimation 2s linear infinite;
}
@keyframes rotateAnimation {
0% {transform: rotateZ(0deg)}
25% {transform: rotateZ(90deg)}
50% {transform: rotateZ(180deg)}
75% {transform: rotateZ(270deg)}
100% {transform: rotateZ(360deg)}
}
</style>Code language: HTML, XML (xml)But obviously, just because you can doesn’t mean you should.
Remember kids. Don’t try this at home.