What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

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

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.

The box model and block versus inline elements

In this section, we'll review two more foundations of CSS: the box model and block versus inline elements. Fully grasping these two concepts is key in laying the ground work for CSS mastery later. First, we will review the box model and then we'll look at how that relates to block level elements. We'll follow that up with the characteristics of inline elements.

The box model

The box model defines how wide and tall elements on a page will be. To determine the horizontal space an element occupies, you add up the content + padding-left + padding-right + border-left + border-right + margin-left + margin-right:

So let's take a look at this in practice by looking at the h1 on our site, which is the blue text that says, "Old Chompy".

Here is the ruleset that makes this headline look the way it does:

h1 { 
  font-size: 40px; 
  line-height:1.4; 
  font-weight: bold; 
  color: #0072ae 
}

Let's add in the following properties to give it a width, padding, border, and margin. As well as a noticeable background-color:

h1 { 
  font-size: 40px; 
  line-height:1.4; 
  font-weight: bold; 
  color: #0072ae 
  background-color: black; 
  width: 300px; 
  padding: 50px;
  border: 10px solid blue;
  margin: 50px; 
}

Here's what our headline looks like now. One big box:

So those 5 properties that contribute to this element's box model are now in place; looking at the browser in the preceding screenshot, this h1 really looks like a box. We can see the border of 10px, the margin, which is outside the border, is 50px, and the padding, which is between the border and the text, is 50px. Then the width inside the padding is 300px. So this element's width is actually 300 + 20 + 100 + 100, which adds up to a total size of 520px. So even though we said the width is 300px by defining the width property in our CSS file, the true space this element occupies is 520px.

Now, that is the traditional box model. I can modify this traditional box model using the box-sizing property with the border-box value. So let's use the box-sizing property and see how that affects the site. Add the property and value to the bottom of the h1 declaration block, as shown here:

h1 { 
  font-size: 40px; 
  line-height:1.4; 
  font-weight: bold; 
  color: #0072ae 
  background-color: black; 
  width: 300px; 
  padding: 50px; 
  margin: 50px; 
  border: 10px solid blue;
  box-sizing: border-box;
}

As illustrated in the following screenshot, border-box will include essentially subtract the padding and border from the width and height calculation. If I use 300px as my width, the border of 20px and the padding of 100px will be subtracted from the 300px I specified. This is a more intuitive box model and it is compatible with Internet Explorer 8 and higher, as well as all other major browsers. The final horizontal space this element now occupies goes from 520px to 400px.

Block level elements versus inline elements

Let's talk a little bit about block level elements. The heading 1 (h1), heading 2 (h2), paragraphs (p), list items (li), and divs (div) are all examples of natural block level elements. Block level elements have two defining traits: they expand the full width available, and they force elements that come after them to appear on the next line, meaning they stack on top of each other. So let's remove the box-sizing property from our declaration block as well as the width property to demonstrate how they take up the full width available if no width is specified:

h1 { 
  font-size: 40px; 
  line-height:1.4; 
  font-weight: bold; 
  color: #0072ae 
  background-color: black; 
  padding: 50px; 
  margin: 50px; 
  border: 10px solid blue;
}

Save this and refresh the site. You can see in the following screenshot that, as you make your browser window larger, it takes up the full width available, apart from the margin that we set of 50px on all sides:

Now let's go into the HTML file, add two more of these h1 tags into the HTML, and save it:

<section> 
  <h1>Old Chompy</h1> 
  <h1>Old Chompy</h1> 
  <h1&gt;Old Chompy</h1>

Here's what that looks like:

Now you can see how these block level elements stack on top of each other: good ol' block level elements.

Inline elements, on the other hand, behave differently. They sit next to each other horizontally and they don't take up the full width available. They only take up as much width as they need. A few elements that are naturally inline elements are the anchor (<a>), <span>, <i>, <b>, <strong>, and <em> tags.

Alright, so let me go into the HTML and add three span tags to the page:

<section> 
  <h1>Old Chompy</h1> 
  <h1>Old Chompy</h1> 
  <h1>Old Chompy</h1> 
  <span>Inline</span> 
  <span>Inline</span> 
  <span>Inline</span>

What I'll also do is generally target those span elements in a rule set and give them a green background, just to kind of see that they're distinct:

span { 
  background-color: green; 
}

Here's how that looks:

You can notice how the green inline elements sit next to each other horizontally instead of stacking vertically. Nothing special, but we can see how they do not take up the full width available, they only take as much as they need.

There are some things that inline elements do not do. They don't respond to width or margin-top or margin-bottom. So if an element is naturally inline and you give it a width and a margin-top or margin-bottom, as shown in the following code, it's going to do absolutely nothing:

span { 
  background-color: green;
  width: 1000px;
  margin-top: 1000px; 
}

Nothing changes:

Inline elements just don't respect those properties, and those properties don't have an impact on them, so we'll remove those.

There's one last interesting thing you can do. There's a display property that allows you to change a natural block level element to inline and vice versa. So let's add a display property with the block value to our span selector and view that in the browser. So, I can just say display: block and also add some margin-top:

span { 
  background-color: green; 
  display: block; 
  margin-top: 10px; 
}

We can see that these elements now stack on top of each other and now respect the margin-top and margin-bottom values:

Elements with the display property set to block would respect any width value I give it, but it also takes up the full width available. You can see that it extends all the way to the edge of our screen. We could've just as easily used the display: inline property on our h1 selector to change the nature of the display from block to inline. Lastly though, we can use display: none, which totally hides the element from the page and is often used for various reasons. So let's go to our h1 declaration and say display: none:

h1 { 
  font-size: 40px; 
  line-height:1.4; 
  font-weight: bold; 
  color: #0072ae; 
  background-color: black; 
  padding: 50px; 
  margin: 50px; 
  border: 10px solid blue; 
  display: none; 
}

Now, if we look at our site, that h1 is invisible. It's no longer something that the browser is going to show us:

To sum up, all elements conform to a box model. The box model changes a little depending on how the box-sizing property is used, if used at all. Also, the box model changes based on whether the element is block or inline, the two most common display properties.

Key benefits

Learn CSS directly from Rich Finelli, author of the bestselling Mastering CSS training course

From best practices to deep coding, Rich Finelli shares his CSS knowledge with you

Rich Finelli covers the latest CSS updates with flexbox and works with retina devices

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 Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

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

Frequently bought together

HTML5 and CSS3: Building Responsive Websites

€73.99

€130.99

€32.99

Total € 237.97

S. A. K. Dec 15, 2017

Full disclosure that I did receive a copy of this book free of charge in order to provide a review. To help the review reader get some perspective on where I am coming to this book from, I have been in frontend development for some time, and have read through many guides, resources, and a lot of documentation for work and side projects, so while there is much I know, there are also some areas where I certainly could improve. That being said, I tried to look at this book with a few specific questions in mind and I tried to take into account others' perspectives by focusing on the following questions as I read through:1) How well does this book cover important CSS topics?2) How well are the topics explained to someone who is new?3) How would this work for someone who knows CSS, but wants a good reference for new material as devices and standards evolve?1) I chose to focus on a few sections where I feel especially knowledgeable as well as a few where I felt less so to try to answer this. One important thing to note is that Rich has done a great job of using a realistic, project-based approach to pulling CSS concepts together. If you follow through his book, you build a site alongside Rich that has many, if not all, of the major CSS properties of most projects you'll encounter in modern web development. Topics such as building for retina displays on modern devices, flexbox, CSS3 transitions and animations is crucial to today's UIs and Rich ensures he covers all of these and much more. At each stage he provides an explanation of why we're doing what we're doing, and what the impact is on the user. Consistently, he brings into play performance considerations and accessibility -- also two very important themes in web development today that one can no longer afford to overlook. I am genuinely impressed by how the breadth and depth here.2) I think one of my favorite things about Rich's writing is how accessible and friendly it is to the user. Reading/coding along you hear the author's voice and feel as though you're sitting and having Rich walk you through a process, not like you're reading some opaque documentation. I think this is great for anyone just dipping their toes into CSS, because it can be very intimidating and because technology evolves so quickly in this sphere, it can be hard to know what works in modern development. Rich does a great job of making the journey comfortable and addressing the concerns that a beginner might have, and might not know s/he should have (i.e. accessibility, responsiveness, browser considerations), without piling too much onto the user. The author is trying to teach you and preempt your questions with clear and concise explanations, not just list off standards or try to get you to memorize things. Rich works hard to make the reader connect concepts and I think he does an excellent job.3) This is probably the piece of the review that I can address most easily because it applies directly to me as a frontend dev who considers himself pretty knowledgeable and capable. I loved that I could read any section of Mastering CSS and pick up one or two new things -- sometimes small, sometimes not, but always interesting and helpful. I spend a lot of time on frontend development and I have read many articles, books, etc. -- it was really refreshing to get the depth that Rich provides, and to be able to get it delivered so concisely. His explanation of how retina displays work and how to ensure a great user experience with images that support their strengths was very clear and one of those "oh wow, that's awesome" moments for me. Those are the moments that I think most devs love to come across and there were many instances where Rich provided additional detailed knowledge that gave me those moments. Of course, I'll continue to use many different sources of documentation (some of which Rich provides in his notes on resources for the user), but this is definitely added to my repertoire.Overall I think Rich does exactly what he sets out to do here, and I think he does it well. Again, I did receive a free copy in order to write this review, but consider this my recommendation when comparing Mastering CSS to several other books and authors I've read on the topic. If you absorbed everything Rich wrote in this book, you would be able to tackle the vast majority of CSS & CSS3 concerns that frontend developers encounter.

Amazon Verified review

Pratik Jan 08, 2018

This book is suitable for beginners diving into web design. The good thing about this book is that it does not assume any prior knowledge of CSS from you. The only prerequisite is to take your time to do practice and follow along all the examples. It begins from very simple example and that same example carries through the entire book while it teaches more detailed and complex concepts gradually. Before you know, you will have a fairly good understanding of CSS3, Responsive Web Design and some of the advanced concepts such as flexbox.On the flip side, I really wish author would have added couple of appendix on different CSS selectors and CSS specificity. That would server as a reference guide to at my desk and I could refer to them as and when needed.

Christopher Allen-Poole Apr 17, 2018

There are a number of grammatical errors, some of the advice is outdated, other advice is just plain wrong. Much of the book is geared towards a novice, which might forgive some of the statements, but other statements are laughably wrong.- He calls using ID's and class names "renaming" elements. Renaming an element is changing a div to an article. What he's doing is changing the selector or specificity.- He references pseudo classes without explaining what they are (there is a vague reference to how they're used three chapters after he uses the first one).- He talks about IE7. That's not a thing anymore.- He confuses convention (calling things clearfix) with purpose (clearing CSS float property).- He advocates non-semantic CSS as a solution to the problem of non-semantic HTML- He (arguably) conflates anchors and buttons- The specificity "points" concept does not work the way he says. If you have eleven CSS classes in a selector that will not override one ID. (He does clarify this about two chapters after introducing the idea, but he's been using incorrect nomenclature the entire time.)

Mastering CSS: A guided journey through modern CSS

What do you get with Print?

Mastering CSS

CSS Foundations

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

Dissecting a rule set

External style sheets

Embedded style sheets

Inline style sheets

The box model and block versus inline elements

The box model

Block level elements versus inline elements

Summary

Page 1 of 4

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Product Details

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

Mastering CSS: A guided journey through modern CSS

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs