What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Buy Now

CSS Foundations

In this first chapter, CSS Foundations, we're going to take a look at the fundamental concepts necessary to master CSS. You're going to learn about the best practices in web development.

In the world of web development, things change often. For instance, in the past, tables were the technique of choice when laying out a webpage. Today, using a table for layout is definitely not what you want to do. Floats have been the most common way to create a layout for a while and will be what we learn about first. In the last year or so, flexbox has started to overtake floats for layout and we’ll learn about flexbox towards the end of this book. CSS is progressing with other new layout modules that are designed to supplant floats for laying out a page. Grid layout, and CSS regions may be the way of the future. Since things rapidly evolve in the world of frontend web development, our key takeaway is that we can't stop learning CSS. In general, once you stop learning, your knowledge will becomes outdated very quickly. My intent is to teach the concepts and techniques that will benefit you for a long time.

In the two sections of this chapter, we'll review core concepts that are fundamental to web design and CSS. We'll start by reviewing how to create the most fundamental thing in CSS–the rule set-and go over the different places we can write those rule sets.

The anatomy of a rule set and the three types of style sheets

We're now a little more familiar with the content of the book and the website we're going to build. Before we start delving into more advanced topics, let's review a few CSS foundations. Going forward in this book, I'll use terms such as selector, property, and value, and you'll need to understand exactly what these terms mean in order to follow along. Here's what we'll do: we'll review a rule set first, and then we'll look at the three different places we can write those rule sets. So let's get started.

Dissecting a rule set

Let's jump into a CSS file and look at one of the rule sets in the following code block. It's targeting an h2-a level two headline. It's setting a font-size of 26px, a font-style of italic, a color to a shade of red, and a margin-bottom of 10px:

h2 { 
  font-size: 26px; 
  font-style: italic; 
  color: #eb2428; 
  margin-bottom: 10px; 
}

So nothing too scary here! Let's dissect this a little bit though:

selector { 
  property: value; 
  property: value;
  property: value;
}

In the preceding code, h2 is the selector. We are selecting an element on the page to target our style rules. The h2 selector could be a p, an li, a div, an a, or any HTML element we want to target. It can also be a class, an ID, or an element attribute, which I'll talk about later. Next, we have properties and values inside the curly braces. From the opening curly brace to the closing curly brace is the declaration block. You can have as many properties as you want inside the curly braces, or declaration block. font-size, color, font-style, and margin are just a few of the many different properties that you can use. Each property has a corresponding value. Between each property and value, you must have a colon. Following the value is a semi colon, which is also mandatory. Each property and value is called a declaration. So the declaration block is everything inside the curly braces and a declaration is a single line that includes a property and a value. But really, there are three important things to remember in the anatomy of a rule set: the selector, the property, and the value. Now let's look at where we can write these rule sets.

External style sheets

Currently, we write our rule sets in an external style sheet. You can see it's literally its own file:

In the folder structure on the left-hand side of the screen, you can see that it's in a folder called css:

Besides external style sheets, there are also inline and embedded style sheets. The external style sheet is by far the best place to write your styles; it's a separate file that is linked to each HTML page. An external style sheet can control a whole website, which is the main reason why this is the preferred type of style sheet. Anywhere in between the <head></head> tags of your index.html file; this is where you can link to your external style sheet:

<head>
  <link rel="stylesheet" href="css/style.css"> 
</head>

The href attribute points to the location of the file. Here it's pointing to the css folder and then a file called style.css. There's also a rel attribute that just basically says that this is a stylesheet. In the past, you might have seen text/css as the value for the type attribute, as shown in the following code block, but that is no longer necessary in HTML5:

<head>
  <link rel="stylesheet" href="css/style.css" type="text/css"> 
</head>

You may have also seen a closing forward slash on a self-closing tag like the link element, but in HTML5 that forward slash is no longer necessary. So including it or excluding it won't have any impact on your site.

Embedded style sheets

Instead of using the best type of style sheet, the external style sheet, we can also write our rule sets in the head of HTML documents. This is called an embedded style sheet. There are plenty of reasons for not doing it this way. The main two reasons are that it hampers the workflow, and it only controls a single page of the site. What we would do is simply create somewhere in the head tag, these open and close <style> tags:

<head>
  <style> 

  </style> 
</head>

Anywhere inside this open <style> tag we can start adding our rule sets, which will only affect this one page:

<head>
  <style> 
    h2 { 
      font-size: 50px; 
   } 
  </style> 
</head>

Again, this isn't the most preferred place to write your styles. Keeping them in an external style sheet will, 99 percent of the time, be the best place, but you do have the option of embedding styles in the head tag of your document.

Inline style sheets

Finally, the third type of style sheet is the inline style sheet. And its not really a style sheet - more like just an inline style. What we could do is write a style attribute actually inside an element in our HTML:

<h2 style="">

Inline styles are a little different from external and embedded style sheets that use the traditional rule set; here there's no selector and there's no complete rule set because you're writing it inside an HTML tag. We can enter a font-size of 10px. We write that property and value the same way we do in a rule set and we should cap it with a semicolon:

<h2 style="font-size: 10px;">

We can also change the color and cap that with a semicolon:

<h2 style="font-size: 10px; color: deeppink;">

Save this, refresh the website, and you can see the result:

This is by far the most inefficient way to write styles. However, writing CSS directly in an HTML element gives it the most weight and will overrule all embedded styles and all external styles that target the same element, unless the !important keyword is used. In Chapter 4, Creating Buttons with Modular, Reusable CSS Classes, and CSS3 in the Specificity Rules section, I dive into cascades and other factors that make certain rules weigh more and override other rules.

Okay, so we have now created a rule set and learned what each part of a rule set is called, specifically, the selector, property, and value. This information will be helpful for you to retain, as I'll use this terminology often. We also reviewed the three different places you can create a style sheet: externally, embedded within the <head> tag, and inline, directly inside of an element. Again, external style sheets are the most efficient because they can control an entire website. This is the only place I write CSS if I can help it. Next, we'll review two more core concepts: the box model and the display property.

Description

Rich Finelli trains you in CSS deep learning and shows you the techniques you need to work in the world of responsive, feature-rich web applications. Based on his bestselling Mastering CSS training video, you can now learn with Rich in this book! Rich shares with you his skills in creating advanced layouts, and the critical CSS insights you need for responsive web designs, fonts, transitions, animations, and using flexbox. Rich begins your CSS training with a review of CSS best practices, such as using a good text editor to automate your authoring and setting up a CSS baseline. You then move on to create a responsive layout making use of floats and stylable drop-down menus, with Rich guiding you toward a modular-organized approach to CSS. Your training with Rich Finelli then dives into detail about working with CSS and the best solutions to make your websites work. You'll go with him into CSS3 properties, transforms, transitions, and animations. You’ll gain his understanding of responsive web designs, web fonts, icon fonts, and the techniques used to support retina devices. Rich expands your knowledge of CSS so you can master one of the most valuable tools in modern web design.

What you will learn

[*] Master fundamental CSS concepts like the anatomy of a rule set, the box model, and the differences between block and inline elements [*] Employ flexbox to layout and align elements simply and cleanly [*] Become proficient with CSS3 properties such as transitions, transforms, gradients, and animations [*] Delve into modular, reusable, and scalable CSS for more organized and maintainable style sheets [*] Understand media queries and other pillars of responsive web design [*] Get creative with the @font-face property, Google Web Fonts, font services such as Typekit, as well as, icon fonts [*] Understand the workflow for HiDPI (retina) devices using 2x images, SVG, and the srcset attribute

What do you get with eBook?