p {

color: red !important;

}

This is a bit different to anything we have seen so far, but it’s nice and easy to understand. We simply add the !important suffix to a rule in our CSS, and that ensures the rule will not be overridden. The only exception to this is where another rule, later on in the document, also has the important indicator. In this case, the usual rules apply of which one has more dominance in the cascading chain. As a general rule, it’s best to avoid using !important unless we are absolutely certain that the style should never be overridden. Developing on a CSS file where !important has been used can be problematic on large long-term projects.

The box model

If there’s one concept that underpins every aspect of CSS, it has to be the box model concept. The box model helps us to understand how our webpage renders elements, and helps us to have more control over how we can structure our webpage to achieve our desired layout. By understanding the box model, you will gain a solid foundation and understanding of how HTML is handled by the browser, which will help you on your way to becoming a professional web developer.

In its simplest form, the box model stipulates that each and every HTML element is a box. That’s right, everything, even text, is a box. While at first this might seem somewhat mysterious that an element as unruly as text can be considered a box, when we analyse the benefits we get from the fact that everything is ‘boxed’, it’s clear to see how useful it actually is. Let’s look at what we can do with these elements now that we know they are all simply boxes on a page.

A box in HTML consists of four parts, which you can use at your own will – you don’t have to make use of any of these parts, you can simply leave the content as a box and so be it, as you have seen so far, the box itself is hidden by default. So what are these four parts? Content, padding, border, margin.

I’m sure you’ve already made some assumptions around how these four parts work, but you might be surprised. Figure 4.4 provides a visual representation.

  • Content. This one is completely self-explanatory. The content is the contents of the box, the text, image, list, whatever you are trying to display, this is your content.
  • Padding. Think of padding as the gap between your content and the edge of your box. Padding is always transparent. Imagine it as a way of giving space between your content and the surrounding box.
  • Border. The line around your box, the box itself, it goes around the padding and its enclosed content and tightly wraps around your box.
  • Margin. Margin can be seen as the space around your box. Just like the padding it is transparent, only this time it is clearing space around your box and other elements, not your content.

4.4 image

As you probably expect, all of these parts can be tweaked as per your requirements. You can give a box a lot of padding and a thick border, you can give a huge margin to ensure your box sits in isolation and you can choose how your content displays with the usual properties, such as colour, etc.

Thinking of our HTML elements as boxes allows us to understand how our page fits together and how we can take control of our content and output it exactly as we wish. It’s extremely powerful.

Seeing it in action

Well done: you have just worked your way through some new and challenging, but extremely important, concepts. Having a firm grasp on these concepts is crucial to ensuring that your experience with CSS is as smooth as possible.

The good news is that we’re now finished with concepts for this chapter. From here on in it’s just a case of getting familiar with the various rules we can apply to our styles. Before we jump ahead and start playing about with the potential rules we can make use of, let’s solidify our understanding and see how we can put what we’ve learned into action.

I’m about to introduce you to your new best friend as a budding web developer. It lives inside Google Chrome and goes by the alias of the ‘inspector tool’. The inspector tool is a powerful debugging feature built into Google Chrome which allows web developers to ‘inspect’ a webpage to see a visual representation of how the page is made up. Inspector tools will show you the invisible boxes around your elements. To see it in action you must first right-click any element on a webpage and click ‘Inspect’. You will see a snapshot of the HTML code constructing the element along with the associated CSS code operating on that element. Hovering over any element in the HTML tree view will highlight that element on the page, with a representation of the box that engulfs the content too.

4.5 image

Its uses don’t stop there, though. When using inspector tools during the building phase of your webpage, instead of having to save your.html file and reload the webpage in your browser each time you want to test out a change, you can simply manipulate the CSS and HTML code direct in your browser and see it change in real time. This saves a developer an unfathomable amount of time when developing.

Why not take some time to get familiar with your new best friend? You’re going to be seeing a lot more of it in the future.

Properties

Now that we are familiar with the mechanics and syntax of CSS, it’s time to get to the exciting part that you’ve been waiting for: the magic properties that are going to be responsible for transforming your HTML from simple content into an actual design like those we see every day online. Let’s jump right in and explore the options we have for styling text.

For this section we will be looking in detail at the various properties we can use in CSS. For each property we will look at the exact term used for the property name itself and then we will break down the values, or types of values, that the property is expecting and will accept.

Text

Color

Let’s start with the example we’ve been using throughout – colours, or more specifically and importantly ‘color’. In CSS color and colour are not the same thing, and only one will actually work in the browser. When dealing with any colour-related property in web design, it will always be the Americanized ‘color’ that you will need to use. It’s just the way it is, and that’s that.

So now we know the property name ‘color’, what are the values that the property will accept? Well, we can actually specify colour in a number of ways. Let’s take a closer look.

Named colours

There are a number of specified ‘standard’ colours that we can make use of, as we’ve seen so far: red, blue, green, orange, etc. These will all render the expected colour, but you might not like the tone or shade the browser chooses for you. It’s unusual for a developer or designer to rely on the standard named colours for any aspect of a build (apart from for test purposes where the standard colours just have the purpose of being a quick colour to highlight an area of the page).

In reality, you are going to want to specify exactly what colour you want to use, and this is where HEX and RGB (or RGBA) values come into play. To the uninitiated, HEX and RBG values are text-based representations of a specific colour. For example, the HEX #000000 is black and #ffffff is white.

If you use any photo editing suite such as Photoshop, you will be able to grab the HEX or RGB value for a colour of your choosing. Feel free to do a Google search for HEX colours if you want some to use for testing purposes. This property also accepts RGBA values. RGBA values are identical to RGB values, only the A stands for the alpha channel, which allows us to set an opacity for the colour.

Let’s see some examples and move on to some other font properties we can make use of.