In the previous tutorial, you have seen how to combine CSS selectors to precisely specify an HTML element for styling and the rules by which the specificity of a CSS selector is calculated.

You will learn about combinators for combining CSS selectors to more precisely select HTML elements for styling.

Contents

1. Child Combinator
2. Descendant Combinator
3. Next Sibling Combinator
4. Subsequent Sibling Combinator
5. Closing Thoughts
6. References

Child Combinator

You were introduced to the Child Combinator in the first part of this series on Advanced CSS Selectors:

.column-left > .card > .headline {
  background-color: lightgreen;
}

The combinator > (greater-than symbol¹) specifies a direct parent-child relationship.

In the example above, it selects an element with the class of .headline only if it is an immediate child of an element with the class of .card AND the element with the class of .card is an immediate child of an element with the class of .column-left.

It has a specificity of 0:3:0.

Consider the following HTML code and the selector declared above:

<!--
  The <p> tag will be selected because the
  parent-child relationships match the selector.

  You could also use the selector:

  div > div > p

  That selector has a specificity of 0:0:3
-->
<div class="column-left">
  <div class="card">
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag will NOT be selected because the
  parent-child relationships do not match the
  selector

  To select the <p> tag, the selector could be:

  .column-left  > div > .headline

  That selector has a specificity of 0:2:1
-->
<div class="column-left">
  <div>
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag will NOT be selected because the
  parent-child relationships do not match the
  selector.

  To select the <p> tag, the selector could be:

  .card > .column-left  > .headline

  That selector has a specificity of 0:3:0
-->
<div class="card">
  <div class="column-left">
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag WILL be selected because the
  parent-child relationships match the selector.

  Both <p> tags are children of the parent with
  the class .card. The position of the child
  within the parent doesn't affect its selection.
  All that matters is that it is a direct child.
-->
<div class="column-left">
  <div class="card">
    <p>Some random text.</p>
    <p class="headline">A Headline</p>
  </div>
</div>

<!--
  The <p> tag will NOT be selected because the
  parent-child relationships do not match the
  selector.

  To select the <p> tag, the selector could be:

  .column-left > .card > div > .headline

  That selector has a specificity of 0:3:1

  It could also be:

  div > div > div > p

  That selector has a specificity of 0:0:4
-->
<div class="column-left">
  <div class="card">
    <div>
      <p class="headline">A Headline</p>
    </div>
  </div>
</div>

While I wrote the selector with a space around the combinator, there is no need for that. The following child selectors are also valid:

.column-left>.card.>.headline {

}

div>div>p {

}

While the direct selection method discussed in the previous tutorial can never have an #ID specificity greater than 1 (because an HTML element can never have more than 1 ID associated with it), with combinators, it is possible to have an #ID specificity greater than 1. Consider the following (based on the More Advanced float Example):

#wrapper > #title {
  /* specificity = 2:0:0 */
}

#wrapper > #navbar {
  /* specificity = 2:0:0 */
}

#wrapper > #content > .column-left > .card > .headline {
  /* specificity = 2:3:0 */
}

Descendant Combinator

This is the most commonly used combinator.

The descendant combinator is more general than the child combinator and is useful for styling different sections of your document without having to specify the exact parent-child relationships.

As you recall, when you create your HTML page, you divide the page into various sections. Common sections include:

• Header
• Navigation Bar
• Main Body
• Side Bar
• Footer

You might like to have common styles within a section, but not have to specify the exact relationship for every element in a section, but give a more general “all p tags in the Main Body, regardless of how the main body is subdivided, have the following styling”.

Consider the clone page created in an earlier lesson, it had a #content section that contained three columns:

You can style ALL p elements in the document using:

/*
  applies to all <p> tags, unless
  overridden by a more specific selector
*/
p {
  /* specificity = 0:0:1 */
}

You can also style all p elements that are immediate children of the #content section using the child combinator:

/*
  Only applies to <p> elements that are
  immediate children of a #content element,
*/
#content > p {
  /* specificity = 1:0:1 */  
}

But the child combinator will not select p elements if they are nested deeper:

<div id="content">
  <p>This will be selected.</p>
  <div class="aside">
    <p>This will NOT be selected</p>
  </div>
</div>

The descendant combinator allows you to create a selector for ALL p elements located inside a #content container – you can select immediate children, grandchildren and more deeply nested elements. The descendant combinator is a space character:²

/*
  The descendant combinator is the space character.
*/
#content p {
  /* specificity = 1:0:1 */  
}

/*
  The space character acts as a descendant combinator
  when it is alone. If you write a child combinator
  with spaces it is a child combinator, not a
  child + descendant combinator.
*/
#content > p {
  /* specificity = 1:0:1 */
}

This top selector will select all the p elements in the HTML example above, but if they are located anywhere inside a block with an ID of #content.

The bottom selector will only select those the p elements which are immediate children of a block with an ID of #content.

This is useful for defining styles that are localized to particular sections of your webpage without having to rigidly follow the structure of your page:

#header p {
  /*
    applies to all <p> tags inside #header
    specificity = 1:0:1
  */
}

#navbar a{
  /*
    applies to all links inside #navbar
    specificity = 1:0:1
  */
}

#content .sidebar img {
  /*
    applies to all images located anywhere
    inside .sidebar, when .sidebar is
    located anywhere inside #content
    specificity = 1:1:1
  */
}

#content .aside > img {
  /*
    applies to images inside #content that
    are direct children of .aside
    specificity = 1:1:1
  */
}

#footer img {
  /*
    applies to all images inside #footer
    specificity = 1:0:1
  */
}

Remember to pay attention to the specificity of your selector:

#content p {
  /* specificity 1:0:1 */
}

.aside > p {
  /* specificity 0:1:1 */
}

/*
  Even though the bottom selector looks more "specific"
  than the top selector, because the top selector says
  "select any <p> found anywhere inside #content" and
  the bottom selector says "only select <p> if it is
  an immediate child of .aside".

  However, the calculated specificity of the top selector
  is greater than the specificity of the bottom selector.
*/

Next Sibling Combinator

This is also known as the first sibling combinator and adjacent sibling combinator.

The first two combinators allow you to select HTML elements based on how they are contained within other HTML elements – either as children, grandchildren, great-grandchildren, etc.

The next sibling combinator allows you to select HTML elements in relation to other elements at the same nesting level. Consider the following:

<!-- This is a parent element -->
<div>
  <!--
    The <h1>, <p>, <p>, <ol>, <img>, and <p>
    are siblings and children of <div>
  -->
  <h1>A Header</h1>
  <p>A paragraph.</p>
  <p>Another paragraph</p>
  <!--
    While <ol> is a child of <div> and a sibling
    to <h1>, <p>, <p>, <img>, and <p>, it is also
    the parent of the <li> elements.
  -->
  <ol>
    <!-- All the <li> elements are siblings -->
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
  <img src="/valid/image.jpg">
  <p>Maybe a caption?</p>
</div>

Consider the following rules using the next sibling combinator (which is the plus ‘+’ symbol):

/*
  Select a <p> element if it immediately follows
  an <h1> element.

  You might want the first paragraph following
  <h1> to be special in some way - perhaps a
  slightly larger font or italicized. This could
  also be done by applying a class to the first
  <p> element.
*/
h1 + p {
  /* specificity = 0:0:2 */
}

/*
  Select a <p> element if it immediately follows
  an <img> element.

  You might use the convention that each image
  in your documents must be followed by a caption.
  You could also apply a class (like .caption) to
  the <p> element instead.
*/
img p {
  /* specificity = 0:0:2 */
}

/*
  Select an <li> element if it immediately follows
  an <li> element.

  Applied to the HTML code above, it will
  select the <li>s containing 'Item 2' and
  'Item 3' - this is because:
  - <li>Item 1</li> is the first li in the
    rule and <li>Item 2</li> is the second
    li in the rule - the one that is
    selected.
  - then <li>Item 2</li> is the first li in
    the rule and <li>Item 3</li> is the second
    li in the rule - the one that is
    selected.
  - when <li>Item 3</li> is evaluated as the
    first li in the rule, because there is
    no subsequent li, this selector isn't
    applied to anything.
*/

li + li {
  /* specificity = 0:0:2 */
}

Let’s apply these selectors to the HTML code above:

h1 + p {
  font-size: 20px;
  font-style: italic;
}

img + p {
  font-weight: bold;
  text-align: center;
}

/*
  Remove the yellow background from all list
  items, except the first one.
*/
li + li {
background-color: transparent;
}

/*
  Select all list items and set the
  background to yellow.

  I'm putting this rule here to demonstrate
  selector specificity.
*/
li {
  background-color: yellow;
}

Results in the following output:

Subsequent Sibling Combinator

This is also known as the general sibling combinator and following sibling combinator⁴.

It is similar to the next sibling combinator in specifying the relationship between child elements, except that:

1. the selected element does not need to be adjacent to the first element
2. it selects ALL subsequent elements that match

The combinator is the tilde (~) symbol.

Consider:

/*
  Select all <p> elements following an <h1>
  element as long as the <p> elements are
  all siblings with the <h1> element.
*/
h1.important ~ p {
  /* specificity = 0:1:2 */
  background-color: yellow;
}

When applied to the following code:

<p>This is a paragraph.</p>
<p>So is this.</p>
<h1 class="important">This is important!</h1>
<p>This paragraph is selected.</p>
<p>So is this one.</p>
<div>
  <p>These paragraphs are not selected.</p>
  <p>Because they are not siblings.</p>
  <p>They are nested inside a div.</p>
</div>
<p>But this paragraph is selected.</p>

Results in the following:

Closing Thoughts

1. The four types of combinators allow you to combine various selectors to create selectors based on their relationships. This allows for more powerful selection.
2. The child combinator allows you to precisely specify the parent-child relationship of the elements:

parent > child > grandchild {

}

3. The descendant combinator allows you to target elements based on whether they are nested inside other elements without caring about the specific details of the nesting:

outer-element inner-element {

}

4. The next sibling combinator allows you to select an element if it immediately follows another element:

first-element + adjacent-element {

}

5. The subsequent sibling combinator allows you to select all elements that follow the first element – as long as they are siblings:

key-element ~ following-elements {

}

6. The combinators can be combined and you can more use more specific combinations of html elements, IDs, classes, and attributes:

div#main > p.important + [reversed] {

}

7. There is no combinator that allows you to select preceding elements:

/*
  There is no select parent combinator.

  For example, you cannot style the parent
  based on the child tag.
*/
div < p {
  /* This does NOT exist */
}

/*
  There is NO preceding adjacent sibling
  combinator.

  For example, you could not select an <h1>
  element that is followed by a <p> element
*/
h1 <+ p {
  /* This does NOT exist */
}

/*
  There is no preceding sibling combinator.

  For example, you cannot select the <p>
  elements that occur before an <h1> element.
*/
h1 <~ p {
  /* This does NOT exist */
}

/*
  There is no select antedent combinator.

  For example, you cannot style an enclosing
  element based on an enclosed element.
*/
#main << .some-deeply-embedded-element {
  /* This does NOT exist */
}

8. While it may seem unfair to not allow selecting preceding elements or parents by their children or enclosing elements from interior elements, recall that the page is rendered from top to bottom. Rendering preceding elements would require rendering the page from bottom to top or from innermost elements to outermost elements and would make application of CSS rules far more complex regarding whether top-down, bottom-up, or inner-outer rules take precedence. As well, processing from the inner elements to the outer elements is computationally more expensive – making page renders slower.
9. You don’t need to use all combinators all the time. In fact, the descendant combinator is the most commonly used one. An analysis of 4632 CSS rules⁵ from 5 different websites⁶ revealed the following combinator distribution:⁷
   • 78.5% use the descendant combinator
   • 2.9% use the child combinator
   • 0.2% use the next sibling combinator
   • 0% use the subsequent sibling combinator
   • 18.4% are single item selector rules⁸
10. To see some real world selector examples using combinators, consider the following from the WordPress 2019 Theme:⁹

/*
  Styles an element with the class .comments-title
  that immediately follows a sibling element with
  an ID of #respond that is located at any level
  inside a block with a class of .comment-form-flex.

  specificity = 1:2:0
*/
.comment-form-flex #respond + .comments-title {
  display: block;
}

/*
  Styles all elements that are direct children of
  a block with the class .comments-area.

  You've seen calc() in the lesson
  "CSS – How and When to Use Float".

  'rem' will be covered in a future tutorial,
  but it is a measurement unit like px or %.

  specificity = 0:1:0
*/
.comments-area > * {
  margin-top: calc(2 * 1rem);
  margin-bottom: calc(2 * 1rem);
}

/*
  Styles any <img> nested within the three classes
  laid out below.

  specificity = 0:3:1
*/
.entry .post-thumbnail .post-thumbnail-inner img {
  position: relative;
  display: block;
  width: 100%;
}

References

1. Descendant Combinator
2. Child Combinator
3. Next Sibling Combinator
4. Subsequent Sibling Combinator

The post CSS Combinators – Advanced CSS Selectors – Part 3 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.

The float property was originally introduced to allow text to flow around image elements – thus eliminating a lot of white space and making for more esthetically pleasing documents.

Contents

1. float
2. Practical Considerations
3. Summary
4. Playing Around
5. References

float

The float property can take the values of left, right or none. By default, all HTML elements have float set to none.
Consider the following code snippet which places an image on the left side of some text:

<p><img src="26-dog.jpg">Without floating the image,
    there is a lot of vertical white space along the
    side of the image. It is not esthetically pleasing.
  </p>

Without floating the image, you have a lot of vertical white space along the side of the image. It is not esthetically pleasing.

Consider the same image to which float:left has been applied:

When you apply float to the image, the text flows around the image. You no longer get a lot of ungainly white space.
Of course, some additional padding or margin should be applied to the image or text so the text doesn’t hug the image so closely.
Overall, it looks nicer.

A similar effect is obtained when float:right is applied to the image:

When you apply float to the image, the text flows around the image. You no longer get a lot of ungainly white space.
Of course, some additional padding or margin should be applied to the image or text so the text doesn’t hug the image so closely.
Overall, it looks nicer.

Practical Considerations

While it seems to work well, it has problems that become evident for anything but the simplest of layouts.
Consider the following styling:

.border {
    border: solid 2px black;
  }
  
  .yellow-bg {
    background-color: yellow;
  
  }
  
  .lime-bg {
    background-color: lime;
  
  }
  
  .orange-bg {
    background-color: orange;
  
  }
  
  .cyan-bg {
    background-color: cyan;
  
  }
  
  .float-left {
    float: left;
  }

Applied to the following HTML code:

<p id="paragraph1" class="border yellow-bg">
    <img src="26-dog.jpg" class="float-left">
    To make the problem stand out, each paragraph is
    uniquely identified and has a border and background
    colour styling applied.</p>
  
  <p id="paragraph2" class="border lime-bg">
    It should be immediately obvious that the image is
    no longer contained within the paragraph it was
    embedded.</p>
  
  <p id="paragraph3" class="border orange-bg">
    In fact, it is spilling over several paragraph
    blocks, as if it were laid on top of them.</p>
  
  <p id="paragraph4" class="border cyan-bg">
    But it doesn't cover up the words or content.
   </p>

Gives the following results:

In the next tutorial, we will learn why this happens and what we can do about it.

Summary

1. The float can be used to position an element to the left or right side of a page.
2. Content (usually text) will flow around the floated element.

Playing Around

The best way to learn is to play around with what you have learned.
Try using float. The easiest and most visual way is to use small images, although you can also create coloured boxes and use those.
Apply it to a single HTML element, to multiple HTML elements. What happens when you nest floated elements?
The idea is to get a feel for how float behaves when you use it.

References

1. float

The post CSS – Introducing float appeared first on Complete, Concrete, Concise.

Contents

1. An Example Using divs
2. div Source Code
3. Notes
4. span Challenges

An Example Using divs

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

div Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>A  Page &lt;Div&gt;ided</title>
    <meta charset="utf-8"  />

    <style>

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

      .header, .footer {
        text-align: center;
        padding: 16px 0;
      }

      .header {
        background-color: blue;
        color: white;
      }

      #title {
        font-size: 32px;
      }

      #subtitle {
        font-size: 24px;
      }

      .content {
        font-size: 16px;
        text-align: justify;
      }

      .footer {
        color: blue;
        font-size: 24px;
        background-color: yellow;
      }

    </style>

  </head>
  <body>

    <div class="main">
      <div class="header">
        <p id="title">A Page &lt;Div&gt;ided</p>
        <p id="subtitle">
          Handling HTML one &lt;div&gt; at a time
        </p>
      </div>

      <div class="content">
        <p>
          Quam stultum est aetatem disponere ne crastini
          quidem dominum! o quanta dementia est spes
          longas inchoantium: emam, aedificabo, credam,
          exigam, honores geram, tum deinde lassam et
          plenam senectutem in otium referam.
        </p>
        <p>Omnia, mihi crede, etiam
          felicibus dubia sunt; nihil sibi quisquam de
          futuro debet promittere; id quoque quod
          tenetur per manus exit et ipsam quam premimus
          horam casus incidit. Volvitur tempus rata
          quidem lege, sed per obscurum: quid autem ad
          me an naturae certum sit quod mihi incertumest?
        </p>
        <ol>
          <li>Stat quidem terminusnobis ubi illum
            inexorabilis fatorum necessitas fixit, sed
            nemo scit nostrumquam prope versetur a
            termino; sic itaque formemus animum tamquam
            ad extremaventum sit.
          </li>
          <li>Nihil differamus; cotidie cum vita paria
            faciamus.
          </li>
          <li>Maximum vitae vitium est quod inperfecta
            semper est, quod [in] aliquid ex illa
            differtur.
          </li>
          </li>Qui cotidie vitae suae summam manum
            inposuit non indiget tempore;ex hac autem
            indigentia timor nascitur et cupiditas futuri
            exedens animum. Nihil est miserius dubitatione
            venientium quorsus evadant; quantum sit illud
            quod restat aut quale sollicita mens
            inexplicabili formidine agitatur.
          </li>
        </ol>
      </div>

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

    </div>

  </body>
</html>

Notes

1. Most of the content is the same as the previous example.
2. The webpage is sectioned into 4 parts:
   1. a main div] which is used to contain and centre everything else on the page.
   2. A header div which contains heading content that is common across all pages.
   3. A content div which contains the page content.
   4. A footer div which contains common content that would be common across all pages.
3. While classes were used for the main. header, content, and footer sections, IDs would have been a better option. Since there should only be one of each on the page.
4. The content is justified.
5. Common styling for the .header and .footer were gathered together. Individual .header and .footer styling were applied later. This could also have been done using addition classes. There are always many ways to do things, but the general guideline should be to try and minimize:
   1. the number of duplications – if you find yourself creating lots of classes with the same styling information, perhaps you should consider gathering the styling information together. You could extract it into a common class, or into a common wrapper.
   2. the number of specific styling classes you apply to each HTML element. While you can have a long chain of styling classes for an HTML element you should ensure that it is necessary.

   The general goal is to make your pages easier to create and easy to maintain. Always ask yourself, “How much code would I have to change if all the styling is changed?” It is always a balance and something that comes with experience.

span Challenges

You were also asked how would you create the following span styles:

It could be done with these classes:

.red-underline {
  border-bottom: 2px solid red;
}

.four-char-space {
  border-bottom: 2px solid black;
  width: 64px;
  display: inline-block;

}

The red underline should be obvious – simply apply a red border to the bottom of the span.
The space for 4 characters is probably not so obvious:

1. The width is set to 64px based on the assumption that the font size is 16px (I could have set it explicitly just to be sure). Perhaps it should have been made 96px to have additional padding on either side.
2. The display is set to inline-block because inline elements ignore any applied width or height values.
3. The width has to be set because you can’t insert a bunch of spaces. Remember that HTML automatically collapses all white space into a single whitespace character.

The post A Page <div>ided appeared first on Complete, Concrete, Concise.

The HTML elements you have seen can be best described as content elements because they either marked up specific content – like paragraphs, lists, headings, or hyperlinks – or they add semantic meaning to the content – strong, em, i, or mark. But they don’t group together related items – all elements are pretty much independent of each other.
HTML provides a number of elements that allow styling without semantic meaning or grouping together related items.

Contents

1. span
2. div
3. Centering Blocks Using margin: auto;
4. Summary
5. Playing Around
6. References

span

The span element behaves very much like strong, em, i, ormark: it is inline and it can be applied to a bunch of text:

<p>This is some <strong>strong text</strong></p>
<p>This is some <i>italic text</i></p>
<p>This is some <span>span text</span></p>

Since the span element has no styling applied, the text it encloses will use whatever style is applied to the p tag.
More importantly, the span element has no semantic meaning. Any styles you apply to a span are decorative – User Agents (browsers) will not infer anything special about that text.
All the colour coding used in these pages is done using span.
Consider:

.html-tag {
  background-color: #FCFCFC;
  border: 1px solid black;
  border-radius: 5px;
  padding: 0 3px;
}

.css-property {
  font-size: 18px;
  font-weight: bold;
  font-family: monospace;
  color: blue;
  margin: 0 3px;
}

When applied to the following text:¹

<p>The paragraph is a common HTML element, it is
  written <span class="html-tag">&lt;p&gt;</span>.
</p>

<p>The eagle eyed will notice I use the CSS property
  <span class="css-property">border-radius</span>
  without having introduced it before.
</p>

Results in the following output:

By default it is an inline element, although you can change this with the display property. You might change it to inline-block if you need to set its width or height. There is no need to change it to block because that is what div is for.

div

The div element is similar the span element, except that it is a block display element. Like the span element, it has no semantic meaning. It is widely used for grouping things together.²
Consider the HTML code used to display the output results above:

<div class="output">
  <p>The paragraph is a common HTML element, it is
    written <span class="html-tag">&lt;p&gt;</span>.
  </p>

  <p>The eagle eyed will notice I use the CSS property
    <span class="css-property">border-radius</span>
    without having introduced it before.
  </p>
</div>

The styled paragraphs are contained inside a div block styled with the .output class.
Having a div as the first element inside the body is a very common programming pattern:

<body>
  <div class="main">
    A whole bunch of html
  </div>
</body>

It should be obvious how this can be applied to the previous coding exercise – instead of styling the body element, you would style the .main class.
Before HTML5, many websites had the following basic structure (actually, many websites still use this basic structure):

<body>
  <div class="main">

    <div class="header">
      This section contains the common information
      found at the top of the every webpage.

      Stuff like the site name and logo.
    </div>

    <div class="navigation">
      This is the navigation bar. Sometimes is may
      be included in the "header", other times it
      is on its own.

      If the navigation is common to all pages, then
      it should go inside the "header".
    </div>

    <div class="content">
      There are, typically, a lot of <div>s in this
      section and quite a lot of complicated structuring
      code.
    </div>

    <div class="footer">
      This section contains the common information
      found at the bottom of the every webpage.

      Stuff like the copyright, privacy, contact,
      legal terms, small print, etc.
  </div>
</body>

Using colourful visual styling, it looks something like this:

By default it is a block element, although you can change this with the display property. With dynamic pages (using JavaScript), you might toggle the property between none and block to hide / reveal content. There is no need to change it to inline or inline-block because that is what span is for.

Centering Blocks Using margin: auto;

The easiest way to centre a block element is:

• give it a width and
• set the margin to auto.

This will cause the User Agent (browser) to calculate appropriate margins for the HTML element.
In general, the rules governing auto work like this:

1. For inline items, the calculated auto margin is always 0px.
2. For block items, the calculated top and bottom auto margin is always 0px.
3. For block items with a box-sizing value of content-box with a specified width: if the total width of the content + padding + border is less than the width of the container it is in, then equal left and right margins will be applied. Otherwise the margins will be 0px.
4. For block items with a box-sizing value of border-box with a specified width: if the total width of the element is less than the width of the container it is in, then equal left and right margins will be applied. Otherwise the margins will be 0px.

It is most commonly written as:

.centre {
  margin: auto;
}

Some consider it better to use the 2 parameter version (the order is top and bottom, left and right):

.centre {
  margin: 0 auto;
}

You can also use it in the 4 parameter version (the order is top, right, bottom, left):

.centre {
  margin: 0 auto 0 auto;
}

You can always apply top and bottom margins – if you like.
If a margin value is 0, it does not need the px suffix. This is true for all measurement units because: zero means zero.
Applying any of the above styles to a 200px by 200px div element (also styled with a green background), results in:

Vertical centering is more difficult because HTML elements automatically expand vertically to accommodate content. So, technically, there is no vertical centre of a block element. In future tutorials, we will look at vertically centering content.

Summary

1. span is an inline HTML element you can use to style content without giving the content any semantic meaning.
2. div is a block HTML element that is used to group together other elements. It has no semantic meaning.
3. When laying out your HTML document, you should use a divide and conquer approach.
4. Many HTML documents are divided into header, navigation, content, and footer sections.
5. Applying the margin: auto style to a block element will cause it to be horizontally centred inside whatever container it is located – provided it is smaller than the container.

Playing Around

The best way to learn is to play around with what you have learned.
Take the webpage you wrote in the previous exercise and revise it so it uses div elements to structure and contain the content. Also apply the margin: auto style to the main container to centre the content. You should notice that when you resize the browser window, the document content remains centred (of course, if you make your browser window smaller than the content width it won’t remain centred).
Knowing about the span element, create a few custom styles and apply it to parts of your document. Experiment with different font size, weights, style, colours, borders, etc.
How would you create the following styles:

References

• span
• div
• margin: auto

The post Sectioning Using HTML and Auto Centering Content appeared first on Complete, Concrete, Concise.

At the end of the previous tutorial, you were asked to code a page using HTML5 and CSS3 to create a page that looks something like this:

Contents

1. Design Assumptions
2. Method 1
   1. Notes 1
3. Method 2
   1. Notes 2
4. Method 3
   1. Notes 3

Design Assumptions

This page is not responsive¹ and is coded for a specific resolution:

1. The examples are coded for a screen resolution of 1366×768 pixels.²
   • If your browser window resolution is lower, the example content will appear right of centre. It may even be off the display and require scrolling to the right.
   • If your browser window resolution is higher, the example content will appear left of centre.
   • If your browser window resolution is 1366×768, then the example content will appear centred.
2. The content width is 566 pixels.³
   • This leaves 800 pixels to be split between the left and right margin or 400px for the left and 400px for the right.
3. The font-size is set to 16px
4. The font-family is sans-serif.

Method 1

You can see this code in action here.

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

    <style>

      #title {
        font-size: 32px;
      }

      .centre {
        text-align: center;
      }

      .content {
        font-family: sans-serif;
        font-size: 16px;
        width: 566px;
        margin-left: 400px;
        box-sizing: border-box;
      }

      #footer {
        color: blue;
        font-size: 24px;
        padding: 0px 16px;
      }

    </style>

  </head>
  <body>

    <p id="title" class="centre content">Web Page Sample #1</p>

    <p class="content">
      Quam stultum est aetatem disponere ne crastini
      quidem dominum! o quanta dementia est spes
      longas inchoantium: emam, aedificabo, credam,
      exigam, honores geram, tum deinde lassam et
      plenam senectutem in otium referam.
    </p>
    <p class="content">Omnia, mihi crede, etiam
      felicibus dubia sunt; nihil sibi quisquam de
      futuro debet promittere; id quoque quod
      tenetur per manus exit et ipsam quam premimus
      horam casus incidit. Volvitur tempus rata
      quidem lege, sed per obscurum: quid autem ad
      me an naturae certum sit quod mihi incertumest?
    </p>
    <ol class="content">
      <li>Stat quidem terminusnobis ubi illum
        inexorabilis fatorum necessitas fixit, sed
        nemo scit nostrumquam prope versetur a
        termino; sic itaque formemus animum tamquam
        ad extremaventum sit.
      </li>
      <li>Nihil differamus; cotidie cum vita paria
        faciamus.
      </li>
      <li>Maximum vitae vitium est quod inperfecta
        semper est, quod [in] aliquid ex illa
        differtur.
      </li>
      </li>Qui cotidie vitae suae summam manum
        inposuit non indiget tempore;ex hac autem
        indigentia timor nascitur et cupiditas futuri
        exedens animum. Nihil est miserius dubitatione
        venientium quorsus evadant; quantum sit illud
        quod restat aut quale sollicita mens
        inexplicabili formidine agitatur.
    </li>
  </ol>
  <p id="footer" class="content centre ">
    Copyright 2018
  </p>
  </body>
</html>

Notes 1

• A .content class was created to apply the necessary left margin and content width to each HTML element that needs to be in the “content zone” on the page.
• While this works, it is a bit clunky because the class has to be applied to every single HTML element that goes in that content zone.
• A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
• The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
• The #header and #footer were given some individual styling.
• Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
• The box-sizing property was set to border-box because ordered lists have padding on the left side (this is where the numbers go), which would make the width of the ol element as wide as width of the content + the width of any padding + the width of any border – which means it would be wider than the specified 566px. Of course, the ol element could be styled to have a narrower content width to compensate for the internal padding.⁴

Method 2

You can see this code in action here.

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

    <style>

      #title {
        font-size: 32px;
      }

      .centre {
        text-align: center;
      }

      h1, p, ol {
        font-family: sans-serif;
        font-size: 16px;
        width: 566px;
        margin-left: 400px;
        box-sizing: border-box;
      }

      #footer {
        color: blue;
        font-size: 24px;
        padding: 0px 16px;
      }

    </style>

  </head>
  <body>

    <p id="title" class="centre ">Web Page Sample #2</p>

    <p>
      Quam stultum est aetatem disponere ne crastini
      quidem dominum! o quanta dementia est spes
      longas inchoantium: emam, aedificabo, credam,
      exigam, honores geram, tum deinde lassam et
      plenam senectutem in otium referam.
    </p>
    <p>Omnia, mihi crede, etiam
      felicibus dubia sunt; nihil sibi quisquam de
      futuro debet promittere; id quoque quod
      tenetur per manus exit et ipsam quam premimus
      horam casus incidit. Volvitur tempus rata
      quidem lege, sed per obscurum: quid autem ad
      me an naturae certum sit quod mihi incertumest?
    </p>
    <ol>
      <li>Stat quidem terminusnobis ubi illum
        inexorabilis fatorum necessitas fixit, sed
        nemo scit nostrumquam prope versetur a
        termino; sic itaque formemus animum tamquam
        ad extremaventum sit.
      </li>
      <li>Nihil differamus; cotidie cum vita paria
        faciamus.
      </li>
      <li>Maximum vitae vitium est quod inperfecta
        semper est, quod [in] aliquid ex illa
        differtur.
      </li>
      </li>Qui cotidie vitae suae summam manum
        inposuit non indiget tempore;ex hac autem
        indigentia timor nascitur et cupiditas futuri
        exedens animum. Nihil est miserius dubitatione
        venientium quorsus evadant; quantum sit illud
        quod restat aut quale sollicita mens
        inexplicabili formidine agitatur.
    </li>
  </ol>
  <p id="footer" class="centre ">
    Copyright 2018
  </p>
  </body>
</html>

Notes 2

• This method avoids using a .content class and directly styles the HTML styles elements so they have the necessary offset (margin-left) and content width.
• This saves applying a .content class to every element.
• It has the disadvantage that if you try to nest one of the styled elements inside another (for example, a p inside the ol), you would need to apply a class to clear the margin-left property.
• A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
• The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
• The #header and #footer were given some individual styling.
• Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
• The box-sizing property was set to border-box because ordered lists have padding on the left side (this is where the numbers go), which would make the width of the ol element as wide as width of the content + the width of any padding + the width of any border – which means it would be wider than the specified 566px. Of course, the ol element could be styled to have a narrower content width to compensate for the internal padding.

Method 3

You can see this code in action here.

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

    <style>

      body {
        font-family: sans-serif;
        font-size: 16px;
        width: 566px;
        margin-left: 400px;
        box-sizing: border-box;
      }

      #title {
        font-size: 32px;
      }

      .centre {
        text-align: center;
      }

      #footer {
        color: blue;
        font-size: 24px;
        padding: 0px 16px;
      }

    </style>

  </head>
  <body>

    <p id="title" class="centre ">Web Page Sample #3</p>

    <p>
      Quam stultum est aetatem disponere ne crastini
      quidem dominum! o quanta dementia est spes
      longas inchoantium: emam, aedificabo, credam,
      exigam, honores geram, tum deinde lassam et
      plenam senectutem in otium referam.
    </p>
    <p>Omnia, mihi crede, etiam
      felicibus dubia sunt; nihil sibi quisquam de
      futuro debet promittere; id quoque quod
      tenetur per manus exit et ipsam quam premimus
      horam casus incidit. Volvitur tempus rata
      quidem lege, sed per obscurum: quid autem ad
      me an naturae certum sit quod mihi incertumest?
    </p>
    <ol>
      <li>Stat quidem terminusnobis ubi illum
        inexorabilis fatorum necessitas fixit, sed
        nemo scit nostrumquam prope versetur a
        termino; sic itaque formemus animum tamquam
        ad extremaventum sit.
      </li>
      <li>Nihil differamus; cotidie cum vita paria
        faciamus.
      </li>
      <li>Maximum vitae vitium est quod inperfecta
        semper est, quod [in] aliquid ex illa
        differtur.
      </li>
      </li>Qui cotidie vitae suae summam manum
        inposuit non indiget tempore;ex hac autem
        indigentia timor nascitur et cupiditas futuri
        exedens animum. Nihil est miserius dubitatione
        venientium quorsus evadant; quantum sit illud
        quod restat aut quale sollicita mens
        inexplicabili formidine agitatur.
    </li>
  </ol>
  <p id="footer" class="centre ">
    Copyright 2018
  </p>
  </body>
</html>

Notes 3

• This method styles the body element to have the appropriate left margin and necessary width.
• Since the body element acts as a container for all the other elements, it is not necessary to style their width or left margin.
• It avoids a lot of problems of the first two methods.
• It is the preferred method of styling.⁵
• A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
• The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
• The #header and #footer were given some individual styling.
• Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
• The box-sizing property was set to border-box because I prefer to work with HTML element sizes rather than content sizes. Nevertheless, it wasn’t necessary. Unlike the previous two examples, the ol element would be constrained to the size of the body containing it.

The post Example Page Where the Content is not Flush with the Left Side appeared first on Complete, Concrete, Concise.

So far, we have restricted ourselves to a handful of CSS Properties as we familiarize ourselves with how CSS and the Box Model.

This tutorial expands your vocabulary with 9 new properties.

We’ve seen these 6 CSS properties:

1. color
2. background-color
3. padding
4. border
5. margin
6. display

They allow you to play around with the text and background colours and the space around your content.

We’ll expand our knowledge of the margin and padding properties and add learn another 9 CSS properties to allow you to give a bit more style to your document.

As with the previous 6 properties, we won’t cover them all in full detail – just enough to so you can use them and become familiar with them. They will be covered in more detail in future tutorials.

Contents

1. margin
   1. Specific Margin Styling
   2. Styling with 4 Margin Values
   3. Styling with 2 Margin Values
2. padding
   1. Specific Padding Styling
   2. Styling with 4 Padding Values
   3. Styling with 2 Padding Values
3. width
   1. width and the <img> tag
4. height
5. box-sizing
6. font-size
7. font-family
8. font-weight
9. font-style
10. line-height
11. text-align
12. Conclusion
13. Playing Around
14. References

margin

You have seen how to set all margins around an HTML element to the same value:

p {
  margin: 16px;
}

The above code fragment will set all margins around the paragraph element to 16px.

Remember: top and bottom margins are ignored for HTML elements with the display property set to inline.

Specific Margin Styling

You can choose which margin to style:

.left-margin {
  margin-left: 16px;
}

.right-margin {
  margin-right: 16px;
}

.top-margin {
  margin-top: 16px;
}

.bottom-margin {
  margin-bottom: 16px;
}

Each class in the code fragment above applies a margin value to a specific side.

Styling with 4 Margin Values

You can individually style all four margin in a single line:

.custom-margins {
  margin: 8px 10px 4px 16px;
}

The margin values start at the top and are given in clockwise order:

1. top
2. right
3. bottom
4. left

Styling with 2 Margin Values

If the top and bottom margins are the same and the left and right margins are the same, then you can style them in a single line:

.custom-margins {
  margin: 0px 16px;
}

The first value is the top and bottom margin value. The second value is the left and right margin value.

padding

You have seen how to set all the padding around HTML content to the same value:

p {
  padding: 16px;
}

The above code fragment will set all the padding around the paragraph content to 16px.

Specific Padding Styling

You can choose which side to apply padding to:

.left-margin {
  padding-left: 16px;
}

.right-margin {
  padding-right: 16px;
}

.top-padding {
  padding-top: 16px;
}

.bottom-padding {
  padding-bottom: 16px;
}

Each class in the code fragment above applies a padding value to a specific side.

Styling with 4 Padding Values

You can individually style all four padding values in a single line:

.custom-padding {
  padding: 8px 10px 4px 16px;
}

The padding values start at the top and are given in clockwise order:

1. top
2. right
3. bottom
4. left

Styling with 2 Padding Values

If the top and bottom padding is the same and the left and right padding is the same, then you can style them in a single line:

.custom-padding {
  padding: 0px 16px;
}

This first value is the top and bottom padding value. The second value is the left and right padding value.

width

You’ve seen that block elements take up the full width of the container they are in. The width allows you to control the width of the HTML content:

.width-test {
  width: 200px;
  border: 2px solid red;
  background-color:lightgray;
}

As with other CSS properties, you specify dimensions in pixels.¹

Applying the above code fragment to the following HTML code:

<p class="width-test">
  This is a 200 pixel wide test paragraph.
</p>
<p class="width-test">
  Another paragraph.
</p>

will result in something like the following:

This is a 200 pixel wide test paragraph.

Another paragraph.

Notice that the HTML element:

• no longer expands to fill the full width of the container
• the block elements still follow normal HTML flow and stack one atop the other²

width and the <img> tag

Setting the width property on an img tag to 100%, will scale the image to fit the enclosing container³ without distorting the image.

img {
  width: 100%;
}

Consider the following 400x400px image:

If we style the img tag to have a width of 100%:

img {
  width: 100%;
}

and insert the image inside smaller and larger containers:

<div class="small-container">
  <img src="image.jpg">
</div>

<div class="large-container">
  <img src="image.jpg">
</div>

where:

.small-container {
  width: 200px;
}

.large-container {
  width: 500px;
}

We get the following results:

200px wide container:

500px wide container:

height

You’ve seen that HTML elements expand in height to fit whatever content they contain. Just as you can specify the width of the HTML element, you can also specify its height:

.height-test {
  height: 100px;
  border: 5px green solid;
  background-color: yellow;
}

As with many of the other CSS properties, you specify dimensions in pixels.

Applying the above code fragment to the following HTML code:

<p class="height-test">
  This paragraph box is 100px high.
</p>

will result in something like the following:

This paragraph box is 100px high..

Notice that the HTML element is now 200 pixels high, even though it doesn’t need to be.

You can combine the width and height: