Nine More CSS Properties to Play With

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