Understanding CSS specificity will help you understand how rules are applied to the elements on your page and allow you greater control over how your page is styled.

Contents

1. Getting Specific
2. Calculating Specificity
3. Rules for Creating Specific Selectors
4. Final Words
5. References

Getting Specific

You’ve seen that you can apply multiple styles to an HTML element like this:

<p id="first" class="important box">

And you can create individual styles for various elements on the page:

p {
  background-color: aliceblue;
}

#first {
  background-color: darkgray;
  color: yellow;
}

.important {
  font-size: 24px;
  background-color: red;
  color: black;
  border: 2px solid black;
}

.box {
  border: 1px solid black;
}

A number of rules style the same CSS properties – background-color and color – and final result depends on:

1. the priority (or significance) of the selectors
2. for selectors with the same priority, the last defined property takes priority.

Which means that the final style rule looks like this

{
  /* ID styles have highest priority */
  background-color: darkgray;
  color: yellow;
  /* font-size is only specified in .important,
     so it is applied */
  font-size: 24px;
  /* border in .box is defined after border was
     defined in .important, so it gets applied */
  border: 1px solid black;
}

This can seem haphazard and you might like to have better control over your CSS style rules – especially if later declarations can override earlier declarations.

We can overcome this by being more specific with our styling rules:

/*
  Apply this style to any element which has
  id="first" AND class="important"
*/
#first.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

We can get even more specific with the following:

/*
  Apply this style to any <p> element which has
  id="first" AND class="important"
*/
p#first.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

However, if you created the following rule:

/*
  Apply this style to any <p> element which has
  a class="important"
*/
p.important {
  font-size: 24px;
  background-color: red;
  color: black;
}

And you applied it to the following code:

<p id="first" class="important box">

You would find that the styles of #first would take priority over the styles in p.important despite p.important appearing to be more specific – after all, it specifies two selectors (<element> and .class) over the single ID selector.

This is because the significance of a rule depends on the specificity of the selector. CSS specificity is calculated using a few straightforward rules.

Calculating Specificity

Specificity is calculated as a string of three values¹. Many resources and tutorials show it as a single number like 000 or 130. Some tutorials show it in the form 0-0-0 or 1-3-0 – which is a better representation. I will use the following representation: 0:0:0 or 1:3:0.

The specificity number indicates the total counts of various basic selectors. The universal selector always has a specificity of 0:0:0 – so any selector with a higher specificity will trump it. As with normal numbers, the leftmost digits are more significant than the rightmost digits. Consider the ranking of the following specificities:

• 0:0:1 > 0:0:0
• 0:2:0 > 0:1:0
• 0:2:1 > 0:1:6
• 0:2:5 > 0:2:4
• 1:2:3 > 0:12:7

The specificity number is calculated as the total number of CSS specifiers used for that style rule. The totals are arranged in the following manner:

Consider the specificity of the following selectors:

* {
  /* specificity = 0:0:0 */  
}

p {
  /* specificity = 0:0:1 */  
}

.class {
  /* specificity = 0:1:0 */  
}

[attribute] {
  /* specificity = 0:1:0 */    
}

#id {
  /* specificity = 1:0:0 */  
}

p.class {
  /* specificity = 0:1:1 */
}

ol[reversed] {
  /* specificity = 0:1:1 */
}

p#id.class {
  /* specificity = 1:1:1 */
}

p#id.class[attribute] {
  /* specificity = 1:2:1 */
}

#id[attribute] {
  /* specificity = 1:1:0 */
}

.class[attribute] {
  /* specificity = 0:2:0 */
}

/*
  it looks strange, but this is valid CSS
  you can repeat the same selector over and
  over to increase its specificity.

  It does not work for <elements>, i.e. you
  can not do ppp to increase the specificity
  for <p> tags.
*/
.class.class.class.class {
  /* specificity = 0:4:0 */
}

In each case, you simply add up the total number of basic selectors, put them in the correct location and compare.

Rules for Creating Specific Selectors

1. If you specify an HTML element, then it must be at the beginning of the selector. i.e.: p[attribute] not [attribute]p.
2. There can be a maximum of 1 HTML element in a specific selector. i.e.: p.class or ul[reversed], but not pspan.class.
3. There can be a maximum of 1 #ID in a selector. This is because an element can have at most 1 #ID.
4. The order of .class, [attribute], or #ID doesn’t matter. i.e.: #ID.class is equivalent to .class#ID.
5. .class, [attribute], and #ID selectors may be repeated to increase their specificity. i.e.: .class has a specificity of 0:1:0, but .class.class has a specificity of 0:2:0.
6. You cannot repeat HTML elements. i.e.: pppp or ulul have no meaning and will be ignored by the browser.
7. All selectors are written together without spaces between them. i.e.: p.class is not the same as p .class and #id[attribute] is not the same as #id [attribute].²

Final Words

1. You can be very specific about which HTML element to style on a page by stringing together various selectors associated with that element:

   /*
     select <ul> elements which contain the
     reversed attribute
   
     specificity = 0:1:1
   */
   ul[reversed] {
   
   }
   
   /*
     select <ul> elements which contain the
     reversed attribute AND have a class of
     .class1
   
     specificity = 0:2:1
   */
   ul[reversed].class1 {
   
   }

2. Specificity is calculated by summing and arranging the total number of basic specifiers in each of the following groups:
   

   IDs

   .classes and [attributes]

   <elements>

3. In deciding which styling rule to apply, the rule with the higher specificity is applied.
4. If two rules have the same specificity then the last rule defined is applied.
5. The universal selector always has a specificity of 0:0:0.

6. There are no spaces between the selectors – it is written as one long expression.

References

1. CSS Selectors

The post CSS Specificity – Advanced CSS Selectors – Part 2 appeared first on Complete, Concrete, Concise.

We’ve seen 5 different ways to select page elements for styling. Over the next few tutorials we will add more than 50 advanced CSS selectors for targeting HTML elements for styling.

Contents

1. A Quick Recap and Introduction
2. Updated Clone Page Code
3. Final Words
4. References

A Quick Recap and Introduction

You have seen how to style HTML elements using the following selectors:

/*
  This styling will be applied to all elements on
  the page unless another style overrides it.
*/
* {
  box-sizing: border-box;
}

/*
  This styling will be applied to all <p> elements
  on the page unless overridden by a style applied
  via a .class, [attribute], or #ID
*/
p {
  color: black;
  background-color: white;
}

/*
  This styling will be applied to all elements
  with this class.

  It can be overridden by other classes or [attributes]
  that are applied to the element, but only if they are
  defined after this one.

  An #ID style will always override this style.
*/
.myStyle {
  color: blue;
  background: yellow;
}

/*
This styling will be applied to all elements
matching this attribute.

It can be overridden by other classes or [attributes]
that are applied to the element, but only if they are
defined after this one.

An #ID style will always override this style.
*/
[reversed] {
  color: white;
  background-color: black;
}

/*
  This styling will be applied to the element
  with this ID. Remember: each ID must be
  unique on the page and an element can have a
  maximum of 1 ID.

  This styling overrides any other styling
  applied to the element.
*/

#myID {
  font-size: 24px;
  color: black;
  background-color: orange;
}

This sort of styling is very direct: you explicitly specify the element you want styled and rely on inheritance to pass styles from parent to child elements.

This direct form of styling does have shortcomings – if we want to style part of the page differently, we have to explicitly create new styles for that (likely using classes) and apply them to the elements we want styled. This creates a multiplicity of style rules than can quickly become unwieldy.¹ As well, if you apply multiple styles (via classes) then the order in which the styles were defined matters.

Let’s consider the clone page created earlier: one of the things used was a card pattern for the articles on the page:

<div class="card">
  <div class="image">
    <img src="">
  </div>
  <div class="headline">

  </div>
  <div class="timestamp">🕔 2 Hours</div>
</div>

This worked fine, except that instead of using a generic class of .headline, specific headline classes were used depending on which column the card was located: .headline-small, .headline-large, and .headline-medium.

This makes moving cards from one column to another complicated because styling information (rather than content information) is embedded in the class. Moving a card requires the class be updated because its location changed.

CSS allows you to apply styles based on the context your content appears in. Consider:

/*
apply the following style to elements
with the class .headline that are
immediate children of elements with the
class .card that are immediate children
of elements with the class .left-column
*/
.column-left > .card > .headline {

}

/*
apply the following style to elements
with the class .headline if their parent
element has class .card and their
grandparent has class .middle-column
*/
.column-middle > .card > .headline {
  font-size: 32px;
}

/*
apply the following style to elements
with the class .headline only if it is
nested exactly as follows:
  class=“right-column”
      class=“card”
          class=“headline”
*/
.column-right > .card > .headline {
  font-size: 24px;
}

If you replace the .headline-small, .headline-large, and .headline-medium. style definitions in the clone page with the above code and replace their use in the HTML with .headline, you will notice everything still works correctly.

Updated Clone Page Code

You can see how the updated clone page looks here and you can see how the original clone page looks here. You can also inspect the page source code using the view source tool you learned about here or inspect the updated source code below:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Clone Page</title>
    <meta charset="utf-8"  />

    <style>

      * {
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 16px;
      }

      img {
        width: 100%;
      }

      #wrapper {
        width: 960px;
        margin: auto;
      }

      #title {
        background-color: white;
        color: black;
        padding: 8px;
      }

      #site-name {
        font-size: 32px;
        font-weight: bold;
      }

      #login {
        color: grey;
        padding-top: 8px;
        float: right;
      }

      #search {
        color: grey;
        float: right;
        padding-top: 18px;
        padding-right: 16px;
        font-size: 24px;
      }

      #navbar {
        background-color: #333333;
        color: white;
        border-bottom: 2px solid grey;
      }

      #darkbox {
        background-color: #333333;
        height: 100px;
      }

      #content {
        margin-top: -90px;
      }

      #popular {
        color: white;
        padding-left: 16px;
        font-weight: bold;
      }

      #footer {
        text-align: center;
        padding: 24px;
        background: #333333;
        color: white;
        font-size: 20px;
      }

      .nav-item {
        display: inline-block;
        padding: 24px 16px;
      }

      .column-left {
        width: 20%;
        float: left;
      }

      .column-middle {
        width: 55%;
        float: left;
        border-left: 2px solid grey;
        border-right: 2px solid grey;
      }

      .column-right {
        width: 25%;
        float: left;
      }

      .clearfix::after {
        clear: both;
        display: block;
        content: "";
      }

      .card {
        padding: 0 16px 16px 16px;
      }

      .image {

      }

      /*
      Use the more specific styling selectors
      that select HTML elements based on their
      class AND placement in the page.
      */
      .column-left > .card > .headline {

      }

      .column-middle > .card > .headline {
        font-size: 32px;
      }

      .column-right > .card > .headline {
        font-size: 24px;
      }

      .timestamp {
        padding-top: 8px;
        color: gray;
        font-size: 12px;
      }

    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="title">
        <span id="site-name">clonage</span>
        <span id="login" class="clearfix">Login</span>
      </div>
      <div id="navbar">
        <span class=nav-item>Gear</span>
        <span class=nav-item>Gaming</span>
        <span class=nav-item>Entertainment</span>
        <span class=nav-item>Tomorrow</span>
        <span class=nav-item>Video</span>
        <span class=nav-item>Reviews</span>
        <span class=nav-item>Events</span>
        <span class=nav-item>Local Edition</span>
        <span id="search" class="clearfix">⌕</span>
      </div>
      <div id="darkbox"></div>
      <div id="content" class="clearfix">
        <!--
        Update all the .headline-small,
        .headline-large, and .headline-medium
        class tags to the .headline class.
        -->
        <div class="column-left">
          <p id="popular">Popular Now</p>
          <div class="card">
            <div class="image">
              <img src="32-small-1.jpg">
            </div>
            <div class="headline">
              Foods that boost your learning
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-2.jpg">
            </div>
            <div class="headline">
              Robot arms may be the next
              technological frontier
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-3.jpg">
            </div>
            <div class="headline">
              Is virtual reality going to far?
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-4.jpg">
            </div>
            <div class="headline">
              The latest trends in cosplay
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>

        </div>
        <div class="column-middle">
          <div class="card">
            <div class="image">
              <img src="32-big-1.jpg">
            </div>
            <div class="headline">
              Before you buy, check our review of the
              hottest cars on the market
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-big-2.jpg">
            </div>
            <div class="headline">
              Health benefits of fresh fruits
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
        </div>
        <div class="column-right">
          <div class="card">
            <div class="image">
              <img src="32-medium-1.jpg">
            </div>
            <div class="headline">
              The best places to visit on Jupiter
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-medium-2.jpg">
            </div>
            <div class="headline">
              The latest smart watches monitor your
              body's vitals while looking stylish
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-medium-3.jpg">
            </div>
            <div class="headline">
              Keeping yourself safe while shopping online
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
        </div>
      </div>
      <div id="footer">Copyright 2018</div>
    </div>

  </body>
</html>

Final Words

You’ve received a brief introduction to one advanced CSS selector known as a combinator. This combinator (denoted with the symbol ‘>’) specifies an explicit parent-child relationship for the selection.

The next few tutorials will cover in more detail the various combinators, pseudo-classes, and pseudo-elements that can be used for advanced CSS selection of HTML elements (there are more than 50 of them).

References

1. CSS Selectors

The post Advanced CSS Selectors – Part 1 appeared first on Complete, Concrete, Concise.

You’ve implicitly encountered inheritance and default values while working with CSS.

Contents

1. Inheritance
2. Default Values
3. Table of Inheritance and Default Values
4. The ‘inherit’ Value
5. The ‘default’ Value
6. Final Words
7. References

Inheritance

When working with CSS, you probably noticed that styling like this:

.important {
  font-size: 32px;
}

When applied to HTML like this:

<div class="important">
  <p>This is important!</p>
</div>

Results in output that looks like this:

This is because the p element inherits the font-size property applied to its parent div.

Not all properties are inherited by child elements.

Consider the following CSS:

.important {
  border: 1px red solid;
}

When applied to the following HTML:

<div class="important">
  <p>This is important!</p>
</div>

Results in the border only applied to the div element and not the p element:

If the p tag inherited the border property from the parent div tag, it would have looked like this:

Which is, probably, not what you want.

Default Values

When you write some HTML like:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

You see Hello World! displayed in the browser.

It is very likely that the font will be serif or sans serif, it will be 16px in size, the text will be black on a white background, and there is no border – and you didn’t have to style anything.

This is because every CSS property has a default value. The default value may be changed through inheritance or when you explicitly set the value.

Table of Inheritance and Default Values

The following table shows which CSS properties (that we’ve seen) are inherited by child elements from their parents.

It also shows the default values for those CSS properties.

The ‘inherit’ Value

You can force a child element to inherit its parent’s property by using the CSS value inherit:

.important {
  border: 1px red solid;
}

.what-will-this-do {
  border: inherit;
}

When applied to the following HTML:

<div class="important">
  <p class="what-will-this-do">This is important!</p>
</div>

Will cause the child element to inherit the parent’s border property:

The ‘default’ Value

If you want to reset an element’s property to its default value, you can use the CSS value initial¹⁵.

Consider the following styling:

p {
  color: red;  
}
.default {
  color: initial;
}

When applied to the following code:

<p >This is some styled text!</p>
<p class="default">This is some default styled text</p>

Results in the following:¹⁶

Final Words

Child elements may inherit CSS values from their parents – it depends on the specific CSS property.

All HTML elements have default styles applied to them. Some of these styles are determined by browser settings, others from the CSS specification.

References

1. CSS Default Properties
2. CSS Inheritance
3. Firefox’s Default Style Settings
4. Chrome’s Default Style Settings

The post CSS – Understanding Inheritance and Default Values appeared first on Complete, Concrete, Concise.

A detailed walk through the code.

Contents

1. The Final Page
2. Source Code
3. Detailed Code Walkthrough
   1. Setting Some Page Level Defaults
   2. The Highest Level Structure
   3. The Wrapper
   4. The Title
   5. The Navigation Bar
   6. The Dark Box
   7. The Content
   8. The column-left
   9. The column-middle
   10. The column-right
   11. The card
   12. The footer
4. Final Thoughts
5. Image Credits

The Final Page

You can see the finished page here.

It is best viewed in a browser window that is 960px wide or larger.

Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Clone Page</title>
    <meta charset="utf-8"  />

    <style>

      * {
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 16px;
      }

      img {
        width: 100%;
      }

      #wrapper {
        width: 960px;
        margin: auto;
      }

      #title {
        background-color: white;
        color: black;
        padding: 8px;
      }

      #site-name {
        font-size: 32px;
        font-weight: bold;
      }

      #login {
        color: grey;
        padding-top: 8px;
        float: right;
      }

      #search {
        color: grey;
        float: right;
        padding-top: 18px;
        padding-right: 16px;
        font-size: 24px;
      }

      #navbar {
        background-color: #333333;
        color: white;
        border-bottom: 2px solid grey;
      }

      #darkbox {
        background-color: #333333;
        height: 100px;
      }

      #content {
        margin-top: -90px;
      }

      #popular {
        color: white;
        padding-left: 16px;
        font-weight: bold;
      }

      #footer {
        text-align: center;
        padding: 24px;
        background: #333333;
        color: white;
        font-size: 20px;
      }

      .nav-item {
        display: inline-block;
        padding: 24px 16px;
      }

      .column-left {
        width: 20%;
        float: left;
      }

      .column-middle {
        width: 55%;
        float: left;
        border-left: 2px solid grey;
        border-right: 2px solid grey;
      }

      .column-right {
        width: 25%;
        float: left;
      }

      .clearfix::after {
        clear: both;
        display: block;
        content: "";
      }

      .card {
        padding: 0 16px 16px 16px;
      }

      .image {

      }

      .headline-small {

      }

      .headline-medium {
        font-size: 24px;
      }

      .headline-large {
        font-size: 32px;
      }

      .timestamp {
        padding-top: 8px;
        color: gray;
        font-size: 12px;
      }

    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="title">
        <span id="site-name">clonage</span>
        <span id="login" class="clearfix">Login</span>
      </div>
      <div id="navbar">
        <span class=nav-item>Gear</span>
        <span class=nav-item>Gaming</span>
        <span class=nav-item>Entertainment</span>
        <span class=nav-item>Tomorrow</span>
        <span class=nav-item>Video</span>
        <span class=nav-item>Reviews</span>
        <span class=nav-item>Events</span>
        <span class=nav-item>Local Edition</span>
        <span id="search" class="clearfix">⌕</span>
      </div>
      <div id="darkbox"></div>
      <div id="content" class="clearfix">
        <div class="column-left">
          <p id="popular">Popular Now</p>
          <div class="card">
            <div class="image">
              <img src="32-small-1.jpg">
            </div>
            <div class="headline-small">
              Foods that boost your learning
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-2.jpg">
            </div>
            <div class="headline-small">
              Robot arms may be the next
              technological frontier
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-3.jpg">
            </div>
            <div class="headline-small">
              Is virtual reality going to far?
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-small-4.jpg">
            </div>
            <div class="headline-small">
              The latest trends in cosplay
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>

        </div>
        <div class="column-middle">
          <div class="card">
            <div class="image">
              <img src="32-big-1.jpg">
            </div>
            <div class="headline-large">
              Before you buy, check our review of the
              hottest cars on the market
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-big-2.jpg">
            </div>
            <div class="headline-large">
              Health benefits of fresh fruits
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
        </div>
        <div class="column-right">
          <div class="card">
            <div class="image">
              <img src="32-medium-1.jpg">
            </div>
            <div class="headline-medium">
              The best places to visit on Jupiter
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-medium-2.jpg">
            </div>
            <div class="headline-medium">
              The latest smart watches monitor your
              body's vitals while looking stylish
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
          <div class="card">
            <div class="image">
              <img src="32-medium-3.jpg">
            </div>
            <div class="headline-medium">
              Keeping yourself safe while shopping online
            </div>
            <div class="timestamp">🕔 2 Hours</div>
          </div>
        </div>
      </div>
      <div id="footer">Copyright 2018</div>
    </div>

  </body>
</html>

Detailed Code Walkthrough

Setting Some Page Level Defaults

* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
}

The box-sizing property¹ is set to border-box – instead of the default content-box – for all elements. You almost always want to do this because it makes layout much easier.

The font-family is set to sans-serif, but you are free to choose serif or monospace.²

The font-size is set to 16px. This is the default value for almost all web browsers.

These settings will be applied to all the HTML elements unless overridden by more specific styling.³

The Highest Level Structure

When writing the code, it became obvious that another element – which I call darkbox – was needed below the navbar.

It didn’t have to be added to the high level structure, it could have been nested inside the navbar – but it seemed simpler this way.

At the highest level, the (new) HTML structure looks like this:

<body>
  <div id="wrapper">
    <div id="title"></div>
    <div id="navbar"></div>
    <div id="darkbox"></div>
    <div id="content" class="clearfix">
      <div class="column-left"></div>
      <div class="column-middle"></div>
      <div class="column-right"></div>
    </div>
    <div id="footer"></div>
  </div>
</body>

As we walk through the code, it should become clear why it was added.

The Wrapper

The standard way of laying out a webpage is to add a content wrapper between the body tags rather than directly adding content to the body section of the document.

<body>
  <div id="wrapper">

  </div>
</body>

There is no change from the design decision to make the content 960px wide and to center it inside the body section by setting the margins to auto:

#wrapper {
  width: 960px;
  margin: auto;
}

The Title

<div id="title">
  <span id="site-name">clonage</span>
  <span id="login" class="clearfix">Login</span>
</div>

The Title section consists of a single line with two parts:

1. the site title
2. the login

The span tag is used to style elements in a line.⁴

We want one element to be to the left and one to the right. This can be accomplished by floating the login to the right.⁵

A .clearfix is applied to the final element to remove the effect of the float.⁶

#title {
  background-color: white;
  color: black;
  padding: 8px;
}

Some basic properties are set for the title area:

• background colour,
• text colour,
• and a little bit of padding to make it look nice.

#site-name {
  font-size: 32px;
  font-weight: bold;
}

To make the site name stand out, the font size is set to 32px and made bold. You could also make the site name an image – this would allow you to use a logo as well.

The title could be floated to the left, but it left justifies automatically, so it is unnecessary. You can add float:left to the class – if you want.

#login {
  color: grey;
  padding-top: 8px;
  float: right;
}

The login is subdued compared to the surrounding text, so it was set to grey instead of black. A custom hexadecimal RGB value could be used as well.

8px of padding was added to the top to vertically align the login text with the site name.⁷ If you wanted to adjust the margin instead of the padding, then the display mode of the span must be changed to inline-block.⁸

The HTML element was also floated to the right of the page.

The Navigation Bar

<div id="navbar">
  <span class=nav-item>Gear</span>
  <span class=nav-item>Gaming</span>
  <span class=nav-item>Entertainment</span>
  <span class=nav-item>Tomorrow</span>
  <span class=nav-item>Video</span>
  <span class=nav-item>Reviews</span>
  <span class=nav-item>Events</span>
  <span class=nav-item>Local Edition</span>
  <span id="search" class="clearfix">⌕</span>
</div>

Each menu or navigation item is enclosed inside a span element. This allows each item to be individually styled.⁹ Recall that HTML eliminates all excess whitespace characters.¹⁰

The element containing the “search” icon is given the id search since there should be only one search item on the page. It is floated to the right. A suitably sized image of a magnifying glass could have been used, instead similar looking text character is used instead – it is a “telephone recorder” (⌕). This simplifies everything by keeping everything text instead of mixing text and images (not that there is anything wrong with doing that). Finally, the .clearfix is applied to clear the float.

#navbar {
  background-color: #333333;
  color: white;
  border-bottom: 2px solid grey;
}

The background is dark, but not black. A thin border is set on the bottom.

.nav-item {
  display: inline-block;
  padding: 24px 16px;
}

Each .nav-item has display set to inline-block. This allows us full control of the margins (including the top and bottom).

The padding is set to something I considered pleasing looking.

#search {
  color: grey;
  float: right;
  padding-top: 18px;
  padding-right: 16px;
  font-size: 24px;
}

The search element is floated to the right. The colour is a more muted and set to grey. Because the “telephone recorder” is a bit small, the font-size was increased to 24 px. This required adjusting the top padding to make it look centred.

The Dark Box

This is the trickiest element and requires a bit of lateral thinking.

If you look at the original page layout, you see the columns overlap a dark region above them. You also notice that there is a vertical line dividing the columns and a horizontal line dividing the navigation bar from the columns:¹¹

The horizontal dividing line is made by setting the border-bottom of the navbar container to something visible.

Placing an identically coloured element below the navigation bar, it looks like there is a horizontal line dividing the dark region into a top and bottom.

<div id="darkbox"></div>

The darkbox is an empty div with some height applied.

Perhaps a better name would be navbar-extension instead of darkbox.

#darkbox {
  background-color: #333333;
  height: 100px;
}

The background-color is set the same as for the navbar.

A height of 100px looks about the right size.

The Content

<div id="content" class="clearfix">
  <div class="column-left"></div>
  <div class="column-middle"></div>
  <div class="column-right"></div>
</div>

The content is a container holding three left floating columns. It is styled with .clearfix to restore normal flow. The .clearfix could be applied only to .column-right, but it seems better to clear at the parent container level.

#content {
  margin-top: -90px;
}

The margin-top is set to -90px. This causes the content area to be shifted upwards 90px. This causes it to overlap the darkbox. It is possible to use negative values for positioning elements.

The column-left

The .column-left contains the title Popular and 4 cards.

<div class="column-left">
  <p id="popular">Popular Now</p>
  <div class="card">  </div>
  <div class="card">  </div>
  <div class="card">  </div>
  <div class="card">  </div>
</div>

The .column-left is styled to have a width of 20% and to float left.

.column-left {
  width: 20%;
  float: left;
}

The Popular title is styled using the #popular class which sets the text color to white, adds 16px of padding-left to nicely align the title and set the font-weight to bold so it stands out.

#popular {
  color: white;
  padding-left: 16px;
  font-weight: bold;
}

We will examine the details of the .card class a little later.

The column-middle

The .column-middle consists of two cards.

<div class="column-middle">
  <div class="card">  </div>
  <div class="card">  </div>
</div>

If you wanted to be more like the Verge website, which has a single large card and then two columns of cards beneath it, the code would look something like this this:

<div class="column-middle">
  <div class="card">  </div>
  <div class="dual-columns">  
    <div class="dual-left">
      <div class="card">  </div>
      <div class="card">  </div>
      <div class="card">  </div>
    </div>
    <div class="dual-right">
      <div class="card">  </div>
      <div class="card">  </div>
      <div class="card">  </div>
    </div>      
  </div>
</div>

There might be better class names or you might want to use IDs instead of classes.

The .column-middle is styled to have a width of 55% and to float left. It also has a thin border on the left and right side – this gives a nice visual esthetic. How could you make these vertical borders touch the horizontal border applied to the #navbar?¹²

.column-middle {
  width: 55%;
  float: left;
  border-left: 2px solid grey;
  border-right: 2px solid grey;
}

The column-right

The .column-right consists of three cards.

<div class="column-right">
  <div class="card">  </div>
  <div class="card">  </div>
  <div class="card">  </div>
</div>

The .column-right is styled to have a width of 25% and to float left.

.column-right {
  width: 25%;
  float: left;
}

The card

A .card encapsulates an:

1. image,
2. headline,
3. and timestamp .

<div class="card">
  <div class="image">
    <img src="image.jpg">
  </div>
  <div class="headline">
    A Headline
  </div>
  <div class="timestamp">🕔 A Timestamp</div>
</div>

The img is wrapped inside a div. This is common practice.¹³ It allows the image and everything associated with the image to be encapsulated in its own container.

The headline contains some text. It could be wrapped inside a p tag, but it is not necessary.

The timestamp also contains some – which also could be wrapped inside a p tag. The clock (🕔) could be an image, but there are some Unicode clock characters¹⁴ – which what is used. It is easier to work with text instead of mixing text and images. However, whatever gets the job done is (usually) good.

The .card is styled to have 16px of padding on the left, right, and bottom. This padding allows the card to have some esthetic spacing on the sides and between cards. If 16px of padding were also applied to the top, then there would be 32px of spacing between the bottom of one card and the top of the next card.

.card {
  padding: 0 16px 16px 16px;
}

The img tag is styled with a width of 100%. This causes the image scale correctly to fit whatever container it is in – the same .card is used in all the columns (20%, 55%, and 25%).¹⁵

img {
  width: 100%;
}

The wrapper for the [img]{html-tag} has the class .image applied to it. At the moment, it doesn’t apply any styling, but it is available for modification in the future.¹⁶

.image {

}

The footer

The footer has its own ID and is styled to match the rest of the content on the page.

<div id="footer">Copyright 2018</div>

#footer {
  text-align: center;
  padding: 24px;
  background: #333333;
  color: white;
  font-size: 20px;
}

Final Thoughts

Using only what we’ve covered so far, it is possible to create quite sophisticated looking webpages.

You can go a step further and make the page “functional” by adding links to all the articles¹⁷ and creating the corresponding pages.

While it is a lot of work to create a webpage, it is not difficult work.

I encourage you to try and “clone” webpages from other sites. Remember, the goal is to practice and hone your skills, not to wear yourself out.

There is still a lot more to developing webpages and websites. Responsiveness[^responsive] is an important one: your webpage should look good on a 320px X 480px phone display as on a 1920px X 1080px desktop display. But this is something you don’t worry about in the beginning. First get the skills down to make pages that look good on the screen you are working on. In future lessons, we will look at how to make the page look good on varying display sizes.

Image Credits

The images used in the example page are courtesy of:

1. Apple and Books by jarmoluk
2. Robotic Arm by PIRO4D
3. Virtual Reality Cyclist by VR Pexels
4. Cosplay Girl by ptksgc
5. Toy Cars by kamal1118
6. Fruit Salad by silviarita
7. Astronaut and Jupiter by DasWortgewand
8. Watch by the5th
9. Keyboard by atthree23

The post CSS – A More Advanced Float Example: Part 3 appeared first on Complete, Concrete, Concise.

Every complicated task needs to be broken down into smaller, simpler tasks.

Here we define the general structure before filling in the details in the next tutorial.

Contents

1. Deciding on the Overall Structure
2. A Skeleton to Work With
   1. ID Styles in More Detail
      1. #wrapper
      2. #title
      3. #navbar
      4. #content
      5. #footer
   2. Class Styles in More Detail
      1. .column
      2. .clearfix
   3. The HTML in More Detail
3. Cards

Deciding on the Overall Structure

When we examine the engadget website:

we see that its general structure looks something like this:

It consists of 6 rectangles:

• 2 stacked one atop the other at the top
• 3 stacked side-by-side in the middle
• 1 at the bottom of the page

It should be obvious that the 3 side-by-side columns are positioned using float.

Estimating the columns widths, it looks like:

• the narrowest column occupies about 20% of the display
• the widest column occupies about 50% of the display
• this leaves 30% for the medium width column

This is a rough guess, but it is a starting point. As we refine the page, we may adjust the relative widths of the columns to make the layout appear more pleasing.

I will make the content section 960px wide.¹ I previously mentioned that 960px is a good rule of thumb for the content width of a webpage²

A Skeleton to Work With

A rough page skeleton might look something like this:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Rough Layout</title>
    <meta charset="utf-8"  />

    <style>

      #wrapper {
        width: 960px;
        margin: auto;
      }

      #title {
        background-color: white;
        color: black;
        width: 100%;
      }

      #navbar {
        background-color: black;
        color: white;
        width: 100%;
      }

      #content {
        width: 100%;
      }

      #footer {
        width: 100%;
      }

      .column-left {
        width: 20%;
        float: left;
      }

      .column-middle {
        width: 50%;
        float: left;
      }

      .column-right {
        width: 30%;
        float: left;
      }

      .clearfix::after {
        clear: both;
        display: block;
        content: "";
      }

    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="title">Title and Login</div>
      <div id="navbar">Navigation Bar and Search</div>
      <div id="content" class="clearfix">
        <div class="column-left">Narrowest Column</div>
        <div class="column-middle">Widest Column</div>
        <div class="column-right">Medium Width Column</div>
      </div>
      <div id="footer">The Footer</div>
    </div>

  </body>
</html>

The rough layout consists of 5 ID styles and 4 class styles.

ID Styles in More Detail

If you remember, each ID must be unique³ on the page and each HTML element can have only one ID.⁴

IDs are used to refer to elements that the should only ever be one of on the page.

#wrapper

#wrapper {
  width: 960px;
  margin: auto;
}

Because we are restricting the content width to 960px, we need to wrap all the content in a container that is 960px wide. We also set the margin to auto so the browser will automatically horizontally center the container in the browser window.⁵

All other elements are styled to occupy the full width of the #wrapper by setting their width to 100%.⁶ By using percentages for all other element dimensions, we can change the content width by altering a single value in #wrapper instead of having to change it everywhere we use px.

#title

#title {
  background-color: white;
  color: black;
  width: 100%;
}

There should only be one title section on a page. We set the background to white (but you can make it any colour you like, you can be creative in your reimagining of the page).

#navbar

#navbar {
  background-color: black;
  color: white;
  width: 100%;
}

There should be only one navbar on a page. The background is set to black (but you can make it a different colour if you like). The text colour is set to white so it contrasts against the black background.

#content

#content {
  width: 100%;
}

There should be only one content section (even if though it contains 3 columns).

#footer

#footer {
  width: 100%;
}

There should be only one footer on a page.

Class Styles in More Detail

.column

.column-left {
  width: 20%;
  float: left;
}

.column-middle {
  width: 50%;
  float: left;
}

.column-right {
  width: 30%;
  float: left;
}

Because we have 3 unique columns, they could have been made IDs. I decided to make them classes because if I decide to go with a 4 column or 5 column layout, I might be able to reuse existing classes (I could have named the columns better).

They are all floated left and have their widths set as a percentage totaling 100%.

.clearfix

.clearfix::after {
  clear: both;
  display: block;
  content: "";
}

The clearfix for the #content could have been written as:

#content::after {
  clear: both;
  display: block;
  content: "";
}

But, we may find ourselves using float in more places as we refine the page, so it is better to have it as a generic clearfix that can be applied as needed.

The HTML in More Detail

<body>
  <div id="wrapper">
    <div id="title">Title and Login</div>
    <div id="navbar">Navigation Bar and Search</div>
    <div id="content" class="clearfix">
      <div class="column-left">Narrowest Column</div>
      <div class="column-middle">Widest Column</div>
      <div class="column-right">Medium Width Column</div>
    </div>
    <div id="footer">The Footer</div>
  </div>

</body>

It should be straightforward:

• the #wrapper encloses all the other html
• the #title, #navbar, #content, and #footer stack one atop the other in normal flow
• the columns are left floated inside the #content

Cards

Having completed the basic structure, we can now focus on some of the internal details.

Each column contains a number of stacked cards containing information about the article. Each card contains:

1. An image
2. A title
3. A timestamp

The HTML should look something like this:

<div class="card">
  <div class="image">
    <img>
  </div>
  <div class="headline"></div>
  <div class="timestamp"></div>
</div>

It should be straightforward:

• a card consists of a wrapper which I call card
• inside the card wrapper we have the image, the article headline, and the timestamp
• the actual image is placed inside an image container because the image only has a single tag and it is easier to manipulate if we place it inside a div element.⁷

And with some styling it could look something like this:

Foods that boost your learning

🕔 2 Hours

The post CSS – A More Advanced Float Example: Part 2 appeared first on Complete, Concrete, Concise.

Taking what we know about float and creating a more sophisticated webpage layout.

Instead of creating our own layout, we will copy – more or less – an existing design.

It doesn’t have to be an exact copy.

Contents

1. The Objective
2. Simplifications
3. A Tease of What It Could Look Like

The Objective

1. Copy – more or less – the layout of the homepage of the website Engadget which can be done using float.
2. Don’t clone the whole page, just the part that you see in your web browser without scrolling. In my browser window, Engadget looks something like this (I eliminated the ads from the page for simplicity):It might look different in your browser.
3. Don’t make the webpage functional – just go for the look. Creating clickable article links, a working navigation menu, search and login functions are beyond the scope of this exercise. This exercise is just about layout.
4. Include a footer at the bottom.

Simplifications

To make things easier:

1. Assume the articles in the central column are the same size instead being a large item on top and two smaller items beneath.
2. Since the only fonts you know¹ are serif, sans-serif, and monospace don’t worry about trying to match the fonts.²

A Tease of What It Could Look Like

Over the next two tutorials, I will develop code to create a page that looks like this:

This page is similar, but not identical, to the Engadget homepage.

Depending on your browser display width, the Engadget homepage may appear differently. For displays 960 pixels or wider, it should look similar.

The post CSS – A More Advanced Float Example: Part 1 appeared first on Complete, Concrete, Concise.

The purpose being to try and use floating elements in a design.

Contents

1. An Example Using float
2. Source Code
3. Notes
4. Image Credits

An Example Using float

You can see how the page I styled and structured using float looks here.

Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Floating on Dreams</title>
    <meta charset="utf-8"  />

    <style>

      #title {
        font-size: 48px;
        text-align: center;
      }

      #subtitle {
        font-size: 24px;
        text-align: center;
      }

      .main {
        font-family: sans-serif;
        box-sizing: border-box;
        width: 960px;
        margin: auto;
      }

      .header {

      }

      .images {
      }

      .large-image {
          margin: auto;
      }

      .small-image-container {

      }

      .small-image {
          float: left;
          margin: 50px 10px 0 10px;
      }

      .footer {
          text-align: center;
      }

      .clearfix::after {
        clear: both;
        display: block;
        content: "";
      }

    </style>

  </head>
  <body>

    <div class="main">
      <div class="header">
        <p id="title">Floating on Dreams</p>
        <p id="subtitle">A simple page using floats</p>
      </div>

      <div class="images">
        <div class="large-image">
          <img src="28-big-image.jpg">
        </div>

        <div class="small-image-container clearfix">
          <div class="small-image">
            <img src="28-small-1.jpg">
          </div>
          <div class="small-image">
            <img src="28-small-2.jpg">
          </div>
          <div class="small-image">
            <img src="28-small-3.jpg">
          </div>
        </div>
      </div>

      <div class="footer">
        <p>Copyright 2018</p>
      </div>

    </div>

  </body>
</html>

Notes

1. The first thing that needs to be done is to divide the document into nesting and stacking HTML blocks.
2. This is one possible way to section the document: 
3. There is always a Main container which contains all the content. It was set to have a width of 960 pixels.
4. The Header and Footer blocks are nested inside the main container.
5. Between the header and footer there is some content. The content (in this case) is images and is contained within an Images container.
6. Nested inside the images container is a stacking of large and small images.
7. The large image has its own container
8. The small floating images are wrapped in their own container so they act like a single block. The small images block has .clearfix applied to it.
9. Not all the sectioning divs have styling applied since their sole purpose is to provide structure.
10. While styling could have been applied directly to the img tags, I chose to wrap them in a div because it allows for greater flexibility in the future.
    • Imagine turning those small floating images into a “card”:
      

      A Pensive Cat

Image Credits

The images I used are courtesy of:

1. charloisporto : Tranquil nature scene
2. silviarita : Fruit salad
3. Ataner007 : Woman meditating
4. susannp4 : Cat

The post CSS – A Simple Page Using Float appeared first on Complete, Concrete, Concise.

Contents

1. Floated Elements Flow Sideways
2. Floating Elements Wrap If There Is Not Enough Space
3. Wrapping is Dependent on Which Way the Element Floats
4. Percentage as a Dimension
5. margin:auto Has No Effect on Floats
6. Expanding a Floating Child to Fit Its Parent
7. Summary
8. Playing Around
9. References

Floated Elements Flow Sideways

HTML elements flow from top to bottom in the order in which they appear in the HTML document. This is called normal flow.
Floating elements are outside of normal flow and do not stack top to bottom. Instead, they stack from left-to-right for left floated elements and right-to-left for right floated elements.
Consider the following code:¹

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.left {
  float: left;
}

.right {
  float: right;
}

.centre {
  margin: auto;
}

.yellow {
  background-color: yellow;
}

.lime {
  background-color: lime;
}

.orange {
  background-color: orange;
}

.cyan {
  background-color: cyan;
}

<div class="box yellow left"></div>
<div class="box lime left"></div>
<div class="box orange left"></div>
<div class="box cyan left"></div>

<div class="box yellow right"></div>
<div class="box lime right"></div>
<div class="box orange right"></div>
<div class="box cyan right"></div>

<div class="box yellow centre"></div>
<div class="box lime centre"></div>
<div class="box orange centre"></div>
<div class="box cyan centre"></div>

Which gives the following output:

You will notice that:

1. 3 sets of coloured boxes are declared in the same order (.yellow, .lime, .orange, and .cyan)
2. each set of boxes is given a different alignment class (.left, .right, or .centre)
3. the boxes on the left stack from left-to-right in the same order they were declared
4. the boxes on the right stack from right-to-left in the same order they were declared
5. the boxes in the middle stack from top to bottom in the same order they were declared
6. because the .left boxes and .right boxes are not in normal flow, the .centre stacked boxes occupy their place in the normal flow.

Recall that (relative to their parent):

1. floating elements float up as high as they can. They stop when they either encounter the top margin of their parent or the bottom margin of a non-floating element.
2. floating elements float as far to the side as they can. They stop when they either encounter the side margin of their parent or the side margin of another floating element.

This is exactly what we observe in the example above:

1. the floated elements are declared at the top of the document, so they float up to the margin of the parent – they are not stopped by the bottom margin of other floating elements
2. the floated elements flow as far to the side as they can and are stopped either by the side margin of the parent (the yellow block) or the side margin of another floating element (the other blocks).

Floating Elements Wrap If There Is Not Enough Space

Elements in normal flow stack one atop the other and continue down the bottom of the page as far as needed.
Floated elements do not stack sideways as far as they can go – they are constrained by the width of their parent (assuming you don’t make the child wider than its parent). Any floating elements for which there is not enough room to stack sideways will flow to the next line.
Consider the following 4 left floating blocks (they are scaled to each take up 25% of the available width):

They all line up in a single line as expected.
If we make them a little wider, say 26% of the width of the parent container:

We see that the blue block, because it doesn’t fit, automatically wraps to the next line and moves as far left as it can.
A similar thing happens for right floated elements – except everything moves as far right as it can:

Wrapping is Dependent on Which Way the Element Floats

Sometimes, you can get some unexpected float behaviour if you don’t remember that floating elements:

1. float up as high as they can
2. then float to the side
3. in the order they are declared in the document.

Consider the following:

.parent {
  width: 400px;
  background-color: red;
  margin: auto;
}

.left-box {
  width: 250px;
  height: 100px;
  background-color: yellow;
  float: left;
}

.right-box {
  width: 250px;
  height: 100px;
  background-color: lime;
  float: right;
}

<div class="parent">
  Parent Box
  <div class="right-box">Right Box</div>
  <div class="left-box">Left Box</div>
</div>

The sum of both floats is wider than the parent, so:

1. the floats can’t both fit on the same line (250px + 250px is greater than the 400px of the parent)
2. the floats wrap
3. they wrap in the order they were declared in the document (the right element is placed first, then the left).

Of course, you can have elements float to the left and right on the same line. If we change the width of the floats in the above example to 100px, we get:

Remember that parts of the parent CSS Box is under both the left and right boxes, but the content in the parent box is never under a floating element.

Percentage as a Dimension

Up till now, we have always used pixels as a dimensioning unit. CSS has many ways of dimensioning things. It can be easier to work with float widths as a percentage of the parent container width. When using % as a dimension, it refers to the width of the container as a percentage of the parent width.
Consider the following:

.box {
  margin: auto;
  height: 50px;
}

.w30 {
  width: 30%;
  background-color: yellow;
}

.w50 {
  width: 50%;
  background-color: lime;
}

<div class="box w30"></div>
<div class="box w50"></div>

The yellow box is 30% of the width of its parent.
The green box is 50% of the width of its parent.
If the width of the parent changes, the widths of the child elements will adjust automatically. This can be useful if you want your web content to adapt its size to the browser window width.
It is also useful if you want to quickly divide up the available real estate. Consider the following:

.parent {
  width: 400px;
  height: 200px;
  margin: auto;
}

.main {
  width: 70%;
  height: 100%;
  background-color: lime;
  float: left;
}

.sidebar {
  width: 30%;
  height: 100%;
  background-color: cyan;
  float:left;
}

<div class="parent">
  <div class="main">
    Main content goes here.
  </div>
  <div class="sidebar">
    Sidebar content goes here.
  </div>
</div>

Each floating box gets the specified percentage of the parent’s area. The parent size can be easily changed without having to update the individual sizes of the floating elements.

Expanding a Floating Child to Fit Its Parent

A floating child element will only fill out the parent’s height only if the parent has a definite height specified (e.g. 200px). If no height is specified for the parent or a percentage height is specified for the parent, the floating child will not expand to fill the height of the parent – even if .clearfix is used to expand the parent around the floating children.
Using the same code as above, but

1. setting the parent height to 100%,
2. setting its background-color to yellow, and
3. clearing the floats after the last float (so the parent expands around the floating children):

We see that the parent (yellow) has closed around its children. It has expanded to the height of the sidebar box, but the main content box (despite having its height set to 100%) has not expanded to the bottom of the parent.
If the parent does not have a fixed height, it is not possible to make a floating child expand to the height of its parent without either:

• using JavaScript,² or
• using a different positioning technique.³

The only time this (usually) becomes an issue is when children and parents have different background colours, borders, or other properties that makes it obvious the floating child and parent are not the same height.
Floating children will always respect the width of the parent – as long as you do not make the child wider than the parent.

margin:auto Has No Effect on Floats

Setting margin to auto⁴ on a floating element will have no effect. This is because floating elements automatically float as far as they can to the left or right.
However, you can set a fixed margin on a floating element and it will respect it:

.floating-box {
  width:150px;
  height:50px;
  float: left;
  background-color: cyan;
  margin-left: 50px;
  margin-top: 50px;
}

.parent-box {
  width: 250px;
  height: 150px;
  background-color: yellow;
  margin:auto;
}

<div class="parent-box">
  <div class="floating-box">
    This box is floating with margins.
  </div>
</div>

Summary

1. Floating elements do not stack top to bottom.
2. left floated elements stack from left-to-right.
3. right floated elements stack from right-to-left.
4. Floating elements stack in the order they appear in the document.
5. If there is not enough room on a line to fit a floating element, the element moves down (wraps) to the next line and moves as far to the side as it can.
6. Instead of pixels, dimensions can be given as a percentage. The percentage is relative to the dimensions of the parent.
7. A floating child can be made to fit the full height of its parent by setting its height to 100%. This only works if the parent has a defined height in pixels.
8. margin:auto, which is commonly used to centre HTML elements, is ignored when applied to floating elements.
9. Floating elements respect non-auto margin values.

Playing Around

The best way to learn is to play around with what you have learned.
You have previously seen that you can use the div tag to section content in a document. Prior to seeing the float property, the only possible flow of content was vertical – from top to bottom. With float it is possible to get content to flow side-to-side.
How would you section and style the following page layout using div and float?

1. Make it look good in your browser on your computer. Don’t try to make it look good at all possible screen resolutions.
2. Think about how to section the document. Remember that divs can nest inside other divs.
3. The layout above is a rough template to give you direction on how to layout your document.
4. A general rule of thumb in web design is to make your layout 960px wide (which is then centred in the browser)⁵.

References

1. float
2. clear
3. 960 Grid

The post CSS – Understanding How Float Works – Part 2 appeared first on Complete, Concrete, Concise.

Contents

1. A Quick Review of Normal Flow
2. float Takes the Element Out of Normal Flow
3. float Changes the Element’s display Property
4. How Floated Elements Position Themselves
5. How Parents Interact with Floats
6. Content Avoids Being Under a Float
7. Clearing the Effect of Float
8. How to Make a Parent Contain a Float
9. Clearfix – The Better Way to Clear a Float
   1. Breaking Down Clearfix
10. Summary
11. Playing Around
12. References

A Quick Review of Normal Flow

All HTML elements have a box model:

All HTML elements are always represented as a rectangle.¹
Elements can nest one inside the other:

We call the outer element a parent and the inner element a child.
In HTML, block elements flow from top to bottom, stacking like blocks:

HTML Blocks

stack one

atop the

other

They stack or nest in the order they appear in the HTML document.²
The CSS Box expands to fit whatever is inside it – whether it is content or another CSS Box (which, technically, is content).

float Takes the Element Out of Normal Flow

When you apply the float property to an element, it takes the element out of normal flow.
We have always considered the HTML document to be like a flat sheet of paper. When we float an element, it is like adding another sheet of paper on top of the first:
 

And the floated element “floats” to that new layer:

 
Since it is no longer part of the original layer (normal flow), the block elements below move up as if the floated element never existed:

 
It is important to understand that the floated element is no longer fully contained inside the CSS Box it was declared. It literally floats on top of the other HTML elements.
Consider the following styling³ and code:

.box {
  width:300px;
  height: 150px;
  background-color: blue;
  margin: auto;
}

.floated-box {
  width: 150px;
  height: 300px;
  background-color: rgba(255, 0, 0, 0.5);
  float: left;
}

<div class="box">
  <div class="floated-box"></div>
</div>

Which results in:

If we switch the float from left to right we get:

In both cases, it should be obvious that the red element is floating above the blue element.

float Changes the Element’s display Property

All floated elements have a display of block.
This happens automatically.
You can set it to none to hide the floated element, but you cannot set it to inline or inline-block.⁴

How Floated Elements Position Themselves

A floating element’s position is bounded by its parent’s top and side edge, according to the following rules:

1. It moves up as high as it can:
   • it stops when it reaches the top of its parent (illustrated in the examples above) or
   • it stops when it encounters an HTML element that is not floated:
     Not floating.
2. It moves as far to the left (or right – depending on the value of the float property) as it can:
   • it stops when it encounters the corresponding side of its parent (illustrated in the examples above) or
   • it stops when it encounters the side of another floated element
     Floating
3. Since it is removed from normal flow the parent knows nothing about the child, so the parent cannot automatically size to contain the floating child. Remember, the child is floating above the parent
4. It is possible for a floating child’s CSS Box to be larger than its parent’s CSS Box:

How Parents Interact with Floats

Because floated elements are removed from normal flow they do not affect the parent.
Normally, a parent expands to contain all the content within it (assuming you haven’t set the width or height), but since a floated element is not contained by the parent, the parent cannot expand to contain it.
We see the parent and child in the examples above because I set the width and height or the parent element.
Consider the following in which the parent only has the background-color set:

<div class="blue-bg">
  <div class="floated-box"></div>
</div>

Which results in:

Since the parent has no content (remember the floating child is outside normal flow), it has full width and a height of  zero pixels (since there is nothing for it to expand around). You can convince yourself of this by adding a border to the parent element – which will appear as a horizontal line since the height it is zero pixels.
Adding some content to the previous example:

<div class="blue-bg">
  <div class="floated-box"></div>
  <p>This is some text.</p>
</div>

We get:

The parent container expanded to contain the content that was added, but it did not expand to contain the floating element.
Had I added the content before the float, the float would have stopped at the first non-float element and we wouldn’t have the dramatic effect of the float overflowing its parent and the parent not adjusting its size to contain the float.
This brings up another interesting property of floats: content avoids being under a float.

Content Avoids Being Under a FLoat

Consider the following code:

<div class="yellow-bg">
  <div class="floated-box"></div>
  <p>This is some text.</p>
</div>

<div class="lime-bg">
  <p>This is some text in a lime box.</p>
</div>

<div class="orange-bg">
  <p>This is some text in an orange box.</p>
</div>

Which gives the following result:

This shows that a float may overlap many CSS Boxes, but the content in those boxes are not covered by the floating element. In other words, content will never appear under a floating element.⁵
Floating elements never cover up content like this:

This behaviour makes floats extra confusing because the behaviour of things under a float is not consistent:

• CSS Boxes can be overlapped by floating elements
• Content in CSS Boxes cannot be overlapped by floating elements

Clearing the Effect of Float

The clear property is used to “restore” normal flow around a floated element. This is not technically correct, what really happens is the element is positioned under the bottom margin of the floating element. In other words, clear means something like: position yourself clear of the overlapping effect of any float.
There are 4 possible values:

• none : this is the default value and does not cause the element to get clear of any floats
• left : this causes the HTML element to position itself so it is clear of any float:left elements, i.e. no left floating element overlaps its CSS Box
• right : this causes the HTML element to position itself so it is clear of any float:right elements, i.e. no right floating element overlaps its CSS Box
• both : this causes the HTML element to position itself so it is clear of all floating elements, i.e. no floating element overlaps its CSS Box. This is the most commonly used value

The clear property is applied to the element you want to position immediately below the bottom margin of the floating element. Remember that HTML elements flow from top to bottom.
If clear is applied to an element that is not covered by a float, then it has no effect on its positioning.
Consider the previous example:

The red floating box overlaps the yellow, green, and orange HTML elements. Also notice that the content does not appear under the floating box.
The red box is a child of the yellow element. It was declared inside the yellow element and is bound to the top and left of the yellow element. But the yellow parent does not enclose its red child because the child is outside of normal flow, so the parent isn’t aware of it.
If we want the green element to appear after the floating red box (i.e., we want it to get clear of any overlapping by a float), we apply the following style to it:

.clear {
  clear: both;
}

And apply the class to our code:

<div class="yellow-bg">
  <div class="floated-box"></div>
  <p>This is some text.</p>
</div>

<div class="lime-bg clear">
  <p>This is some text in a lime box.</p>
</div>

<div class="orange-bg">
  <p>This is some text in an orange box.</p>
</div>

Which gives the following result:

clear:both has caused the green element to be positioned just beneath the bottom margin of the floated element. In other words, it got clear of the float. In this example, clear:left would have been good enough. Had we used clear:right, the green box would not have moved clear of the red box.
Had we also applied .clear to the orange box, it would have no effect because the orange box is no longer under the influence of the float.

How to Make a Parent Contain a Float

We saw that applying clear to an HTML element caused it to be positioned below the bottom margin of a floating element.
We can use the same technique to push down the bottom of a parent so it “contains” its floating child. Technically speaking, it doesn’t contain the child – it only looks like it contains the child.
It is useful to remember:

1. floated elements are not part of normal flow.
2. floated elements float on top of any normal flow CSS Boxes below them.
3. floated elements move as far up as they can in their parent HTML element (this could be a div or even the body). They stop if they encounter a non-floating element.
4. floated elements move as far to the side (left or right) as they can. They stop when they either encounter the side margin of the parent or of another float.
5. Content never appears under a floating element. It will always shift to a position where it is not covered by a floating element.
6. HTML elements expand (assuming no width or height has been set) to fit their content.
7. we can set the clear property on an HTML element to tell it to position itself so it is clear of (not covered by) a floating element

Based on the behaviours outlined above, all that is needed to get a parent to “contain” a floating child is to:

• place an HTML element inside the parent,
• place it after the floating element,
• set the clear property on it.

This will cause the element to position itself after the floating element. Since this element is contained by the parent, the parent will expand to contain it:

<div class="yellow-bg">
  <div class="floated-box"></div>
  <p>This is some text.</p>
  <p class="clear">Clearing element under
    the float that expands the parent
  </p>
</div>

<div class="lime-bg">
  <p>This is some text in a lime box.</p>
</div>

<div class="orange-bg">
  <p>This is some text in an orange box.</p>
</div>

Which gives the following result:

It works, except that we may not want to have text at the bottom of our parent. The trick is to insert a zero pixel high element – an empty div element works perfectly for this:

<div class="yellow-bg">
  <div class="floated-box"></div>
  <p>This is some text.</p>
  <div class="clear"></div>
</div>

<div class="lime-bg">
  <p>This is some text in a lime box.</p>
</div>

<div class="orange-bg">
  <p>This is some text in an orange box.</p>
</div>

Resulting in:

Which is exactly what we would like – almost.
The problem is that we have to insert some styled HTML code that does nothing but clear the effect of the float. Effectively, it is “noise” in our code.
Fortunately, there is a better way.

Clearfix – The Better Way to Clear a Float

The problem with the previous solution is that it adds extra code to get a parent to “wrap around” a floating child. It would be better if we didn’t have to add extra code.
There is a way to do this and it is known as .clearfix.⁶
The code looks like this (the class name is arbitrary, you are free to call it whatever you like):

.clearfix::after {
  clear: both;
  display: block;
  content: "";
}

It is applied to the parent containing the floating element:

<div class="yellow-bg clearfix">
  <div class="floated-box"></div>
  <p>This is some text.</p>
</div>

<div class="lime-bg">
  <p>This is some text in a lime box.</p>
</div>

<div class="orange-bg">
  <p>This is some text in an orange box.</p>
</div>

And gives us the result we want:

Breaking Down Clearfix

Unfortunately, .clearfix contains CSS elements I am not going to cover in this Front-End Basics tutorial series, but, understanding what is going on with .clearfix is important, so I need to give you a little background on what is happening:

.clearfix::after {
  clear: both;
  display: block;
  content: "";
}

• ::after – this creates a pseudo-element that is inserted as the last child. In other words, it creates a “fake” HTML element that becomes the last child of the parent. In effect, it automatically inserts the needed last HTML element for us.⁷
• clear:both – this instructs the pseudo-element (which is also the last element) to get clear of any floats. This means the pseudo-element will appear below any floats, thus extending the parent CSS Box around it (because it is contained by the parent).
• display:block – the pseudo-element display type is set to block style because normal flow (pretty much) relies on HTML elements being blocks.
• content – the content property allows inserting content into the ::after pseudo-element. In fact, there is no other way to insert content.⁸ In this case, we insert an empty string – it occupies no space, so the element has a height of zero pixels. If you omit the content property. then the .clearfix won’t work. Instead of an empty string, you could also use a single space ” “.⁹

Summary

1. Floated elements are not part of normal flow.
2. block elements move up to fill the space left by the floated element.
3. Floated elements automatically have their display value set to block
4. Floated elements “float up” to a display layer above the document layer.
5. Floated elements cover any normal flow CSS Box elements below them.
6. Floated elements first move up as far as they can in their parent HTML element. They stop when they reach the top margin of their parent or the bottom margin of a non-floating element.
7. Floated elements then move as far to the side (left or right) as they can in their parent HTML element. They stop when they reach the side margin of the parent or of another floating element.
8. Floated elements are not contained inside their parents, so the parent element does not expand to contain the floating element. (But they are bounded by the top and one side of the parent.)
9. The CSS Box of a floating child element can be larger than the CSS Box of its parent.
   • the bottom of a floating element can extend below the bottom of its parent.
   • left floated elements can have their right margin extend past the right margin of their parent.
   • right floated elements can have their left margin extend past the left margin of their parent.
10. Content never appears under a floating element. It will always shift to a position where it is not covered by a floating element.
11. The clear property does not stop or end the effect of a floating element.
12. Setting clear:left on an HTML element instructs the element to position itself immediately below any float:left elements it may be affected by. If the element is not under the influence of any float:left element, this setting has no effect.
13. Setting clear:right on an HTML element instructs the element to position itself immediately below any float:right elements it may be affected by. If the element is not under the influence of any float:right element, this setting has no effect.
14. Setting clear:both on an HTML element instructs the element to position itself immediately below any floating elements it may be affected by. If the element is not under the influence of any floating elements, this setting has no effect.
15. Inserting a “dummy” HTML block as the last element in a parent with the clear property set will cause the parent to expand and “contain” any floating children.
16. .clearfix is the preferred method for getting a parent to “contain” floating child elements.

We covered quite a lot of material and information on float, but don’t worry, there is still plenty more in the next tutorial.

Playing Around

The best way to learn is to play around with what you have learned.
Floats can be confusing because they are removed from normal flow and can overlap other CSS Boxes, but the content in those boxes will not be overlapped – it will be positioned so it is not under a floating element.
For these exercises, I suggest making things simple by:

• using fixed sized boxes with different coloured backgrounds.
• make the background of floating elements semi-transparent using the RGBA() function so you can see when it floats over other HTML elements.

1. Observing the effect of floats being removed from normal flow:
   • Create two stacked (not nested) boxes and observe what happens when you:
     • float the bottom box to the right?
     • float the bottom box to the left?
     • float the top box to the right?
     • float the top box to the left?
   • Create four stacked (not nested) boxes and what happens when you:
     • float the second from the top to the right?
     • float the second from the top to the left?
2. Observing the effect of clear on floats:
   • Create three stacked (not nested) boxes. Make the second box twice as tall as the first box. Make the third box very wide. Float the first box left and the second box right and observe what happens when:
     • clear:left is applied to the third box?
     • clear:right is applied to the third box?
     • clear:both is applied to the third box?
3. Observing that parents do not contain their floating children:
   • Create a parent container with no specified width and height, but let it have a background-color
     • create a floating child box inside that is smaller than the parent. Do you observe the parent background-color?
     • add a border to the parent. Do you observe the border, but not the background-color?
     • what do you observe when you add non-floating elements to the parent? Try adding them before and after the floating child.
4. Observing the effect of floats on content:
   • Create a parent box with a specified width and height. Inside, create a floating box. The floating box should have a width and height greater than its parent. Beneath the floating box, add some text content (it is a good idea to put a border around the content) and observe what happens when:
     • float is set to none?
     • float is set to left or right?
5. Observing the positioning of multiple floats:
   • Create a stack of three floating boxes. What happens when:
     • they all have float set to left?
     • they all have float set to right?

References

1. float
2. clear
3. ::after
4. content
5. RGBA()
6. #RRGGBBAA

The post CSS – Understanding How Float Works – Part 1 appeared first on Complete, Concrete, Concise.

Front End

Front-End, basically, means everything that happens in the browser. This includes the page design (layout, colours, typography), behaviour, and implementation.
HTML, CSS, and JavaScript are the three main technologies used in front-end development:

• HTML is the foundation on which all webpages are built, so it is essential.
• CSS allows you to customize the look of HTML. It is not essential, but webpages without CSS look very plain.
• JavaScript is not essential, but it allows you to add special behaviour to a webpage that is not possible using HTML and CSS alone. Many websites can be built without using JavaScript.

In addition to those three technologies, a front-end developer will likely use additional technology in the form of frameworks, libraries, and tools such as:

• jQuery
• Bootstrap
• express.js
• SASS
• LESS
• YAML
• AngularJS
• AJAX

Front-end development can be as simple as basic a webpage, as complicated as managing a database¹, or as challenging as writing a game.
Front-end development can be, roughly, divided into:

• Design: the layout, look, colours, typography, usability
• Implementation: turning the design into something functional

As well, front-end development skills can also be used for writing browser extensions for Mozilla Firefox, Google Chrome, Microsoft Edge, and Apple Safari – because they all use HTML, CSS and JavaScript.
In the past, there were more front-end technologies, but these are, effectively, obsolete:

• VBScript
• ActionScript
• Flash
• Java
• and others

Back-End

Back-End, basically, means everything that happens on the server. This mostly involves database work and processing data on the server to be sent to the browser.
A programming language (or two), a database, and server software are the main technologies used in back-end development. However, there is a lot more variety in back-end technology than in front-end technology.
Much of the skills and knowledge of front-end development are also applicable for back-end work because the back-end (server) has to send HTML pages to the front-end (browser or client).
In terms of programming languages, the following are commonly used for back-end development:

• PHP
• Python
• Ruby
• Java
• C#
• C++
• Perl
• Scala
• JavaScript
• and many more

Relational and non-relational databases are used (though, usually not on the same project):

• MySQL
• MariaDB
• MongoDB
• and many others

There is also the server technology that is used:

• Apache
• nginx
• node.js
• and many more

There are also many frameworks and libraries that are used:

• WordPress
• Django
• Ruby on Rails
• Laravel
• Symfony
• CodeIgnitor
• KOA
• Flask
• and many more

Backend-end development can be, roughly, divided into:

• Database Design: the structure of the database
• Application Coding: this is the algorithms, processing, and flow of data through the back-end. This may be even further subdivided.
• Glue Coding: this is code that binds the database, application, and server technology together
• Server: for most small installations, the default configuration of the server is often “good enough” (assuming it has been properly secured). However, for larger servers, or more complex tasks, there can be custom server development and configuration. While this could be lumped together with Application Coding it is a sufficiently complex task that needs to be done independently of everything else

Full-Stack

Full-Stack refers the full-stack of technology, which is everything from the front-end all the way to the back-end.
So full-stack means everything that occurs on the server, in the browser and everything in between.
While there is a lot of technology involved (not to mention design issues), it is possible to learn enough to be a proficient full-stack developer. It is not about learning everything, it is about learning enough to do what you need.

The post Understanding the Difference Between "Front-End", "Back-End", and "Full-Stack". appeared first on Complete, Concrete, Concise.

A Little Background

In the 1980s, Sir Tim Berners-Lee was working at CERNfound it difficult to access documents and information from different computers:

I found it frustrating that in those days, there was different information on different computers, but you had to log on to different computers to get at it. Also, sometimes you had to learn a different program on each computer. So finding out how things worked was really difficult.¹

In 1989, he proposed a hypertext² based system for accessing, sharing, and linking documents. At that time, the standard practice for document organization was a centralized repository. Sir Tim Berners-Lee proposed to do away with that:

[T]he hope would be to allow a pool of information to develop which could grow and evolve with the organisation and the projects it describes. For this to be possible, the method of storage must not place its own restraints on the information. This is why a “web” of notes with links (like references) between them is far more useful than a fixed hierarchical system.³

In 1990, he wrote the first web browser and web server and developed three fundamental technologies that form the foundation of the World Wide Web:

• Hypertext Markup Language (HTML) – this is used to create webpages.
• Uniform Resource Locator (URL) – a string of characters used to identify a resource and its location.⁴
• Hypertext Transfer Protocol (HTTP) – the protocol by which HTML resources are accessed on the Internet.

While Sir Tim Berners-Lee’s primary concern was for a web of interconnected hypertext documents, he realized that many other resources could be interlinked. His implementation was so successful that the World Wide Web includes:

1. Documents – like this webpage
2. Images – Flickr allows people to share and access photos
3. Video – YouTube allows people to share and access videos
4. Audio – Spotify allows people to listen to music
5. Applications – Google Docs is an online word processor

The first website to go live was at CERN in 1991.
By the end of 1991, there were a total of three websites worldwide:

1. CERN
2. The World Wide Web Virtual Library (also at CERN)
3. Stanford Linear Accelerator Center – the first North American website.

By the end of 1992, there were a total of 10 websites worldwide.
As of early 2023, there are almost 2 billion websites.

The World Wide Web

The Internet is the global network of interconnected devices transferring datagrams⁵ using the Internet Protocol (IP). Most datagrams are transported using the Transmission Control Protocol (TCP) protocol.⁶
The World Wide Web (WWW) is a service that runs on the Internet. It is the collection of documents⁷ written in Hypertext Markup Language (HTML)⁸, identified by a Uniform Resource Locator (URL), and transferred using the Hypertext Transfer Protocol (HTTP). All of this is done on the Internet using TCP and IP.
IP identifies devices on the Internet, TCP transports datagrams between them, and HTTP⁹ is used to access content. TCP is like a delivery company that transports goods to the correct address, while HTTP packages resources so that they can be transported by TCP from one device to another. There are other application layer protocols like FTP,¹⁰ SSH,¹¹ SMTP,¹² POP3,¹³ that are used on the Internet, but HTTP is the most commonly used.

HTTP is not the only application layer protocol in use on the Internet, but it is the most visible. Most people don’t notice (or even know about) other application layer protocols such as: FTP,¹⁰ SSH,¹¹ SMTP,¹² POP3,¹³ etc.

Hypertext Markup Language (HTML)

HTML is used to write webpages and web applications. It is often combined with Cascading Style Sheets (CSS) and JavaScript (JS).¹⁴
HTML documents are sent by web servers and rendered by web clients (web browsers) to display the contents of a webpage to a user.
Here’s an example of a simple webpage:

<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Webpage</title>
  </head>
  <body>
    <h1>This is important!</h1>
    <p>Check out this site:</p>
    <a href="//example.com">Example</a>
  </body>
</html>

All HTML documents are composed of HTML tags which (usually) come in pairs. There is an opening tag, like <html> and its corresponding closing tag </html>. These tags markup the document.
HTML tags perform three different functions:

• Structural Markup tags are used to indicate the structure and purpose of the text in the document. We can see that this page is divided into two parts: a <head> that contains metainformation¹⁵ about the page and a <body> that contains the content displayed to the user. In the body, we see there is a heading (<h1>) and a paragraph (<p>).
• Presentational Markup is used to indicate how text should be displayed to the user – for example, bold, italic, strikethrough, etc. There is no presentation markup in this simple webpage. CSS is recommended for presentation markup.
• Hypertext Markup is used to create links inside the document to other documents or resources. In this page, there is a single hypertext link – the anchor tag <a>

In general, HTML documents are plain text documents with special annotations (HTML tags) to describe the structure of the document. Web clients (web browsers) display the content to the user.

Uniform Resource Locator (URL)

A Uniform Resource Locator (URL) is used to access resources on the WWW. It has the following format:

<access protocol>://<host>/<location & resource name>

• access protocol specifies how the resource is to be accessed. For the WWW it is either HTTP or HTTPS¹⁶. There are many different access protocols for the Internet.¹⁷ Technically, you should always include the access protocol when you type the URL for a website. However, browsers (being helpful) will automatically prefix the protocol for you.
• host specifies which device on the Internet contains the resource. It can be an IP address (like 127.0.0.1) or, more commonly, a human readable string (like www.complete-concrete-concise.com) which is translated by a Domain Name System (DNS) into an IP address.
• location & resource name specifies the name of the resource and where it is located. If no resource name is given, web servers return index.html by default.

Let’s consider the following URL:

https://complete-concrete-concise.com/sample/helloworld.html

• The access protocol is https.
• The host is complete-concrete-concise.com.
• The location & resource is /sample/helloworld.html.

Hypertext Transfer Protocol (HTTP)

HTTP responses indicate the status of a request, with two common responses being 200 (OK) for a successful request and 404 (NOT FOUND) for when the requested resource cannot be found.

HTTP is a request-response protocol for data transfer on the World Wide Web. It is most commonly used for transferring hypertext documents, like HTML, but can be used to transfer other types of content.

It operates on a client-server model. The client sends a request to a server. The server then responds to the client. For example, a web browser (client) that requests a webpage from a website (server); the website (server) responds by sending the webpage to the web browser (client).¹⁸

It is a stateless protocol.¹⁹ This means that each HTTP request is independent of all other HTTP requests. In other words, the current request knows nothing about previous requests: all information to fulfill the request must be contained in the request itself.

Two common HTTP requests are GET, used to request a resource from a server, and POST, used to send data to a server, such as when submitting a comment or form.

HTTP responses indicate the status of a request, with two common responses being 200 (OK) for a successful request and 404 (NOT FOUND) for when the requested resource cannot be found.

Summary

1. The World Wide Web is one of many services that run on top of the Internet.
2. The World Wide Web is the global collection of resources written using Hypertext Markup Language (HTML),²⁰ identified using a Uniform Resource Locator (URL), and transferred using the Hypertext Transfer Protocol (HTTP).
3. Clients request resources from servers using HTTP.
4. Servers respond to clients using HTTP.
5. HTTP is transported using TCP between devices adhering to the Internet Protocol.
6. The flexibility of HTTP has contributed to the World Wide Web becoming extremely popular because it handles all types of content: from documents to videos, from images to applications.

Further Reading

If you are interested in learning more about, check out the following resources:

World Wide Web

• Architecture of the World Wide Web

Uniform Resource Locators

• URIs, URLs, and URNs: Clarifications and Recommendations

Hypertext Transfer Protocol

• RFC2616 – this is an older document about the HTTP/1.1 specification. It is a good place to start because it is all in one place.

If you want more information, then the following, more recent, documents give more information. They update RFC2616 and break it down into multiple documents, but may be information overload:

• RFC 7230 Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
• RFC 7231 Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
• RFC 7232 Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests
• RFC 7233 Hypertext Transfer Protocol (HTTP/1.1): Range Requests
• RFC 7234 Hypertext Transfer Protocol (HTTP/1.1): Caching
• RFC 7235 Hypertext Transfer Protocol (HTTP/1.1): Authentication

The post Understanding How the World Wide Web (WWW) Works appeared first on Complete, Concrete, Concise.

The Internet

The Internet is the global network of connected devices that adhere to the Internet Protocol (IP).

The Internet Protocol allows devices to connect to the Internet and communicate with other devices connected to the Internet. It is a specification for a basic unit of data transfer or datagram.

The IP datagram consists of a header and a payload.

The header has a source address and a destination address. As a result, there is no true anonymity on the Internet, since the transfer of information requires knowing the source and destination of the information transfer¹.
The payload is the information part of the packet and its content depends on what is being transmitted. It is at the payload level that the World Wide Web and other Internet services (like email, Voice over IP (VoIP), File Transfer Protocol (FTP), etc) exist.
The IP Header also includes a transport protocol. This controls how the datagram is transported through the Internet. Two common transport protocols are: Transmission Control Protocol (TCP) and User Datagram Protocol (UDP).
TCP is a robust protocol that verifies the packet is received. If the packet is not received, it is retransmitted.
UDP is less robust – it doesn’t verify that the packet is received. This may seem strange, but some data transfers don’t need to be robust – they can tolerate lost packets. For example, video streaming can survive the occasional “lost” data packet.

The use of TCP on the Internet is sometimes referred to as tcp/ip or TCP/IP. This is read as TCP over IP.

IP Addresses

Each device connected to the Internet must be uniquely identifiable². This is done by assigning each device on the Internet a unique number called an IP Address. There are two types of IP addresses: IPv4 and IPv6 – they are not compatible.³

IPv4 is the older and most commonly used (for now) addressing scheme. Each device on the Internet is assigned a unique identifier. This identifier is a 32 bit number. This means there are 2³² different numbers available. Which means a maximum of 4294967296 devices can be connected to the Internet when using IPv4 addressing⁴.
The addresses are written in dotted notation. This is done by dividing the 32 bit number into four 8 bit octets.⁵ Each octet is written in decimal notation separated by a period. IPv4 addresses look similar to these examples: 127.0.0.1 or 192.168.1.101, or 10.184.216.34.
IPv6 is a newer addressing scheme and was introduced to expand the number of available IP addresses.⁶ IPv6 addresses are 128 bits long and allow for 2¹²⁸ unique addresses⁷.
IPv6 addresses are written differently from IPv4 addresses. The 128 bit address is divided into eight 16 bit hextets.⁸ These are written in hexadecimal⁹ notation and separated by colons¹⁰. IPv6 addresses look similar to these examples: ::1¹¹, or FE80:0000:0000:0000:0202:B3FF:FE1E:8329

Clients and Servers

Devices on the Internet are classified as clients or servers¹².
A client requests resources from a server. It tends to have a transitory connection to the Internet and may not always be available.
A server provides (serves) resources to clients. It tends to be permanently connected to the Internet and always available.

You can think of the relationship between clients and servers as being similar to the relationship between students and teachers. The students (clients) request information from the teacher (server) and the teacher (server) provides information to the students (clients).

If clients wish to communicate with other clients, the information is sent first to the server and then the server forwards the information to other clients.
There is a third relationship: peer-to-peer (P2P). Like clients, peers tend to be characterized by transitory connections to the Internet.
Peers are devices that connect directly with other devices instead of going through a server. P2P devices act both as server and client. Communication between peers is direct and not mediated by a server.

Domain Names

Most people rarely (if ever) access resources on the Internet by entering IP Addresses. Addresses like 192.168.1.1 might be fine for computers but they are not easy for humans to use. A Domain Name is a string of characters (preferably easy to remember) that act as an alias for an IP Address.
Domain names are hierarchically organized. The Internet Corporation for Assigned Names and Numbers (ICANN) manages the structure of domain names on the Internet.
Domains are composed of two parts: the hostname and the top-level domain.¹³
For example: complete-concrete-concise is the hostname and .com is the top-level domain.
The mapping from a domain name into an IP Address is performed by a Domain Name System Server (DNS Server). The domain name is sent to the DNS Server and the server returns the associated IP Address.¹⁴
Globally, there are 13 root servers from which all domain names are resolved.¹⁵

Summary

1. The Internet is the global network of connected devices which adhere to the Internet Protocol.
2. The Internet Protocol is a datagram composed of a header and a payload.
3. The IP header consists of a source address, destination address, and a transport protocol.
4. Every device connected to the Internet requires a unique identifying address.
5. The IP payload carries the data for a specific service. This might be the World Wide Web, email, Voice over Internet, or any other service.
6. The Internet tends to be hierarchical with a client-server model.
7. Clients request services and resources from the Internet and tend to have a transitory presence on the Internet.
8. Servers provide services and resources on the Internet and tend to have a permanent presence on the Internet.
9. Domain names are a (human readable) way of accessing resources on the Internet. Domain names are sent to a global network of DNS Servers that return the IP Address associated with the domain.

The post Understanding How the Internet Works appeared first on Complete, Concrete, Concise.