Agenda

CSS Backgrounds

Using images requires either the HTML img tag or the CSS background-image property.

When to use HTML image tag

When to use CSS background-image

CSS supports several useful background related properties.

Compact background Property

The pattern to follow when using the background property to define several space delimited values at once:
background: <background-color> | <background-image> | <background-position> | <background-repeat> | <background-attachment>

Sprites

Each image on your website requires a separate request/response between the client and server. Using one larger image instead of several smaller images can result in a more effiecient client/server transaction, since it reduces the number of requests/responses that need to occur.

Advantages Of Sprites

Disadvantages Of Sprites

Not all images should be displayed as backgrounds! important content graphics should always use the img tag. this way the images will contribute to search engine optimization and maximize accessibility

Building Sprites

  1. Use a sprite generator or an image program like photoshop to create a strip or grid of images. This is also an ideal time to determine the correct offsets
  2. Assign a fixed height and width (large enough to show the image you need to display) to the tag you want to display the sprite.
  3. Assign the background-image and offset the polition of the sprite using background-position.
    • background: url("myimage.jpg") xOffset yOffset;
    • background: url("myimage.jpg") 0px 0px;
      places myimage.jpg in the top left corner ( 0px 0px )
    • background: url("myimage.jpg") -50px 0px;
      places myimage.jpg at the top, but shifts the start of the image 50 pixels to the right (offset -50px)
    • background: url("myimage.jpg") 50px 0px;
      places myimage.jpg at the top, but shifts the start of the image 50 pixels to the left (offset -50px)

The full sprite image will be a composite of smaller images, like this:

Separate tags can each display only a portion of the sprite image. You can add a title="" to each sprite to increase accessibility

Font Icons

An alternative to sprites for icons is to use icons defined as fonts or SVG (Scalable Vector Graphics). Font icons are useful if you want to scale and style the icons with CSS. There are several services online that will assist with this.

Some font icons will be available for download, others, like the popular Font Awesome can be accessed from their server.

<!-- load the font icons into HTML with the script tag -->
<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

<!-- apply the designated classes in the HTML -->
<i class="fas fa-bicycle"></i>
<i class="fas fa-car"></i>
<i class="fas fa-bus"></i>

/* add you own CSS styles to change the color, size etc */

Not all font icons will be very accessible by default. There are suggestions for making accessible Font Awesome icons. Other ways to ensure icons have accessible semantic value can be to group the icon with descriptive HTML text.

Bicycle Car Bus

CSS Reset

An excellent way to instruct a browser to set attributes to predictable values

Custom created and self-hosted, or public domain CDN hosted options and everything in between!

Advantages of CSS Resets

Popular CSS Resets

You can write your own CSS reset, or search online for resets used by others. A few popular choices include:

Using CSS Resets

Box Model Sizing

Padding and borders add to the size of a box model. This can sometimes cause difficulty as adjustments to the padding or border can ruin otherwise well positioned layouts. The box-sizing property can be used to include padding and border size in the box model measurements.

Default Box Model

In the example below, the four items cannot display on the same line, despite the 25% width each shares. This is due to the additional width added by the padding and border.

.item{
	background-color:#ababab;
	border:solid 1px black;
	padding:0px 5px;
	float:left;
	width:25%;	
}
Item One
Item Two
Item Three
Item Four

Using box-sizing: border-box;

Using box-sizing: border-box; will include the padding and border in the box model measurements, Reducing the need to adjust widths and heights to accommodate your desired box model dimensions.

.item{
	box-sizing: border-box;

	background-color:#ababab;
	border:solid 1px black;
	padding:0px 5px;
	float:left;
	width:25%;		
}
Item One
Item Two
Item Three
Item Four

If you want all page elements to use border-box sizing, ensure explicit inheritance using the universal selector, eg:

/* ensure all page elements use box-sizing:border-box; */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

CSS Positioning

Positioning

Floating

Flex Box

The Flex Box was introduced with CSS3, providing control of the display of grouped elements along a linear path.

Begin with well structured code: several sibling block tags within one containing parent. HTML lists are ideal for this. The containing parent is known as the flex box, the children tags will act as flex items.

Flex Box

Flex Items

Flex Box Resources

Grid Layout

CSS3 provides Grid Layout capabilities, allowing the control of grouped elements along a 2 dimensional (grid-like) plane.

As with Flex layouts, Grid layouts must begin with well structured code: several sibling block tags within one containing parent. The containing parent is the grid container, the children tags will act as grid items.

Grid Container

Grid Items

Grid Measurements and Functions

Grid Box Resources

To Do

The session 5 quiz will be closed book, written.