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.

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

This tutorial expands your vocabulary with 9 new properties.

We’ve seen these 6 CSS properties:

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

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

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

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

Contents

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

margin

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

p {
  margin: 16px;
}

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

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

Specific Margin Styling

You can choose which margin to style:

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

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

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

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

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

Styling with 4 Margin Values

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

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

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

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

Styling with 2 Margin Values

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

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

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

padding

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

p {
  padding: 16px;
}

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

Specific Padding Styling

You can choose which side to apply padding to:

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

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

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

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

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

Styling with 4 Padding Values

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

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

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

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

Styling with 2 Padding Values

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

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

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

width

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

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

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

Applying the above code fragment to the following HTML code:

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

will result in something like the following:

This is a 200 pixel wide test paragraph.

Another paragraph.

Notice that the HTML element:

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

width and the <img> tag

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

img {
  width: 100%;
}

Consider the following 400x400px image:

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

img {
  width: 100%;
}

and insert the image inside smaller and larger containers:

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

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

where:

.small-container {
  width: 200px;
}

.large-container {
  width: 500px;
}

We get the following results:

200px wide container:

500px wide container:

height

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

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

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

Applying the above code fragment to the following HTML code:

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

will result in something like the following:

This paragraph box is 100px high..

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

You can combine the width and height:

.width-height-test {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: lime;
}

Applying the above code fragment to:

<p class="width-height-test"></p>

Results in:

box-sizing

By default, the width and height set the dimensions of the content area of the CSS Box Model. Any padding or borders you add are extra on top of the width and height.

However, Microsoft’s Internet Explorer used what is commonly known as the broken box model. Internet Explorer considered the padding and borders as part of the width and height of the HTML element.

In both cases, margins are always extra on top of whatever width or height you set.

Consider the following two HTML paragraph elements:⁴

width = 200px,
height = 200px,
border = 5px
padding = 20px,
Content sizing

width = 200px,
height = 200px,
border = 5px,
padding = 20px,
Border sizing

Both have exactly the same settings for:

• width
• height
• padding
• border

The green element is sized using the standard model which applies the width and height only to the content of the CSS Box. The padding and borders add extra width and height to the element.

The yellow element is sized using Internet Explorer’s broken box model which applies the width and height to the borders of the CSS Box. All padding and content is contained within that.

You can choose which model you want to use:

• content-box – this is the default behaviour and can be considered to put the content “first” since it sizes the space for the content. However, it can make for more difficult layouts because changing the padding or border changes the size of the element on the page.
• border-box – this can be considered to put the layout “first” since it sizes the space for the entire HTML element (content + padding + border).

Regardless of which box sizing method you choose, margins always add extra space.

Normally, you don’t set this property on an element by element basis, but for all elements in the document:

* {
  box-sizing: border-box;
}

The above code fragment will change the box-sizing to border-box for all elements in the document. This is a typical use for the Universal selector.

This might seem somewhat pointless since the only layout flow you know is top to bottom (and nesting elements inside other elements). However, in a future tutorial, you will see how to change the normal top to bottom HTML flow so that HTML elements flow from left to right or right to left.

font-size

Fonts are graphical representations of characters that are (usually) used for text.⁵

In general, the default font size in a browser is set to 16 pixels.⁶

You can change the size using the CSS property font-size:

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

The size is given in pixels.⁷

A sample paragraph with the font size set to 32px (and some other styling for background color and border).

font-family

You can specify which font should be used. For this tutorial we only cover the 3 major font families:

• serif: serif fonts have small strokes attached to the tips of each letter. Time New Roman is an example of a serif font.
• sans-serif: sans-serif fonts do not have the extra strokes attached to each letter. Verdana or Arial are examples of san-serif fonts.
• monospace: monospace fonts have characters that are all the same width. They may be serif or sans-serif. Courier New is an example of a monospace font.

You can change the font family (the style of the font) using the font-family property:

.serif {
  font-family: serif;
}

.sans {
  font-family: sans-serif;
}

.mono {
  font-family: monospace;
}

The above code fragment defines 3 different classes that can be used to change the font family.

In a future tutorial, we will see how to specify a specific font (like Arial or Times New Roman).⁸

font-weight

Most fonts come in two weights: normal and bold. There can be more,⁹ but, for now, we only consider those two because those are the two most common font weights. Very few fonts have more than those two weights – sometimes they only have one weight.

You style it using the font-weight property:

.bold-font {
  font-weight: bold;
}

.normal-font {
  font-weight: normal;
}

The above code fragment implements two classes that allow setting the font weight for an HTML element.

Applied to paragraph tags (with a bit of extra styling), the result looks like this:

This is some normal text.

This is some bold text.

font-style

Fonts have 3 different styles:

• normal: this is the normal font
• italic: this is distinct from the normal font. It is typically designed to have an inclined appearance and calligraphic (handwritten) feel to it
• oblique: this is the normal font that has been tilted (typically about 10°) to the right.

In practice, italic and oblique are pretty much synonymous¹⁰.

.normal-style {
  font-style: normal;
}

.italic-style {
  font-style: italic;
}

.oblique-style {
  font-style: oblique;
}

Applied to paragraph tags (with a bit of extra styling), the result looks something like this:

This is some normal text.

This is some oblique text.

This is some italic text.

If your browser’s default serif font has italics, you will notice a difference between the oblique and italic text. You will see that the oblique is simply the normal skewed to the right.

line-height

You can also adjust the height of your lines using the line-height property.

Single space lines would have the same height as the font-size:

.single {
  font-size: 16px;
  line-height: 16px;
}

.double {
  font-size: 16px;
  line-height: 32px;
}

The above code fragment applied to the following paragraphs results in something like this:

This paragraph has been styled to use a line-height equal to the font size. This makes the text “single spaced”. Depending on the font used, it can appear too dense. Normally, you would use a line height around 1.5 times the font size.

This paragraph has been styled to use a line-height equal to double the font size. This makes the text “double spaced”. Depending on the font used, it can appear too sparse. Normally, you would use a line height around 1.5 times the font size.

This paragraph has been styled to use a line-height equal to 1.5 times the font size. This makes the text. This is, typically, a good line spacing to use. Normally, you would use a line height around 1.5 times the font size.

text-align

You can set your text alignment:

• right: the text is right justified. This means the text lines up on the right side of the HTML element
• left: the text is left justified. This means the text lines up on the left side of the HTML element
• center: the text is horizontally centered inside the HTML element.
• justify: the text is fully justified. This means the text lines up on both the left and right side of the HTML element. White space is inserted as needed to justify the text.

.right-align {
  text-align: right;
}

.left-align {
  text-align: left;
}

.center-align {
  text-align: center;
}

.justified-align {
  text-align: justify;
}

The code fragment above applied to the following paragraphs results in something like:

This paragraph is right aligned. The text lines up on the right side of the HTML element. The left side can be ragged.

This paragraph is left aligned. This means the text lines up on the left side of the HTML element. The right side can be ragged.

This paragraph is centered. This means the text horizontally centers itself inside the HTML element. The left and right sides can be ragged.

This paragraph is justified. This means the text lines up on both the left and the right side of the HTML element. The left and right side will not be ragged except, possibly, the right side of the last line.

Conclusion

We covered quite a lot of stuff – but don’t worry, there is still plenty more.

1. There are multiple ways to style margins around HTML elements:
   1. Setting all margins to the same value by providing a single value to the margin property
   2. Setting each margin individually using the margin-left, margin-right, margin-top, margin-bottom properties.
   3. Setting all margin values individually in a single line by providing 4 values to the margin property. The margin values are given in clockwise order starting from the top: top, right, bottom, left.
2. Remember that top and bottom margins are ignored for inline elements.
3. There are multiple ways to style padding around HTML content:
   1. Setting all padding to the same value by providing a single value to the padding property
   2. Setting each padding value individually using the padding-left, padding-right, padding-top, padding-bottom properties.
   3. Setting all padding values individually in a single line by providing 4 values to the padding property. The padding values are given in clockwise order starting from the top: top, right, bottom, left.
4. The width property allows you set the width of an HTML element. The width is given in pixels.
5. The height property allows you set the height of an HTML element. The height is given in pixels.
6. By default, the width and height is applied to the content of the HTML element.
7. If you want the width and height to apply to the entire HTML element, including content, padding, and margins, then you set the box-sizing property to border-box.
8. The font-size property allows you set the size of the font inside an HTML element. The size is given in pixels.
9. In general, the default font size is 16px.
10. The font-family property allows you set the type of font used inside an HTML element. The 3 main font types are:
    • serif (Serif Example)
    • sans-serif (San Serif Example)
    • monospace (Monospace Example)
11. The font-weight property allows you set the weight of the font inside an HTML element. The common weights are:
    • normal (Normal Example)
    • bold (Bold Example)
12. The font-style property allows you set the style of the font inside an HTML element. The 3 styles are:
    • normal (Normal Example)
    • oblique (Oblique Example)
    • italic (Italic Example)
13. Italic and oblique are very similar. User agents (browsers) commonly substitute oblique for italic if an italic version of the font is not available.
14. The line-height property allows you set the height of the line inside an HTML element. The height is given in pixels.
15. Typical line heights are 1.5 times the font-size.
16. The text-align property allows you specify how text is to be aligned inside an HTML element. The 4 alignment values are:
    • left
    • right
    • center
    • justify

Playing Around

The best way to learn is to play around with what you have learned.

You have enough knowledge now to create the following style of webpage:

There are a number of ways to do this (I will show 3 in the next tutorial).

1. Don’t try to get the document looking good at all kinds of resolutions. Just make it look good in your browser at whatever resolution you are using. Future tutorials will get into how to make your site responsive.
2. What do you need to do to get a uniform margin on the left-hand side?
3. How are you going to control the width of the content in the center?
4. Don’t worry about background colours (I just used them in the example to highlight the task)
5. You don’t have to use all the HTML elements and CSS properties you have seen.
6. You want the content (roughly) in the center of the page.
7. The content width should be constrained.
8. The title should be centered.
9. The copyright should be centered.

References

1. margin
2. padding
3. width
4. height
5. box-sizing
6. font-size
7. font-family
8. font-weight
9. font-style
10. line-height
11. text-align

The post Nine More CSS Properties to Play With appeared first on Complete, Concrete, Concise.