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.

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

Contents

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

Getting Specific

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

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

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

p {
  background-color: aliceblue;
}

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

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

.box {
  border: 1px solid black;
}

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

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

Which means that the final style rule looks like this

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

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

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

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

We can get even more specific with the following:

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

However, if you created the following rule:

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

And you applied it to the following code:

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

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

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

Calculating Specificity

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

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

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

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

Consider the specificity of the following selectors:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Rules for Creating Specific Selectors

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

Final Words

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

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

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

   IDs

   .classes and [attributes]

   <elements>

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

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

References

1. CSS Selectors

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

An important part of coding is documenting your code with comments

Contents

1. Introduction to Comments
2. HTML Comments
3. CSS Comments
4. Guidelines for Writing Good Comments
5. Final Words
6. References

Introduction to Comments

In a perfect world, code would be self documenting and as you read it from top to bottom you would perfectly understand its structure and behaviour.

In the real world – except for trivial code examples (the kind you fit in a dozen lines or less and can keep in your head) – understanding any significant piece of code takes considerable effort.

Comments are textual information that are added to the code to help document the code. Comments do not affect the behaviour of the code in any way and are ignored when the code is processed. Comments are there to help humans understand the code easier – but only if they are useful and accurate.

HTML Comments

HTML comments begin with <!-- and end with -->. In between those characters, you can have almost any type of text string you like and it can span multiple lines.

<!--This is an HTML comment-->

<!-- While a space is not necessary after
     the opening characters, it does make it
     easier to read and avoid certain problems -->

<!--
  You can also put the comment markers on
  separate lines to make it a little neater.
-->

<!--
  The HTML code inside this comment
  will never be processed.

  <div>
    <div>
      <p>A paragraph inside divs</p>
    </div>
  </div>

-->

The specification has a few rules regarding HTML comments:

1. the text must not start with the string >,
2. nor start with the string ->,
3. nor contain the strings <!--, -->, or --!>, +
4. nor end with the string <!-

Basically, as long as you don’t try to nest HTML comments inside HTML comments, you will be fine.

<!--
  <!-- Nested comments are bad -->
-->

CSS Comments

CSS comments begin with /* and end with */. In between those characters you can have almost any types of text string you like and it can span multiple lines.

/*This is a CSS comment*/

/* A leading space makes the comment
   easier to read */

/*
   You can also put the comment markers on
   separate lines to make it a little neater.
*/

/*
   The CSS code inside this comment
   will never be processed.

   .my-style {
     font-size: 24px;
     color: green;
     padding: 5px;
     background: orange;
 }

*/   

As with HTML comments, you cannot nest CSS comments, so the first */ will always end the comment:

/*
  /* Nested comments are bad */
*/

Guidelines for Writing Good Comments

Comments are written for two types of audience:

1. Your future self
2. Others

Your future self (technically speaking) is somebody else because, 6 months or a year or 10 years in the future, you are unlikely to still be in the same frame of mind as when you wrote the code. So everything that was “obvious” when you were writing your code is no longer obvious.

Comments are written for two different purposes:

1. Documenting (what you are doing)
2. Clarifying (why you are doing it)

Comments should answer the questions: what and why. The how is answered by the code itself because that is the implementation.

Let’s comment the first HTML program we encountered in this tutorial series:

<!--
  The following is not HTML, it is a document declaration.
  It tells the browser what type of document it is.
  It is case-insensitive. This declaration tells the
  browser that all the code that follows is HTML5 code.
-->
<!DOCTYPE HTML>

<!--
  This is an HTML tag and marks the start of the HTML
  document.

  There is a corresponding closing tag </html>. Most
  HTML tags come in pairs.
-->
<html>

  <!--
     The head section contains metadata (a fancy way of
     saying information) about the document. Things which
     are not part of the content of the document tend to
     go in this section.

     There is a corresponding closing tag </head> which
     marks the end of the head section
  -->
  <head>

    <!--
      The title of the document. Typically appears in
      the browser tab.
    -->
    <title>Hello World</title>

    <!--
      Use UTF-8 character encoding for this page. In
      general, it should always be UTF-8.
    -->
    <meta charset="utf-8"  />

  </head> <!-- The end of the head section -->

  <!--
    The body section contains the content that is
    displayed in the web browser.

    There is a corresponding closing tag </body> which
    marks the end of the body section.
  -->
  <body>

    <!--
      Content is, generally, contained between paragraph
      tags.
    -->
    <p>Hello World!</p>

  </body> <!-- The end of the body section -->
</html> <!-- The end of the HTML document -->

In general, you shouldn’t comment as extensively as I did in the example above – but for a tutorial it is fine.

When you are learning, it is a good idea to comment freely – explain what you are doing and why you are doing it. As your knowledge develops, you will find yourself documenting less and less.

Your comments should document why you are doing something. For example, you might have a requirement for a particular type of webpage, you could embed the webpage description as a comment:

<!-- This is a page with a single column layout that has
     the following general structure:

     Header
     Navbar
     body of articles
     Footer

     The body has a width of 960px and is centered on the
     page.

     Each article in the body is a card which fits the full
     width of the body less 35px padding on the left and
     right side.

     Each card consists of an image with a 16:9 aspect
     ratio, a title with a font-size of 24px, followed
     by a byline at 12px and a published date (also 12px)
     The text content of the card has a font size of 16px.
-->

Of course, this information could be in an external design document instead of the webpage.

The big problem is maintaining the code comments up to date. You have to be diligent to ensure that you update the comments when making changes to the code that don’t do what the comments say.

I recommend you comment freely as you learn to develop. Comment what you have learned:

<!--
  There are two kinds of HTML lists:
  - ordered <ol> and
  - unordered <ul>.

  List can take and attribute called 'reversed' todo
  display the list in reverse order.
-->

<p>Normal list ordering:</p>
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

<p>Reversed list ordering:</p>
<ol reversed>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

Eventually, you will stop writing mundane comments.

You should avoid commenting what is obvious from reading the code because it adds nothing to the information:

.header {
  /* set the background color to blue */
  background-color: blue;
}

But you can document specific requirements:¹

.header {
  background-color: #1DA1F2; /* Twitter blue */
}

One use of comments is to structure your code:

/* Global */


/* Header */


/* Content */


/* Footer */

Unfortunately, your code won’t always cooperate to break down into such nice clear categories.

Final Words

1. Comment your code freely.
2. Don’t comment anything that is obvious.
3. You can explain what you are doing.
4. You can explain why you are doing something.
5. Don’t explain how how you are doing something because that is the code itself.
6. Keep your comments up to date (in general, you should avoid comments that could be rendered obsolete)

References

1. HTML comments
2. CSS comments

The post Comments in HTML and CSS 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.

Contents

1. Divide the Page so Floats are in their own Block
2. Float Everything in the Same Direction
   1. Everything Floating Left
   2. Everything Floating Right
   3. Mixed Left and Right Floats
3. When You Want Floats to Overlap other Blocks
4. float and box-sizing
5. calc()
6. Summary
7. Playing Around
8. References

Divide the Page so Floats are in their own Block

When you divide up a page, you want to ensure that floating elements are contained inside their own stacking block and .clearfix is applied to that block.
Notice how the 3 small floating images are in their own block, with other elements stacking above and below:

In general, you want to use floats to make elements flow horizontally inside a vertically stacking block.
As much as possible, avoid having floating elements actually floating on top of other elements – but there are exceptions.

Float Everything in the Same Direction

As a general rule, you should float all your elements in the same direction. For English language websites (or any other language that is written from left-to-right), you want to use float: left.

Everything Floating Left

Consider the following left floating elements which overflow and wrap:

While there is too much white space on the right side, the overall flow and alignment look fine.

Everything Floating Right

Consider the following right floating elements which overflow and wrap:

There is too much white space on the left side and the right alignment looks somewhat “unnatural” or out of place.
Floating to the right is a good choice for webpages written in languages written from right to left.¹

Mixed Left and Right Floats

Consider the following floating elements which overflow and wrap. The left-most elements are floated left and the right-most element is floated to the right:

The way the content overflows doesn’t look quite right.

When You Want Floats to Overlap other Blocks

There are times when you want a floating element to overlap other blocks. The most common is getting text to flow around an image:

Having text flow around an embedded image looks natural and is what most people would expect because this is a common layout style we find in books and magazines.
So this is one case where it makes sense to allow a floating image block to overlap with paragraph blocks.

Another common case is when you want to insert a side note or comment as a visible part of your content.
Consider the following (although you might want to justify the text to make it less ragged):

When you choose to deliberately overlap HTML blocks, you need to be careful about ensuring the floating element does not overlap blocks it shouldn’t.

float and box-sizing

Earlier, we saw the box-sizing property which instructs the User Agent (browser) to size HTML elements by either content area (default) or border. Recall the CSS box model:

Sizing using the content-box does not include the padding, border, or margin when setting the size of the HTML element.
Sizing using the border-box includes the padding and border when setting the size of an HTML element. It does not include the margin in the size of the element.
For normal flow objects, this doesn’t make much difference to the layout since objects just flow downwards.
When we apply float to objects, they flow horizontally and will overflow and wrap around when they reach the edge of the browser – so we have to be more careful when specifying dimensions for floating objects. It is usually best to use box-sizing: border-box for floating HTML elements. Consider the following styling and code:

.parent {
  margin: auto;
  width: 300px;
  background-color: yellow;
}

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

.block {
  width: 100px;
  height: 50px;
  background-color: red;
  float:left;
}

<div class="parent clearfix">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Which results in:

There is no obvious separation between one child block and another, since they all run together. The obvious solution is to insert a bit of space between them. We can do this by giving each child block a small margin (let’s say 10px all around):

Unfortunately, this causes the child blocks to overflow and wrap around. Remember:

1. the parent container is 300px wide,
2. each child is 100px wide,
3. each child has a 10px margin,
4. this makes each child block 100px + 10px + 10 px = 120px wide (there are 10px for the left margin and 10px for the right margin) and
5. 50px + 10px + 10px = 70px high (there are 10px for the top margin and 10px for the bottom margin)

The height of the child blocks is not the problem for us, it is the width, so we can adjust our CSS to account for the 10px margin on the left and right of the child block:

.block {
  margin: 10px;
  width: 80px;
  height: 50px;
  background-color: red;
  float:left;
}

Which gives us the result we would expect:

If we decide to add a border (even just a 1px border) or padding (even just 1px of padding), it will cause the elements to wrap (again).
We can compensate by subtracting the added widths of our border and padding, or we can set the box-sizing property to border-box:

* {
  box-sizing: border-box;
}

Using the universal selector will cause all HTML elements to be sized according to their borders and not their content area. Personally, I think it is easier and more intuitive to work this way. When you layout the content on a page you imagine each block of content as being completely self contained – i.e., it includes the content, the padding around the content, and the border around the content. However, you do have to compensate for any margins you might use.

calc()

We’ve seen that % is a more convenient way of dimensioning floating elements than using pixels. If you want 3 equally sized columns you can make them each 33.33% of the width of the parent container. You could also make 2 of them 25% and one 50%. Unfortunately, this makes compensating for margins a bit trickier.
CSS has a function called calc() that makes this a lot easier. You simply enter the dimensions – even if they are different units – and calc() will perform the necessary calculation for you.
Taking the example above, we can write the CSS code for the blocks as follows:

.block {
  margin: 10px;
  width: calc(33.33% - 10px - 10px);
  height: 50px;
  background-color: red;
  float:left;
}

The width is set to 33.33% less 10px for the left margin and 10px for the right margin. It could have also been written as calc(33.33% – 20px), but I chose to explicitly subtract each margin independently for clarity.

Summary

1. Divide the vertically stacking blocks
2. Try to contain horizontally stacking blocks (floating elements) in their own vertically stacking block.
3. As a general rules, you want all your floats to go in the same direction. In most cases this will be float: left. If you are developing webpages for a language that is written right-to-left, you will prefer [float: right]{css-property}
4. Mixing float: left and float: right in the same containing block is, usually, a bad idea.
5. Sometimes, you do want floating elements to overlap other blocks (like images, or side notes). In this case, you need to ensure appropriate overlapping.
6. Setting your HTML elements to have box-sizing: border-box makes it easier to layout horizontally flowing elements, since it takes into account any border and padding values you set.
7. Regardless of which box-sizing model you choose, you must always compensate for any margin values you apply.
8. The CSS function calc() makes it easier to compute box sizes. It even allows mixing units (like pixels and % together).

Playing Around

Dividing Up a Page

Learning how to divide up a page layout into HTML block elements is crucial to being able to code that page.

1. Explore a number of websites (news websites tend to be very good for this²) and pay attention to how the pages are laid out.
2. How would you arrange the various HTML elements to create a similar layout?
   1. Which are the vertically flowing blocks?
   2. How are vertical elements nested inside of blocks?
3. Can you code a page with a similar layout?

Many of these sites have very long pages. It is not necessary to replicate the entire page from top to bottom – just focus on the portion of the page you see in your browser window.
Don’t try to mimic all the functionality or behaviour. You haven’t learned to embed videos yet (just substitute a picture). There are effects (like shadows, animations, or dropdowns) that you haven’t learned either. Just focus on getting the general layout and look, more or less, right.

box-sizing and calc()

1. Experiment with using box-sizing: border-box. You can do this by setting all HTML elements to have this property.
2. Experiment using the calc() function.

You can use these with the page layouts you try out above.

References

1. float property
2. clear property
3. box-sizing property
4. calc() function

The post CSS – How and When to Use Float 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.

<p>Hello World!</p>

The rest of the HTML was boilerplate code that we extracted into a template for future use.
Thus tutorial expands your HTML vocabulary with ten new tags.

So far, the only tag you have used for displaying text on the screen is the <p> tag. This is also known as the paragraph tag because it marks a paragraph of text.
HTML5 tags are case-insensitive, so it doesn’t matter if you write them in UPPERCASE, lowercase, or MiXeDcAsE.
Most developers write HTML tags in lowercase, however, there are some who prefer UPPERCASE because it makes the tags stand out more.

Contents

1. h1 – h6
2. strong
3. em
4. i
5. mark
6. Summary
7. Playing Around
8. References

h1 – h6

The first six tags are known as heading tags. They are used to mark a heading for a block of text (think of it as the start of a section or subsection). They indicate the hierarchical structure of your document.
<h1> has the highest rank and <h6> has the lowest.
Each <tag> must have a corresponding closing </tag> tag.
Consider the following code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing Header Tags</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <h1>Header 1</h1>
      <p>Some h1 Text.</p>
    <h2>Header 2</h2>
      <p>Some h2 text.</p>
    <h3>Header 1</h3>
      <p>Some h3 Text.</p>
    <h4>Header 2</h4>
      <p>Some h4 text.</p>
    <h5>Header 1</h5>
      <p>Some h5 Text.</p>
    <h6>Header 2</h6>
      <p>Some h6 text.</p>

  </body>
</html>

If you create a webpage using the code above, you will notice the headers are displayed in different font sizes and weights according to their importance, while the text all remains the same.
Since the <h1> to <h6 tags provide hierarchical structure to the content on the page, the general guidance for their use are:

• <h1> should be used for the title on the page.
• <h2> should be used for individual sections on the page.
• <h3>– <h6> should for increasing subsections under <h2>.

Tools can use these tags to extract an outline of the content of your document – for example, to generate a table of contents.
The code above has the following structure:

1. Header 1
   1. Header 2
      1. Header 3
         1. Header 4
            1. Header 5
               1. Header 6

The tutorial What Do You Need to Start Front-End Web Development? has the following heading structure:

1. What Do You Need to Start Front-End Web Development? <h1>
   1. Contents <h2>
   2. Skills <h2>
   3. Tools <h2>
      1. Web Browser <h3>
      2. Text Editor <h3>

You can have more than one <h1> tag on your page, but that might suggest that each <h1> should have its own page.¹

strong

The <strong> tag is used to indicate content that is important, serious, or urgent.
Each <strong> tag must have a corresponding closing </strong> tag.
The general guidance for use of this tag are:

• Important: parts of the document that matter more than other parts
• Serious: parts of a document that show a warning or caution notice
• Urgent: parts of the document that the user should notice sooner than other parts of the document

Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Strong Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p><strong>Lorem ipsum dolor sit amet</strong>,
      consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.</p>

    <p><strong>Odio ut enim blandit volutpat maecenas.
    </strong> Accumsan lacus vel facilisis volutpat est
    velit egestas dui. Eleifend quam adipiscing vitae
    proin sagittis. </p>

  </body>
</html>

If you create a webpage using the code above, you will notice the first part of both paragraphs is rendered in bold text.
There is an HTML tag <b> that is for bold text. In general, you should avoid using this tag because it has no semantic meaning. In other words, using it doesn’t add any information to the document² – it simply indicates the text should be displayed differently, but is not significant in any other way.

em

The <em> tag is used to indicate emphasis on part of a document, but not importance (for which you should use the <strong> tag).
Each <em> tag must have a corresponding closing </em> tag.
Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Emphasis Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p><em>Lorem ipsum dolor sit amet</em>, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua.</p>

    <p><em>Odio ut enim blandit volutpat maecenas.</em>
      Accumsan lacus vel facilisis volutpat est velit
      egestas dui. Eleifend quam adipiscing vitae proin
      sagittis. </p>

  </body>
</html>

If you create a webpage using the code above, you will notice the first part of both paragraphs is rendered in italic text.
The HTML tag <i> is for italic text and has a slightly different meaning from <em>.³

i

The <i> tag is used to indicate text that is different from the normal flow of the text – for example, a foreign word.⁴
Each <i> tag must have a corresponding closing </i> tag.
The general guidance for use of this tag are:

• technical terms: It might surprise you to learn that HTML is more complicated and nuanced than you imagined.
• foreign language words or phrases: The phrase Veni, vidi, vici comes from Julius Caesar.
• internal thoughts: The student looked at the course syllabus and smiled. This is going to be easy.

Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Emphasis Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p>Webpage developers often use <i>Lorem ipsum</i>
      to flesh out the page with content</p>

    <p><i>Odio ut enim blandit volutpat maecenas.
      Accumsan lacus vel facilisis volutpat est velit
      egestas dui. Eleifend quam adipiscing vitae
      proin sagittis.</i></p>

  </body>
</html>

If you create a webpage using the code above, you will notice Loem ipsum and the second paragraph are rendered in italic text.
The HTML tag <em> is for emphasized text and has a slightly different meaning from <i>.⁵

mark

The <mark> tag is used to mark or highlight something for reference purposes. In other words, it is used to draw attention to something.
Each <mark> tag must have a corresponding closing </mark> tag.
The general guidance for use of this tag are:

• Bring attention to something: like a splling mistake
• Indicate a search string match: searching for text in a document is a common task on the computer, highlighting the matching text is good
• Bring attention to something relevant: It is important to know the purpose of HTML tags because different HTML tags are used for different purposes. Otherwise you end up using them willy-nilly.

Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Strong Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p>“That’s rather a broad idea,” I remarked.</p>

    <p>“One’s ideas must be as broad as Nature if they
      are to interpret Nature,” he answered. “What’s
      the matter? You’re not looking quite yourself.
      This Brixton Road affair has upset you.”</p>

    <p>“To tell the truth, it has,” I said. “I ought to
      be more case-hardened after my Afghan experiences.
      I saw my own comrades hacked to pieces at Maiwand
      without losing my nerve.”</p>

    <p>“I can understand. There is a mystery about this
      which stimulates the imagination; <mark>where
        there is no imagination there is no horror.
      </mark> Have you seen the evening paper?”</p>

    <p>“No.”</p>

  </body>
</html>

If you create a webpage using the code above, you will notice that a portion of the text⁶ is highlighted.

Summary

Even though the tags introduced in this tutorial affect the way text is rendered (displayed) in a browser, they are used to provide structure and meaning to the content, not appearance. Appearance (styling) should be done using CSS (which will be covered in later tutorials).

1. Use heading tags to hierarchically structure the contents of your document.
2. Use <strong> tags to mark important content.
3. Use <em> tags to emphasize content.
4. Use <i> tags to mark content that has a different flow or aspect from the surrounding content.
5. Use <mark> tags to content you want to highlight.

Playing Around

The best way to learn is to play around with what you have learned.
Use the tags introduced in this section – along with the <p> tag – to create some basic webpages with content. They will be very plain pages because there is no styling.⁷
Some webpage ideas are:

• your resume (or curriculum vitae)
• a recipe
• a collection of recipes (each recipe would be in its own section, so each recipe title would probably start with a <h1> tag)
• study notes for this series of tutorials.

Only use the tags you learned so far. As this series progresses, we will cover all the tags and their uses. The point, right now, is to reinforce what you have learned.
If you are really stuck. You can go to Project Gutenberg:

• find a book
• copy & paste some text from it into your webpage
• format the paragraphs using <p> tags
• add a short header before each paragraph (the header should introduce the main point of the paragraph)
• use the tags to mark up the text. Decide what is important, what needs emphasis, what flows differently from the text around it, and what needs to be highlighted

There are no right or wrong webpages. The point is to practice what you have learned and become comfortable with:

• writing HTML5 code
• using the tags you know

As well, try mixing and matching the tags. Can you use combine them? It should be obvious that the <strong>, <em>, <i>, <mark> tags can be used on content inside of <p> tags:

• can they be used on content inside heading tags?
• can they be combined?
• can you have paragraph or heading tags around content inside those tags?

References

1. Heading Tags
2. <strong> tag
3. <em> tag
4. <i> tag
5. <mark> tag
6. <p> tag