Elements with more than one class

<h1 class="spaced red">My title</h1>

Box model and sizing

1. Box model

   Box model

   Creating space around elements and content is an important aspect of HTML page layout. For this we use margins and padding.

   The picture shows the parts of the HTML element box model:

   • the area taken up by the element's content is shown in blue
   • padding is shown in purple - it is inner spacing, between the border and the contents
   • the element border is shown in black
   • margins are shown in yellow - these are the outer spacing, between the element and other elements surrounding it

   

   Specifying margins and padding

   Margins and padding can both be specified separately for each side of the element:

   margin-top: 1em;
   margin-right: 0;
   margin-bottom: 1px;
   margin-left: 0.2em;
   padding-top: 1em;
   padding-right: 0.5em;
   padding-bottom: 1em;
   padding-left: 0.5em;	

   Margin and padding shortcuts

   A number of shortcut declarations also exist, taking the following syntax:

   margin: <top value> <right value> <bottom value> <left value>;
   margin: <top and bottom value> <right and left value>;
   margin: <value for all margins>;
   
   padding: <top value> <right value> <bottom value> <left value>;
   padding: <top and bottom value> <right and left value>;
   padding: <value for all margins>;

   margin: 1em 0 1em 0;
   margin: 1em 0; // same effect as above
   margin: 1em;
   
   padding: 1em 2em 1em 2em;
   padding: 1em 2em; // same effect as above
   padding: 1em;					

   Specifying borders

   The three border properties, width, style and color, can each be specified separately for the different sides of the box.

   border-top-width: 6px;
   border-top-style: dotted;
   border-top-color: black;
   border-right-width: 8px;
   border-right-style: dashed;
   border-right-color: blue;
   border-bottom-width: 4px;
   border-bottom-style: solid;
   border-bottom-color: yellow;
   border-left-width: 50px;
   border-left-style: none;
   border-left-color: black;
   					    

   A box with interesting borders

   Border shortcuts

   • The three border properties, width, style and color, can be specified together using the CSS shortcut properties border-*, where the asterisk stands for top, right, bottom or left.

     border-top: 6px dotted black;
     border-right: 8px dashed blue;
     border-bottom: 4px solid yellow;
     border-left: 50px none black;		

     A box with interesting borders

   • Border properties can be specified for all four border sides at once, using the CSS shortcut properties border-*, where the asterisk stands for width, style or color.

     border-width: 8px;
     border-style: dotted;
     border-color: green; 

     A box with interesting borders

   • The CSS shortcut property border can be used to specify all border properties for all sides of the border in one rule.

     border: 8px dotted green; 

     A box with interesting borders

2. Box sizing

   Box sizing

   Dimensions of an element can be specified either so that they exclude padding and border width or so that they include them (the default). The CSS property used for this is box-sizing.

   Code

   
   <style>
   .parent { height:5em; width:5em; border: 10px solid yellow; }
   .child { width:100%; border: 10px solid blue; }
   </style>
   
   <div class="parent" style="box-sizing:content-box;">
       Parent
       <div class="child" style="box-sizing:content-box;">
           Child
       </div>
   </div>
   
   <div class="parent" style="box-sizing:content-box;">
       Parent
       <div class="child" style="box-sizing:border-box;">
           Child
       </div>
   </div>
   
   <div class="parent" style="box-sizing:border-box;">
       Parent
       <div class="child" style="box-sizing:content-box;">
           Child
       </div>
   </div>
   
   <div class="parent" style="box-sizing:border-box;">
       Parent
       <div class="child" style="box-sizing:border-box;">
           Child
       </div>
   </div>				

   Rendering

   
   
   
   
   
   
   

   Parent

   Child

   
   
   

   Parent

   Child

   
   
   

   Parent

   Child

   
   
   

   Parent

   Child

CSS for layout

CSS contans several constructs that are specifically designed for visually laying out content.

Floats

The CSS property float places an element to the left or the right of its parent element and allows any content that follows to wrap around it. The CSS rules used to specify that an element should 'float' are:

float: left;
float: right; 

Flexbox

Flexbox is a construct that styles a container and any number of elements inside it. The contained elements are treated as a one-dimensional array, which can be wrapped over multiple rows or columns if needed.

To specify an element as a flexbox container, specify the following CSS rule for it:

display: flex; 

The flexbox is styled further using various rules applicable either to the container or the contained elements. This article provides detailed information on all the rules.

Grid

Grid is a newer construct that allows two-dimensional positioning of child elements in a container element. We do not cover the grid layout system in this module but you can read more about it here.

HTML tables

The HTML table is an element type for presenting data. Tables should not be used for layout.

HTML tables are built using the following main elements:

• table - the top-level table element
• tr - row element, always contained in a table element
• th - header cell element, always contained in a row element
• td - data cell element, always contained in a row element
• content, which is contained in the cell elements and which can be anything

<table>
   <tr>
      <th>heading1</th>
      <th>heading2</th>
      <th>heading3</th>
   </tr>
   <tr>
      <td>data11</td>
      <td>data21</td>
      <td>data31</td>
   </tr>
   <tr>
      <td>data12</td>
      <td>data22</td>
      <td>data32</td>
   </tr>
</table>

<style>
   table { border-collapse: collapse; }
   th, td { border: 1px solid black; padding: 0.2em 1em; }
   td { color: blue; }
</style>
<table>
   <tr>
      <th></th>
      <th>heading1</th>
      <th>heading2</th>
      <th>heading3</th>
   </tr>
   <tr>
      <th>rowHeading1</th>
      <td>data11</td>
      <td>data21</td>
      <td>data31</td>
   </tr>
   <tr>
      <th>rowHeading2</th>
      <td>data12</td>
      <td>data22</td>
      <td>data32</td>
   </tr>
</table>

Media queries

Media queries are a way of specifying media types and features (a full list can be found here) in any combination. They are used to control conditional application of CSS rulesets in two different ways.

1. The media query is specified as the value of a media attribute on an HTML element such as style or link. The CSS content associated with the element is then applied to the HTML page only if the media type and features of the client parsing the page match those contained in the media query.

   <link rel="stylesheet" type="text/css" href="print_styles.css" media="print">  

2. The media query is specified as part of a @media construct. In this case the CSS content in the body of the construct is applied to the HTML page only if the media type and features of the client parsing the page match those contained in the media query.

   @media screen and (max-width: 150px) {
       .panel {
           width: 100%;
           background-color: gray;
       }
   }