Chapter 8: Graphics and Color

Find a good balance between images and colors so that you do not overwhelm your visitors with the visuals and/or make them wait for your image to load while they are casually browsing. Use a good color combination (color palette) that can communicate to your readers, give them the kind of emotional response you want, and guide them throughout your site. Test your colors on a variety of browsers and test your download speeds so that you know your images do not discourage your readers.

Understanding Graphic File Formats

GIF: Graphics Interchange Format – designed for online graphics. It uses a “lossless” comprehension technique and will not lose your colors when the image is compressed. GIFs use no more than 256 colors, and the less color you have, the more the image can be compressed. Because of this, a GIF is a good format to use for simple graphics and line art. It is not a good choice for photographs. One special property for GIFs (and one I’m sure I’ll be using frequently) is the GIF transparency. You can choose one color in the GIF to be transparent, for instance, the white color background bordering an image. A second special GIF property is its capacity to store multiple still images and display them in succession – GIF animation. When you create the animation, you can determine the time it takes between shots and how many times to replay it.

JPG or JPEG: Joint Photographic Experts Group – Who in the world names this?? I’m glad we can just call this the j-peg format. This format was designed for photos. It stores 24-bit information, allowing millions of different colors. Unlike the GIF, though, any compression to your file will result in the loss of color on the image. This is a “lossy” compression routine. JPEGs have relatively quick download times, so at least there is that to make up for the color loss. In Adobe Photoshop, when you choose to save as a JPEG, it will show you the approximate download time based on the file size.

A word of advice: remember to save your GIF and JPEG files as a renamed file or a duplicate of the original. These formats compress the original image, and once you save it as a GIF or JPEG, you cannot return to the original quality.

PNG: Portable Networks Graphics – specially designed for the web. It is a lossless 8-bit format and is also able to compress images to sizes smaller than the GIF. PNG supports transparencies and interlacing (the gradual display of a graphic in a series of passes as it comes to your browser) but it does not support animations.

SVG: Scalable Vector Graphics – this format is a language for describing two-dimensional graphics using XML. SVGs sound like they are used commonly in HTML, XML, JavaScrip and CSS. It saves lines and curves, images, text, animation and interactive events. The key point about SVGs is that they are scalable and fit for web browsing. SVG graphics can be viewed bigger or smaller than their originals, making them responsive and cross-platform compatible.

Vector graphics display images as geometric formulas while raster graphics display images pixel by pixel. Most computer displays are of the raster type. There are also interlacing and progressive displays. Interlacing and progressive formats go through different passes as the graphic is displayed on your screen. As more data is gathered from the server, the clearer your graphic image will become.

Using the Image <img> Element

The image element <img> is by definition a replacement element. The browser replaces the element with an image in its place. The browser will treat the image as it treats a character; the normal image placement is the same alignment as the rest of your text and is at the baseline. In addition to the mandatory source attribute (src), it is good practice to also include a title and alternative text in the <img> element. The title is the text that shows up when your cursor is hovered over the image. The alternative text is what shows up if the browser cannot load the image for some reason. Your site should still be navigable even if the images are not showing. Here is an example:

<img src=”image.jpeg” width=”258” height=”130” alt=”Company Logo Graphic” title=”Click the logo to view the company home page”>

When you create image and convert to a hypertext image, that is, the image is now clickable and will redirect your page to a new location, the browser will default to displaying a blue border around the Image. After you click the image and return to the original page, there will be a purple border around it. Most of the time, we’ll go, “Why is there such an unnecessary feature?” The border will not match our design and we can figure out that the image is clickable when we hover over it. To get rid of the border, simply add this to your html code where the <img> shows up: <style=”border: none;”>


Chapter 7: Page Layouts

By default, your browser will display elements one page after another, from top to bottom and left to right. Element positioning can be affected by margins and padding. This chapter will focus on using boxes, something we learned in chapter 6, to position elements that will result in a page design we like.

A flow element actually makes creating layouts fairly easy and simple. With your header set in place, if you wanted to divide your main page body into, say, 3 columns, simply create two of those columns as float elements. Imagine that your basic website will have columns in the following order: navigation bar, article, and a miscellaneous sidebar. The navigation bar should float to the left and the sidebar should float to the right. The middle segment, the article, can be set with a larger margin (taking into consideration how large the navigation bar will be) or it can also be set to float left. Sometimes an element will not be floating correctly in the position where you want it. In these cases, ‘clearing’ the box of left, right, or both items can put it to the proper row. This will also force the wrapper (the big box that contains every element) to also encompass elements that are floating a little below the rest.

Building A Flexible Layout

Flexible layouts adapt to the size of your browser or viewing medium. Your elements will probably be sized using percentages. A flexible layout is great to adapt to different monitor sizes, but there is probably a limit to how much you want your content to stretch. If your browser is very, very wide, you don’t want your lines of text to stretch to only 1 line wide, which is possible for short paragraphs. Instead, you will probably want to specify a maximum width (max-width) and/or a minimum width (min-width) so that your layout is not stretched too thin. The optimal width for a 800 x 600 monitor screen is 750 pixels. The optimal width for a 1280 x 1024 display is 1220 pixels. Create a wrapper to contain your style:

div.wrapper {

width: 100%;

max-width: 1220px;

min-width: 780px;


You then would only need to create a div element that will enclose all other elements in your page layout. Apply your wrapper like this:

<div id=”wrapper”> <!-opens wrapper–>

<div id=”header”> header contents </div>

<div id =”navig”> navigation content </div>

<div id=”article”> article content </div>


As I was working on the Individual Case Project for this module, I had the hardest time figuring out the left/right margins for the divisions. Most of my things (header, article, footer) were placed in the center, but there is no ‘center’ float, which is annoying. I tried out using “margin: 0px auto 0px;” in a few places so that the left/right could be centered, but nope, it doesn’t always work. (It did for the header and footer, but not so much for the other things.) Why was this? Also, another problem I had was if I created <div> columns (3 of them) and wanted to float things inside it, say “float: right;” why wouldn’t my image float to the right (or right-align)? It is actually floating on the left right now, and I don’t know how to fix it or what is wrong with my code.

Chapter 6: Box Properties

Box Properties

CSS’ box properties allows us to control the margins, padding and border characteristics of block elements. With their special properties such as float, clear, width and height, we will be able to create content and position them free-flowingly on our webpages.

The CSS Visual Formatting Model describes how the content pages should be displayed by the browser. As usual, how our page turns out to the viewer greatly depends on their browser version. Here are two direct definitions of the two types of box elements, taken from Sklar on page 245:

  • Block – Block-level boxes appear as blocks, like paragraphs. They can contain other block elements or inline boxes that contain the element content.
  • Inline – Inline-level boxes contain the content within the block-level elements. They do not form new blocks of content.

The CSS display property tells the browser how to display the elements. The initial value is ‘inline’, but you can change this to block, list-item, table and table-row (although the last two are not supported by all browsers). The display property is often used to create horizontal navigation lists.

li { display: inline;

list-style-type: none; /*This hides the bullets normally displayed with unordered lists*/



<li><a href=”url”>Home</a></li>

<li><a href=”url”>Prodcuts</a></li>

Etc. etc.


To clarify – the border is the actual line boxing in the content. The margin is the space between the border and outside content. The padding is the space between the content and the inside border. A sample simple code looks like this:

Continue reading

Chapter 5: Web Typography

The type of font you use in your website is an aesthetic piece as well as a text guidance piece for your audience. Carefully chosen typography can provide a natural sense of hierarchy that can guide your readers through your content. It is a valuable information tool that can greatly enhance usability. CSS today is a robust tool we can use to manipulate a variety of text properties. We no longer need to use <font> tags and create graphics for text as in the past. This is great news; flexibility in design!

One definitional note about typography – what is the difference between typeface and font?

  • Typeface: Strictly speaking, typeface is the name of the type, such as Times New Roman or Futura Condensed.
  • Font: A font refers to a typeface of a particular size, for example, Times 24 point.
  • For the most part, these two terms are interchangeable on the web.

Keep the following principles in mind as you create an effective design for your site:

  • Choose fewer fonts and sizes: Pick a few sizes and weights in a font family and stick with it. Consistently applying the same fonts and the same combination of styles gives your website a sense of identity. You can also make your site more interesting by varying the weight, size, white space and color of your text.
  • Use available fonts: Font information is user-based in HTML and this frequently serves a problem in web design. Because of the variable nature of font files, you can never be sure that a user has the specific font you used to create your website. Later in the chapter, we will learn how to specify an alternative font if your font is not installed in the user’s computer.
  • Design for legibility: Keep fonts big enough to be legible but avoid specialty fonts that degrade when viewed online.
  • Don’t use text as graphics: Remember that every graphic you include in your document needs to be downloaded (and then cached for later). This slows down the loading time of a page. Save your graphics for important purposes.

Understanding CSS Measurements

The measurement values you choose ultimately depends on the outcome medium of your document. If you want to publish an article for print, you can use inches or points (72 points to an inch). These are called absolute units. If you were to publish to a website, though, you might want to set your measurement values in terms of percentage to the viewer’s browser or to pixels. This is because the viewer’s medium varies in size and quality and is scalable. It is better to use a relative unit in this case to better suit the user’s view.

Using CSS Font Properties

The font-family property lets you specify a generic font-family name to use, for example, Helvetica. String together a list of font families separated by commas to give the browser alternatives to match: p {font-family: arial, Helvetica, sans-serif;} This is like giving the browser a list of fall-back fonts to use. If you don’t specify which font type but give the browser a generic font family, the browser will display whatever is the default: p {font-family: san-serif;} If the font family is more than one word long (has white space), the font name must be contained in quotes: p {font-family: “lucida console”}

One cool feature of CSS that gets around using default browser fonts is the @font-face property. This lets you use a font that is not located in the user’s browser or computer and define the name of the font. Fonts are usually specified in TrueType Format (TTF). Here is an example of a font-face property:


{font-family: generica;

src: url(


h1 {font-family: generica, serif;}

Remember to use a fallback font (I specified serif in the example above) in case the browser could not download your defined font.

Throughout this whole chapter in the Sklar textbook, there are tables about specifying the font family, font size, font style, font variant, font weight, font stretch, etc. I won’t take notes of them here; refer back to the text when necessary – pages 202-211. This also applies to CSS Text Spacing Properties on pages 211-223. There are many changes you can do to your text to make your webpage look snazzy!


Check out dash from general assembly. Make your own website projects. Learn html/css and javascript.