CSS How To Guide

We've made a few how to guides for CSS.

CSS Basics

Where to Specify Your CSS Styles
A guide to the three techniques; using an external css style sheet, inline style sheet or inline style.

How to apply CSS to an Element, Class or id

How to apply a CSS Style to an HTML tag that is within a particular class

border-box

Means border and padding is included in the width of the grid columns, so easier to keep your column widths as intended. See border-box explanation.

Overflow Property

Specifies what should happen if content overflows an element's box.

If your container div behind your page element such as a ul is not extending down to cover all of the ul, then adding an overflow: hidden can help:

overflow: hidden; /* Makes the container div extend down to cover the whole of the ul */

https://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

Set Page Background Colour

body {
background-color: #d7f9f7;
}

How to Centre a Div on a Page

New CSS Stylesheet Template

How to Reference an External CSS Stylesheet from a Web Page

Set a Background Image with CSS

body {
      background-image: url('images/name of-background-image.jpg');
}

Or for a div, e.g. box1:

#box1 {
      background-image: url('images/name-of-background-image.jpg');
}

Note, when background images have been added to divs, they are not printed. 

See Example 2.

Image Alignment

Quick image alignment using an inline style:

<img src="images/id1.jpg" style="float: right">

This will float an image to the right, so you need enough of a text block around it for it to look nice.

Make Images Responsive with CSS

Use the following class:

<style>

.ImageIsResponsive {
/*To centre image within div and make it responsive*/
/*max-width means will expand to its full size but no more*/
max-width: 90%;
height: auto;
/* To centre images within div column */
display: block;
margin: auto;
}

</style>

and apply it to your image as follows:

<img class="ImageIsResponsive" src="images/your-image.jpg">

Note, if you use:

max-width: 100%;
height: auto;

The image will never scale up larger than its original size, but will scale down if it has to. To allow the image to scale larger than its original size, use:

width: 100%;
height: auto;

The above responsive image CSS works on IE7 and IE9, but doesn't work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:

@media \0screen {
  img {
       width: auto; /* for ie 8 */
  }
}

Styles for the Span Tag and Highlighting Text Using the Span Tag

HTML:

<span="MyTextHighlighter">highlight this text please.</span>

CSS:

.MyTextHighlighter {
background-color: #FFFF99;
/* You can set padding on a span to bring the text away from the edge of the background. This makes your text appear to be on a banner. */
padding-left: 8px;
padding-right: 8px;
}

Example of Complex CSS Syntax

Here we have a surrounding div called PageNumbers, within which is an unordered list that displays page numbers. We want to be able to highlight the li that contains the current page number.

This is the HTML (some output by PHP):

<div id="PageNumbers">

<ul>

<?php
// List all the page numbers with a link to that page number.

for($i=1;$i<=$total;$i++)
{
if($i==$PageId) { echo "<li class='CurrentPage'>".$i."</li>"; }

else { echo "<li><a href='?PageId=".$i."'>".$i."</a></li>"; }
}
?>
</ul>

</div> <!-- close PageNumbers -->

This is the CSS that needs to be used to identify this specific li:

/* To highlight current page number in bright orange */
#PageNumbers ul li.CurrentPage {
background: #FF9900;
}

Difference Between CSS Visibility Property and Display Property

CSS visibility property - determines visibility of an element, but still takes up space.

CSS display property - determines whether an element is displayed or not.  If not displayed, it doesn't take up space. 

Display Property

display: block;

Displays an element as a block-level element.

A block-level element occupies the entire width available to it. This means it stretches out to the full width of its parent element (container).

Examples of block-level elements are:

<div>
<p>
<h1>
<form>

See also: Block-level Elements explained by w3schools

display: inline-block;

Makes a block-level element display in a line, i.e. on the same line, instead of as blocks, where each element would display on a new line.

See Also: inline-block explained at w3schools |inline-block at Learn CSS Layout

This is an easy way to create a grid of boxes that wraps nicely. Apply this CSS:

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

display: flex;

This relates to the flexbox, which was a new layout mode in CSS3. A flexbox ensures that elements behave predictably when the page must accommodate different screen sizes. See:

CSS3 Flexbox at w3schools

Flexbox Support by Browsers at caniuse.com

How to Set Uniform Border Around and Within Table with CSS

If you want all your borders to look the same, whether around or within the table, you need to set the table's border-collapse property to collapse, and then set a border on both the table and the table cells (td).

With the class tableMyData applied to the table, the CSS is:

.tableMyData {
/* Want same width border everywhere around and within table, so have to set border-collapse to 0px, and set a border on both the table and td within the table */
border: 1px solid #666666;
border-collapse: collapse;
}

.tableMyData th, td {
border: 1px solid #666666;
}

CSS for Alternate Row Colours in a Table

With the class tableMyData applied to the table, the CSS is:

/* Define the background color for all the ODD background rows */
.tableMyData tr:nth-child(odd){
background: #ffff66;
}

/* Define the background color for all the EVEN background rows */
.tableMyData tr:nth-child(even){
background: #ffcc33;
}

CSS for Lists and Navigation

To switch off bullet points and make the list display inline, use the following:

list-style-type: none;
display: inline;

Here's a full worked example. Note we are specifying a style for a particular div, in this case the navigation div:

HTML Code:

<div id="navcontainer">

<div id="navigation">

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="site-map.php">Site Map</a></li>
</ul>
<br class="clear"/> <!-- allows navigation div to expand to exact height necessary -->

</div><!-- close navigation -->

</div><!-- close navcontainer -->

CSS code:

.clear { clear: both; }
/* Apply style to a br and you can clear the columns of floating divs above */
/* clear both will clear both left and right floated elements above */

/* start navigation css */

/* navcontainer goes around navigation menu */
#navcontainer {
background-color: #CCFFCC;
}

#navigation {
margin:0px auto;
background-color: #CCFFCC;
}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #003300; /* Menu item text colour */
text-decoration: none;
border-right: 1px solid #FFFFFF;
}

#navigation li a:hover { background: #33CC33; }

/* end navigation css */

CSS for Tables

See CSS tables from w3schools.

Note, if you want to have padding in table cells, you need to set padding on td rather than on the table as a whole.

CSS for ASP.net DataGrids

See https://www.codeproject.com/Articles/7645/Add-some-Style-to-your-DataGrids

Flexbox

A Complete Guide to Flexbox by Chris Coyier at CSS-Tricks

Resources

How to Fix Cumulative Layout Shift and Improve Website Performance with Chrome Dev Tools

Being a Web Developer - Some useful guidance from Mark Brown.