A little bit of CSS, part two

Introduction

In last months post (www.elearningworld.org/?p=11723) I described some basic CSS. This time we’ll look at some more advanced. Again, 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.

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.

Advanced CSS

Firstly copy the markup:

<!DOCTYPE html>
<html>
    <head>
        <title>A little bit of CSS, part two</title>
        <link rel="stylesheet" type="text/css" href="advancedcss.css">
    </head>
    <body>
        <h1>CSS</h1>
        <div>
            <h2>Basic</h2>
            <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 indentifier 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>
        <div class="levels">
            <h2>Advanced</h2>
            <p>First level.</p>
            <div id=firstdiv">
                <p>Second level.<br><br>This only gets the CSS selector '<code>.levels > div > p</code>' because its parent '<code>div</code>' is a child of the class '<code>.levels</code>' and its paragraph '<code>p</code>' is a child of that.  If either of the right chevron's '<code>></code>' were removed then the 'Third level' would be selected because its '<code>div</code>' is a decentant of '<code>.levels</code>' and its paragraph '<code>p</code>' a decentant of the first '<code>div</code>' within '<code>.levels</code>', which I have identified as '<code>firstdiv</code>'.</p>
                <div>
                    <p>Third level.</p>
                </div>
            </div>
            <p data-this="that">First level continued....</p>
        </div>
    </body>
</html>

into a text editor and save it as ‘advancedcss.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;
}

div div {
    margin-left: 20px;
}

.levels > div > p {
    color: #007;
}

div:last-of-type p:nth-of-type(2) {
    text-decoration: underline #fab wavy;
}

[data-this="that"]::after {
    content: '<';
    margin-left: 4px;
}

[data-this="that"]::before {
    content: '>';
    margin-right: 4px;
}

into another text editor window and save as ‘advancedcss.css’ in the same folder as ‘advancedcss.html’. Then open ‘advancedcss.html’ in a web browser (here I am using FireFox) and you should see:

Advanced CSS

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 ‘Second level’ ‘p’ tag, then go up a level and find ‘<div id=firstdiv”>’:

Indenting with CSS

where we can see that it has the CSS:

div div {
    margin-left: 20px;
}

this means that when we have a ‘div’ followed by another ‘div’ that there will be a margin of twenty pixels. Now if we select the containing ‘div’ of ‘Third level.’ then it also gets the twenty pixel margin, but because it is within the second level then its margin from the left is effectively forty pixels:

More indenting

Going back to the ‘Second level’ paragraph we can use the ‘child combinator’ (www.w3schools.com/Css/css_combinators.asp) to select it and it alone without using an identifier or class on it:

CSS combinators

with the CSS:

.levels > div > p {
    color: #007;
}

In the browser, try removing one of the right chevrons and see what happens.

Now select ‘First level continued.…’ and we can see the effect of ‘pseudo-classes’ (www.w3schools.com/css/css_pseudo_classes.asp):

CSS pseudo-classes

with the cryptic CSS:

div:last-of-type p:nth-of-type(2) {
    text-decoration: underline #fab wavy;
}

this means select the last ‘div’ of its parent where it has a ‘p’ that is the second instance within it. This means that ‘Classes can apply to any HTML tag.’ won’t be selected as although it is the second paragraph, its containing ‘div’ is not the last ‘div’ of its container being ‘body’.

Lastly we can see the effect of ‘pseudo-elements’ (also on www.w3schools.com/css/css_pseudo_classes.asp) and ‘attribute selectors’ (www.w3schools.com/css/css_attribute_selectors.asp) on a ‘data attribute’ (www.w3schools.com/tags/att_global_data.asp) if you select ‘::before’ in the browser:

CSS pseudo-elements

then you will see the CSS:

[data-this="that"]::before {
    content: '>';
    margin-right: 4px;
}

is putting a right chevron in front of ‘First level continued.…’ with a right margin of four pixels.

Conclusion

I hope this gives you a more advanced understanding of CSS. Please do try out the examples.

Gareth Barnard
Latest posts by Gareth Barnard (see all)
blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Shoelace, and other modules such as course formats.

One thought on “A little bit of CSS, part two

  • 18th November 2020 at 6:29 pm
    Permalink

    Wow – that’s interesting – and I don’t think I would have understood it without the screenshots – very helpful !

    Reply

Add a reply or comment...

%d bloggers like this: