A little bit of CSS, part one
Introduction
In reading some of the posts on the Moodle theme’s forum (moodle.org/mod/forum/view.php?id=46) I realise that the problems are sometimes really trivial. That with even a little knowledge of CSS and the capability to use the ‘custom CSS’ settings boxes that themes provide that users could be able to solve their own issues themselves with only a limited knowledge of CSS.
In this post I will cover the very basics and then expand on them next time with some more advanced examples. To try them out you won’t even need a web server, just a browser.
Disclaimers
Firefox® is a registered trademark of the Mozilla Foundation – www.mozilla.org/en-US/foundation/trademarks/policy/.
Ubuntu® is a registered trademark of Canonical Ltd – ubuntu.com/legal/intellectual-property-policy.
Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.
Other names / logos can be trademarks of their respective owners. Please review their website for details.
I am independent from the organisations listed above and am in no way writing for or endorsed by them.
All example ‘code’ presented is written by myself, please feel free to copy for educational purposes only.
Abbreviations
- CSS – Cascading Style Sheet
- HTML – HyperText Markup Language
Terminology
I will be using the word ‘attribute’ to describe something in HTML, this means something that is added to the opening ‘tag’ (www.w3schools.com/htmL/html_attributes.asp).
For CSS I will use the words ‘selector’ (www.w3schools.com/css/css_selectors.asp) and ‘property’ (www.w3schools.com/css/css_syntax.asp). A ‘selector’ is used to ‘select’ the HTML that you want to apply the given ‘properties’ to.
Basic CSS
Firstly copy the markup:
<!DOCTYPE html>
<html>
<head>
<title>A little bit of CSS, part one</title>
<link rel="stylesheet" type="text/css" href="basiccss.css">
</head>
<body>
<h1>Basic CSS</h1>
<div>
<p>HTML defines the structure and CSS how it is styled.</p>
<p class="aclass">Classes can apply to any HTML tag.</p>
<p id="anid">An identifier should only apply to one tag. But mistakes can happen.</p>
<p id="anotherid" class="aclass anotherclass">A tag can have an id and one or more classes. Where the last class overrides any attribute in the proceeding unless <code>!important</code> is used.</p>
</div>
</body>
</html>
into a text editor and save it as ‘basiccss.html’. Then copy the CSS:
body {
font-family: sans-serif;
}
.aclass {
color: #fab;
}
#anid {
font-weight: bold;
}
#anotherid {
font-style: italic;
}
.anotherclass {
color: #090;
font-style: oblique;
}
into another text editor window and save as ‘basiccss.css’ in the same folder as ‘basiccss.html’. Then open ‘basiccss.html’ in a web browser (here I am using FireFox) and you should see:
then we will use the web browsers developer tools to examine the page and discover what is going on. Now press ‘F12’ then in the ‘Inspector’ tab select the ‘Basic CSS’ ‘h1’ tag:
where we can see that the heading has the CSS:
body {
font-family: sans-serif;
}
applied to it because the ‘h1’ tag is within the ‘body’ tag. Now if we expand the ‘div’ and select ‘Classes can apply to any HTML tag.’ we can see how ‘aclass’ is both defined in the CSS file and used in the HTML:
where you can see that in the CSS there is a dot ‘.’ in front of ‘aclass’ and not in the markup where it is specified as ‘class=“aclass”’, so there are different ways for saying ‘this is a class’, the dot for CSS and ‘class=’ tag attribute in HTML. The same is true for identifiers, so if we now select ‘An identifier should only apply to one tag. But mistakes can happen.’ then we see how:
an identifier is applied in the same way.
So to clarify, in HTML identifiers and classes are distinguished by their tag attributes (‘id’ and ‘class’) so they don’t need a special character prefix when you use them. Unlike in CSS where to distinguish them from the tags then you need to prefix them with a hash for identifiers ‘#’ and a dot for classes ‘.’. This is an easy mistake to make.
Now if we select ‘A tag can have an id and one or more classes.’ then we see how:
the order of the classes within the CSS file itself is important to determine what properties get applied when one or more classes are used. However, an identifier will override the same property of a class even if the class is defined before it:
#anotherid {
font-style: italic;
}
.anotherclass {
color: #090;
font-style: oblique;
}
English but not English
You may think that the words in HTML and CSS are English, but they are not. They look like English, however they are defined by the syntax and rules of their own. So even though I’m British, in CSS I will still type ‘color’ for the ‘colour’ property of a selector. Keep this in mind as the computer is processing HTML and CSS not English, something that can catch you out. So think in the language you are writing not the one you use to communicate with other humans.
Conclusion
I hope this gives you a basic understanding of CSS. Please do try out the examples. Next time we will get a bit more advanced.
- Moodle 4 Security – A Review – 16th April 2024
- A little bit #fab – 16th March 2024
- Static framework – 16th February 2024
Pingback: A little bit of CSS, part two - ElearningWorld.org
Nice post Gareth !
Most of this makes sense to me, and there are a couple of very useful explanations – things I ‘sort of’ knew, but now I understand a little more 🙂