Exciting Web Development Journey – Pie Shop Website 2/7

Overview

Welcome back to Sharing Is The Key. Let’s continue this exciting Pie Shop website building we started in the previous post. Now we are going to learn a little bit more about CSS. Let’s go deep inside of website anatomy to get the big picture of it.

Website’s anatomy

When you look into the browser, you see a web page made up of text, images, video, and many different interactive elements. And when you see all those pieces put together in a refined way, you’re seeing the final product of a series of technologies, when they are put together in just the right way to present to you what’s called the user interface.

Now that the user interface is a web page made up of HTML, CSS, and JavaScript. Let’s break them down by speaking about the various facets of how it applies to an individual.

When you see a person often, one of the first things you notice about them is their physical appearance. That physical appearance is how you interact with people daily. And people look a lot different based on their bone structure and the clothing they want to wear each day. So if we wanted to match a person’s skeleton system to the structure contained inside their body, that’s the same thing as HTML on a web page.

As you create markup around content, you’re making a structure for the page. Now by itself, as you saw in our original example, really isn’t much to look at. It’s just pieces of information thrown on the page, so you need another layer of technology that’s responsible for what we call the style.

So that’s made possible by Cascading Style Sheets when you think about a style or, in our case, a person’s clothing.

So HTML provides the framework, the Cascading Style Sheets provide the style, or the look and feel, and eventually, no one is complete without what makes them completely special, and that’s their brain.

The brain is where the thinking, logic, and reasoning of a human occurs. And while our web pages aren’t that sophisticated, the brain is the programming, the business rules, and the logic that we build into our web applications. And this is achieved by JavaScript.

When HTML gives you structure, CSS gives you style, and JavaScript brings you interactivity; together, you have a fully functioning website.

Adding Style with Cascading Style Sheets (CSS)

Cascading Style Sheets is the technology you use to incorporate various fonts, change colours, change the scale of the elements on the website, build templates, and more. First, you’ll hear about some simple styling. We’re going to discuss what style rules are, where to put them, how cascading works, and you’re going to start talking about the selectors. So let’s go ahead and get started by opening the browser and messing with some style rules.

Style Rules

Cascading Style Sheets work by allowing you to define rules that describe how you want your elements to appear on the page. Now you can add these style rules in a couple different places, and I’ll cover the different locations in a bit. Let’s add a style section up into the head element. I can target my rules to the h1 element by adding the tag name for h1 and then the open and close curly braces. Now I can change the background colour and even the text colour. Notice how each style rule is formatted with a style property name, a colon, and then the value.

It is one way we use to create style sheets. Now you’ll see me use these colour codes in this post. The CSS colour rules accept colour information in a few different formats. Here I’m using what’s called hex code, and I’ve just memorized these values. But don’t worry, you don’t have to. If you type any colour in and then hover over that colour, Visual Studio Code opens up a colour picker to select any colour you want.

So style rules are made up of a selector, they sit inside curly braces, and then you have the rule, colon, and then value. Now, let’s talk about what’s built into the name of CSS and discuss style sheets’ cascading nature.

Cascading Rules

As the name Cascading Style Sheets, or CSS, suggests, there’s a number of different cascading rules that come into play as you build your styles. We’ll look at the different rules and how they affect the way your web page looks.

What would happen, though, if I created another rule right underneath the existing one? Again, this is for an h1, and this time we set the colour to red. Now, when I press Save, what do you think is going to happen? Is the text going to be #fff or red? Well, it turns out that it’s red. Because of style sheets’ cascading nature, whatever rule the browser encounters last as it adheres to the cascading precedents will win. Therefore, in this example, whatever selector comes later has the rule that wins. Next, we’ll look at what’s called rule specificity.

Specificity

This time I’m going to add class="headings" to the element h1. Next, within my style sheet, I can create a class‑based rule at the beginning of the style sheet that says the heading will appear black. When I save the file, the browser will read the style rule, and the Title is coloured black. It shows up as black because I’ve told the browser to colour any element, whether it’s an h1 or anything else that has the class of heading, to colour that element with black colour. Even though the .heading rule comes first and the h1 rule comes after, is because the .heading rule is more specific.

The class attribute is considered more specific on an element than its tag. Another way to think of it is that an element has its tag, and the tag name generally describes what it is and its purpose. But as you add values into the class, you’re giving more specific information about what that element is so that a class rule will win out over an element rule.

Inheritance

Some style properties are inherited, and some aren’t, and there’s no real guideline that you can follow that helps you know exactly which ones are and which ones aren’t. You have to become familiar with the style rules to understand how they work. But let me give you an example of how inheritance works. So here on my page, among other elements, I have my table and my table head thead. I can go into my style sheet and tell the table that I want to give that a background. We’ll give it a light gray background. The style property that we use for the background is background‑color. And when I save it, you can see that the table takes on a background colour. Now you notice the thead element also has a gray background. It means since thead is one of the table child, it inherits from its parent.

But I can create a new rule to override that inherited value. Now for the thead, I can make the background colour darkgray, and now my table has a lightgray background and my table head has a darkgray background. So the thead inherits the background colour of the parent until a lower‑level style is defined.

Now, as I said, not all properties inherit. For instance, a dimensional property like width. Let’s take a look at that in action. I’ve updated the page to have the header element inside the body, and inside that, I have the h1 with the text “HTML Elements”. So let’s start by making the background colour of the body a lightcyan. For my header element, we’ll change the background‑color to lightpink and give it a width of 50%. Now the header element has a different colour lightpink background, and it takes up only 50% of the page’s width.

Now let’s add a background colour lightblue to the h1 element. So before we save it and you’ll be able to see the dimensions of the h1 that’s inside the header element, do you think it will take up the same amount of space? In other words, turn the lightpink bar into lightblue? Or do you think it’ll only take up 50% of that space? Since width is not inherited, the h1 is taking up 100% of its container, which is the header element.

So if I wanted the h1 to be only 50% of its container, I would have to give it its width property. When I do that, now you can see each level of the structure of our page.

SITK-Pie-Shop-CSS-inheritance5

So inheritance is a compelling concept found in Cascading Style Sheets. Many of the styles you work with are inherited from the parent, and this is exactly what you want because this saves you from having to restate rules repeatedly that you set higher up in the chain. All right, I’ll show you next how the location of your style rules can affect how they’re applied to your page.

Location

There are several different options you have available to you to place your style sheet rules. And interestingly enough, the placement that you choose affects how they’re applied as well. One of the attributes that are available to us of an element is an attribute called style. Within the style attribute, we can add style sheet rules directly to an element. So if I wanted to make my table titles th blue, I could do that using the style attribute.

SITK - Pie Shop - Inline CSS

However, this technique is frowned upon because you lose a lot of versatility by applying styles directly to the element. There may be times when you want to do this, but more frequently than not, what you want to do is enforce the style rules on a style sheet, and that’s what you’ve seen in the examples so far.

I’ll take this style rule, and I’ll put it up into a style sheet, or essentially, within the style element. So as I remove it from the style attribute, I can come up with my style, create a selector for the th elements, and add my rule in there. When I save it, you’ll see that nothing changes because, practically, I’m taking the same rule and applying it to the th elements, but now the instructions show up in the style element with the advantage of not repeating yourself as th elements grow on the page. Now, having styles directly on your page, again, comes at the cost of a little bit of flexibility.

SITK - Pie Shop - CSS stick with style sheet

We’d often like to take our style sheet rules and place them in a separate file. It becomes important because as browsers cache files, you can load a style sheet file into your browser one time, and then each page in the website can reference that, making your website faster. There are many other compelling reasons to put your styles within an external style sheet, like maintenance and the separation of concerns pattern, so let me show you how to do that. Here I’ll take this style rule and the selector and copy it out of the style element. And now, what I’ll do is create a style sheet file, and that’s a file with the extension of .css. I can take my rules and move them into the file. If you look over at the browser, you can see that the text has turned black again.

SITK - Pie Shop - CSS in a file

And this is because, within my HTML file, there’s no reference to my style rule. So let’s go ahead and add that. Underneath the head element, I’ll add a link element. Now Emmet is here to help me out, and it automatically creates an attribute of rel="stylesheet". And now, in the href attribute, I can point to my style sheet. When I save it, my browser is referencing the style sheet, and the rules are introduced back into the page, styling all elements again.

SITK - Pie Shop - CSS link style sheet to HTML file

It is interesting what happens when you begin to mix and match styles that are found within different placements. So right now, I have a style sheet file that says my table titles are coloured blue, but what happens if I bring that style back in the HTML file and add a different colour within my style element? What if I wanted my table titles to be green instead?

SITK - Pie Shop - CSS in different places - file and style tag

Remember, we’re dealing with the same element, selector, and rule. The only difference is that the blue rule is found within the style sheet file, and the green rule is found here within the style element.

If I go down to my style attribute and add yet another colour, let’s see what happens then. Here I can add in a dark red code, and what do you think will happen when I save it? Well, that’s right. The style attribute wins because it’s more specific in scope than the rest of the rules. So hopefully, by now, you’re beginning to see how style sheet rules cascade down from the general to the specific through rules and placement on the page.

SITK - Pie Shop - CSS in different places - file and style tag and element

Selectors

Selectors are a way to locate elements on the page, and for CSS, that’s how it knows which elements to apply the style rules to. Now there are many different types of selectors. There are tags, class, ID, and attribute selectors, and so let me take you through how to use each one.

Starting with an HTML file, let’s wrap our paragraph p, anchor a and table elements into the main element to give our page a semantic approach. As mentioned previously, search engines sometimes need to crawl over the main content in your webpage. Although it has no visual effects on your webpage, it is always a good practice.

SITK- Pie Shop main element

Let’s add two sections with one subheader h2 with text “Project $”, one image img with src attribute that points to https://via.placeholder.com and one paragraph p with the text “To begin with project $ …” for each section, right below the table inside the main. Emmet will help us on this task. Type (section.project#project-$>h2{Project $}+img[src="https://via.placeholder.com/"]+p{To begin with project $ …})*2 and press tab. Let’s add “/150” at the end of the source address for the first image, and “/100” for the second one.

Notice that each section has a class set as project. So that means each one of these elements can be located and identified through the project class.

SITK - Pie Shop - CSS class selector

But each element has its own unique ID. You’ll notice that the ID attribute here is different for each one of the sections. So the first one is project‑1, and the second one is project‑2.

SITK - Pie Shop - CSS id selector

All right, now with this structure in place, let’s start writing some CSS so you can see how different selectors can target other parts of the page. So now, with all this setup, we’ll start looking at applying a style using a tag selector.

Tag Selectors

So if you recall from our earlier discussion, an element’s tag is the element’s name. So I’m going to create a style rule that targets the images on the page. Now you’ve seen these types of selectors before. We’ve used them often. Here, it is saying that any style rule that I add within these brackets will be applied to any image on the page. So here I can set a border. I’ll create a solid border of 1 pixel and make it a dark blue colour. When I save it, each one of the images on the page gets that dark blue border.

SITK - Pie Shop - CSS tag selector

Now, since this is a tag selector, any element tag that I put in the style rules will match against the corresponding element and apply those styles to any of the elements on the page. All right, well, this is great for making widespread style rules, but what if we only want to target specific parts of the page? Well, let’s take a look at class rules next.

Class Selectors

If we review the structure of the page again, you’ll notice that I have two elements on the page that each have a class attribute with the value of project for each of my section elements. Now, I want to write a CSS rule that can target each one of these elements.

SITK - Pie Shop - CSS class selector

To do that, I start with a selector that begins with a dot or period. That dot or period tells the browser that it’s looking for elements based upon the class name. So here I can type .project and open up a rule block. Now I can give my sections a border. And when I save the file, the browser updates, creating a border around each one of the sections.

SITK-Pie-Shop-CSS-a-dark-gray-color-to-the-project-class-elements

What’s valuable about class selectors is that you can apply the same class name to multiple elements. So I could have some different sections on the page, some of them might be for projects, and some may be another type. Still, by applying the project class to just the right elements, I can do that easily with a class selector when I want to create a style only for my project elements. Now, what if we need to target elements specifically by name?

ID Selectors

On my page, I have two elements that are containers for both of my projects. They each have a class project applied to them, but they also have distinct IDs. You use the id attribute when you want to identify an element on the page uniquely. You’ll often do that with elements that collect data from the user, or you might use them for containers that include distinct information on the page. Here I want to write a style rule that only applies to my section with the ID of project‑1.

SITK - Pie Shop - CSS id selector

Now, to create that selector, instead of starting with a period like I did with the class, I will start with the pound sign or the hash symbol. So this rule only matches the element with the ID of project‑1, and go ahead and give it a lightyellow background colour. Now, when I save my changes, the web page is updated to create the background colour just for that one element.

SITK - Pie Shop - CSS a lightyellow color to a specific element

Now, most of your selectors will be a combination of class, ID, and tag selectors, but there is even more power available in different selector types, so next, we’ll look at using an attribute selector.

Attribute Selectors

Thinking back to our previous conversation about different aspects of an element, if you recall, there’s the image tag, an attribute, and an attribute’s value.

SITK - Pie Shop - CSS img tag attribute and attribute value

I want to create a style rule that targets this element on the page based on source value. I’ll start making a selector that begins with a tag name. And then, to tell it that I’m targeting an attribute value, I’ll use the open and close brackets. These brackets say to the browser that the selector is looking at an image with a given attribute value. So inside those brackets, I can tell it what attribute we’re looking for, and then you put the desired value inside the quotes. So I’ll copy the image location down from the page, and I’ll paste it into the selector. And from there, I can add in a rule. So here I’ll give the image of the border. This time I’ll make it 3 pixels, and I’ll make it green. When I save it, just that image on the page is updated with the green-coloured border. It finds that image because it’s looking for an element on the page that has the tag of the image, but not just any image element. It has to be an image element with a source attribute with the value of this placeholder location.

SITK - Pie Shop - CSS attribute selector

Selector Lists

So far, I’ve shown you how to use selectors one at a time, so either a class selector, a tag selector, or even an attribute selector. Sometimes, you’ll want to target more than one element on the page to apply the same style. So to do that, you’ll use a list selector. For instance, let’s say I want all the text inside the table in italic. Well, I can do that with a list selector. I’ll create a list by adding a comma between the table head th and table data td, and then I’ll style their font italic.

SITK - Pie Shop - CSS list selectors

I can mix and match the different types of selectors as well. So let’s say I want to use a class selector with a tag selector. Here I’ll use the project class selector, and let’s say I want to give that and the table on the page a border. When you save it, you can see that the table and each of the project containers now have a border. So list styles are powerful because they allow you to apply the same styles to multiple different elements on the page.

SITK - Pie Shop - CSS list different type of selectors

All right, next, let’s look at the way that you can target children’s elements and add styles specifically for them.

Combinators

One form that your rules can take on is a child combinator rule, and that’s a fancy term that says you can create a rule that targets a specific child of a particular element. So if I wanted to select the paragraphs, but only the ones inside of elements marked with the project class would be these paragraph elements here, I can do that with a child combinator.

SITK - Pie Shop - CSS combinators

Going back up to my styles, I’ll start by targeting the project class. And then I’ll use the greater than sign, which essentially creates an arrow. So I’m saying project, and I have my arrow pointing at the element inside the element that I selected, so here I’ll say all the paragraph tags inside the elements that have a class of project. And to do that, I’ll increase the font size, and now when I save the changes, you can see that the font size is increased for the paragraphs that are inside an element that has the project class.

SITK - Pie Shop - CSS combinators - style children of particular elements

Now you even get hints of these types of selectors used in all kinds of different places. If you look up at the top of the window here in VS Code, you can see it uses that same type of selector syntax to show the parent‑child relationship between different elements within the page.

SITK - Pie Shop - a good use of hierarquical representation of elements

Display Property

Now there’s a concept within web layouts that I want you to be aware of that affects your style rules. Here I have two sections on the page that renders out a couple of children’s elements. First, let’s give them a width of 300px. By default, the section element is considered a block‑level element. What that means is that if I inspect this element and I hover over it, you’ll notice that as I’m selecting just the section element, it highlights the entire space across the browser window. So it takes up a full block of space as it’s being rendered within the browser.

SITK - Pie Shop - Display property depicted

Sometimes, we want to have an element appear in line and control over properties like width and height. Well, what we can do is we can change the style rule to read inline‑block. Now we get the best of both worlds.

SITK - Pie Shop - Display property inline-block

We have inline elements stacked next to each other, but we still have control over style properties normally associated with block‑level elements like width and height. Understanding the difference between block‑level elements, inline elements, and inline-block elements will come in handy as you build layouts for your websites.

Building Styles in Real Time

The browser is truly a fantastic piece of software. Of course, it displays web applications, and it’s our portal to the internet. And on top of that, the developer tools have so much to offer when developing websites.

I’ll come down into the body and create a single div element at the end of the main tag, and we’ll add the text Hello. I’ll save it. We can see our element show up on the page.

SITK - Pie Shop - build style in real time

Now so far, we’ve dealt with styles that I’ve pre‑prepared for you. But I want you to think about what sort of process you might go through if you wanted to add some style to this page. How would you know what selectors to use? How would you know what the colours would look like until you wrote those rules into your page, saved the changes, and brought them up into the browser? Well, when you want to work in a kind of a practical way, there’s a much easier way to do that than going through the process of thinking up a rule, saving the file, and looking at it in the browser.

I’ll right‑click on the element and choose Inspect. With the Elements tab selected, you can see that we have the HTML generated and served up in the browser. And then over here, you could see that we have a listing of styles.

SITK - Pie Shop - CSS element list of style

I can come into this window and begin adding styles and watch how it’s applied to real-time elements. Here I’ll start by adding a border, and then we’ll add some padding around it to take the content away from that border a little bit. I’ll change the background colour to light gray. I’ll set the width to 40px. Now we can align the text inside this box and center it. Let’s go ahead and change the font as well. Here, I can add a list. I’ll say Arial, Helvetica, and sans‑serif, clean fonts found in most browsers around the world. And now, what I can do is I can change how the cursor looks when you hover over it. So right now, it creates that I‑beam type of cursor. Let’s change that to be a pointer. And now, essentially, what we’ve done is created a button out of just a blank plain div element.

SITK - Pie Shop - build style in real time - hello button

In this view, I can come into these checkboxes and check and uncheck to apply or disable any one of these rules. Using this window makes it easy for you to add style rules and immediately see what they’ll look like on the page. But there’s only one problem here. If I refresh the page, we lose all these styles, and we don’t want that to happen. Now what I can do is select these styles and copy them, and now when we come back over to VS Code, I can create a new style called button, paste in those rules, and now apply that class name to my div. Now, any element with that class name gets that style, and that style was straightforward to create because I could do it in real-time in the browser.

Congratulations! You’ve now seen how you can add styles to your web pages using Cascading Style Sheets. So now, in the next post, I’ll show you how to work with Cascading Style Sheets a little more in-depth. We’ll talk about building layouts, determining browser support, and how you can validate the code that you write for your CSS rules. And the best part is when we’re done looking at layouts, we’ll return to Bethany’s Pie Shop and begin building her very first pages.

If you need any help or something is going wrong, let me know. It will be my pleasure to help you. If you want to extend some point, we have discussed, contact me so we can cover in the fllowing posts.

We also have pro bono projects just in case you are interested in learning more about them.

Be aware of why we started this project by clicking here.

Learn more about other posts here.

Contact us for any suggestions. And follow us on FacebookInstagram and Twitter.

If you are a good reader like myself, I recommend the following readings:

  • Docker Quick Start Guide: Learn Docker like a boss, and finally own your applications
  • Docker for Developers: Develop and run your application with Docker containers using DevOps tools for continuous delivery
  • Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques, 3rd Edition
  • JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language 7th Edition

See you in the next post!