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.


Chapter 4 Notes: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

CSS is about controlling the display characteristics of a website. It greatly simplifies what needs to be done to maintain and fix a site. With HTML code, as was discussed in Chapter 1, the browser interprets HTML tags. When you add a styling sheet with CSS, you are specifying how you want the browser to interpret it. You are essentially overriding the browser. In CSS, style rules express the style characteristics for an HTML element. A set of these rules is called a style sheet. A style rule consists of a selector and declaration. The selector determines the element to which the rule applies and the declaration, which is contained in curly brackets, shows the exact details of the property. End the value with a semicolon (;). Here is an example of a style rule:

p {color: blue;}

Color is the property and blue is the value. The p is the <p> paragraph you are styling.

You can combine CSS rules with HTML code in one of three ways: 1) inline style, 2) internal style sheet, and 3) external style sheet. External style sheets are best used when you want a set of styles to be applicable over a few pages (or many) on your site. An internal style sheet contains styles that apply only in the current sheet where the internal CSS code is. The inline style affects only the span of the words it surrounds. Any combination of these three style types gives great flexibility to web developers. A set of rules can easily apply to a span of pages in the website or just a few paragraphs on a specific page.

External style sheets are rules stored in another document (.css); it is not an HTML document. The <link> element allows you establish connection between your current working page and the external style sheet. It can only be used in the <head> section of the document.

<link href=”styles.css” rel=”stylesheet” type=”text/css”/>

“The <link> element tells the browser to find the specified style sheet. The href attribute states the relative URL of the style sheet. The rel attribute specifies the relationship between the link and current documents. The browser displays the Web page based on the CSS display information” (Sklar 155). As you can tell, an element can have many attributes listed out in that one line. As you build your website, you’ll find that an external style sheet is a VERY handy thing to have. All you need to to specify styles you want on your website, the THEME, so to speak, and any changes you want to make to your theme, you can make it in one location. The change(s) will be reflected on all the pages where you have linked this external style sheet.

Here is an example of an internal style sheet:


<title> Sample Doc </title>

<style type=”text/css”>

h1 {color: red;}



Note the attribute to the <style> element; the value “text/css” defines the style language type as Cascading Style Sheets.

Lastly, the inline style looks like this:

<h1 style=”color: blue”> Text goes here. Blah blah blah. </h1>

You generally will use the style attribute to override a style that was set earlier in the document in a higher level. In this example, the color blue will override a previously defined header color.

Write Clean Code

When a document is simple, then writing all the declarations of a property is fine, but style rules often have many declarations that makes it all too hard to read on one line. Consider this code:

p {font-family: arial, Helvetica, sans-serif; font-size: 85%; line-height: 110%; margin-left: 30px;}

It is better to write your code like this where it is much easier to find specific properties and edit. The declarations are combined into one rule:

p {

font-family: arial, helvetica, sans-serif;

font-size: 85%;

line-height: 110%;

margin-left: 30px;


Basic Selection Techniques

Remember that in the previous code, p, the element, is a type selector whereas the rules inside the curly brackets are the declarations. There are a few ways you can use these selectors to make changes in your document. The declared rules, using the above example again, apply to every instance of the element in the document.

To make your rules concise, you can group selectors together if the same rules apply. Instead of writing

h1 {color: red;}

h2 {color: red;}

you can write the rule in one line: h1, h2 {color: red;}.

A descendent selector is very useful when you are a chunk of code you want to edit and it is embedded deeper in the hierarchy. It lets you select elements that are the descendents of other elements. Check this out: p em {color: blue;} This rule selects only <em> elements that are contained in <p> elements. All other <em> elements are not affected. You can go a little crazier by delving deeper into the hierarchy by putting in white space between elements that are contained in each other. For example, the following rule applies to <em> elements that are within <li> elements within <ul> lists only: ul li em {color: red;}

Here’s one last bit of selector magic: You can set a universal selector that will apply changes for the entire document. This rule, though, is always overridden by more specific rules. For example, to set a default color for all elements within a document: * {color: purple;} To set all children of a certain element: div * {font-family: sans-serif;} To override the universal selector, just specify which elements to change:

* {color: purple;}

h1 {color: red;}

h2 {color: blue;}

Using Class and ID Selectors

The class selector allows you to write rules, name them, and then apply them to any element in your document. You can apply a style rule to an element by adding the class attribute to the element and set it to the name you have specified.

To declare a class, declare a style rule:

. special {color: red; margin-left: 30px;}

The period (.) flag character indicates that the selector is a class selector. The class name is “special”, and the rules contained in the curly brackets are the declarations. You can then add this rule into the document by using the class attribute:

<h1 class=”special”>This heading will be red with a 30px left margin.</h1>

Here is another example, applying a class selector to a paragraph. First, declare a style rule:

. intro {font-size: 125%; font-family: sans-serif;}

Put that into the document:

<p class=”intro”>This introductory paragraph will now be applied with the style set in the “intro” class selector.</p>

<p>This is what the normal paragraph will look like.</p>

You can limit the class attribute to certain elements by specifying which element you want it to apply. Include a prefix to the class selector:

h1.procedure {

font-family: sans-serif;

margin-left: 20px;


This style will not work if it is applied to elements other than <h1>.

Using the id Selector

The id attribute should be used only to refer to only one occurrence in the document, most commonly used to refer to layout sections – sidebar or footer. For example, if you want to specify that only one <p> element has the id “copyright”, you write it like this:

# copyright {width: 960px; border: solid thin black;}

# = flag character

copyright = id name

{ …} = declaration

To apply the selector, add it to your document:

<p id=”copyright”>This is the copyright information in this page.</p>

Just like the classes selector, you can specify a particular element to apply the id by doing this:

p#copyright {

font-family: times;

text-align: center;


Using the <div> and <span> Elements

<div> stands for division and <span> stands for span of words. They let you specify logical divisions within a document with names and style properties you’ve created. <div> is a block-level element and <span> is its inline equivalent.

The <div> is now the main content containers used to divvy up a page into sections, such as headers, footers, and columns. Here is an example of a customized column division:

div#column {

width: 200px;

height: auto;

padding: 15px;

border: thin solid;


To apply this rule in the document, use the id attribute to specify the exact type of division:

<div id=”column”>This division displays as a column of text in the browser window.</div>

The <span> element is much like the <em> and <strong> elements. Use it inline with the rest of the text that shows up on the page. To create a span, first write it up in the <style> element first. This example specifies a span named logo as a selector for the rule:


color: white;

background-color: black;


To use it, sandwich <span> between your text:

<p>Welcome to the <span class=”logo”>Sandwich Zone</span> Web Site.</p>

Chapter 3 Notes: Site Planning

Here, again, are some of the notes I took while reading Principles of Web Design by Joel Sklar. This post has not been proofread. It is here merely to be my reference if I need help in these topics later on.

Site Planning

As with all major projects, building a website begins with the design process. It may often begin with a brief sketch of you website layout. Make all the necessary edits as you see fit for designing your home page and subsequent sections and subsections. If this is a big team project, there will probably be many meetings to discuss this portion of the project. Draft a timeline for due dates and milestones. As the project evolves, you should not find yourself needing to plan nor edit your design as you build the site. All design experimentation should be at the beginning of the design process.

When sitting down to think about the design of a website, think of these requirements:

  • Purpose for the site – information dissemination, product promotion, social outlet, etc.
  • Target audience – students in school, women, men, sports fans, etc.
  • Specifications – logos, branding, accessibility, color scheme

Soon after organizing what you want on the website, begin creating design sketches and page mockups. Organize the page as you like in your sketches. After you have created multiple drafts and as your design becomes more stable, your mockup will become more refined and you will be able to lay out exactly what goes where. A more detailed sketch is often called a wireframe, which is often a complete sketch of what your usable site will look like.

Constructions and content development will take the most time and require the most technical skills. Testing for quality assurance and usability will also occur as necessary during the development stage. Usability testing ensures that the viewer sees what you think they will see and can navigate the site without too much trouble.

Next comes publishing and promoting your site through various media and then site maintenance. Maintenance is always required to keep fresh material on the site. New sections may be added to include more content.

Tracing back to what we discussed in the Chapter 2 notes, it is important to draft up sketch of your website, the home page and subsequent section pages. After that process and after coming up with a web design that you like and are happy with, the next part of the planning process is creating a site specification document. This site spec doc is a more detailed description of what your site entails and helps keep you in focus as you build the site. (Don’t lose sight of your site!)

A site spec doc should answer the following questions:

  • Who is the client for this site? This is not the user of your end-product but the person or organization who decided they need a website. What does the client hope to gain from this internet product? For this Web Design course, the client I am “working for” is the Berkeley Optometry. “We” are creating this website to disseminate information about our School and OD program.
  • What is your mission statement?
  • What are the requirements for the site, i.e., your list of wants? Be explicit in your required functions.
  • Are your requirements feasible? Do you have a team that can build what the client is looking for?
  • How do you know that you’ve built a successful website? What are some factors you can use to assess the effectiveness of the new site?
  • What is your target audience? How do you know? Where and how can you find out more about your audience?
  • What are the limiting technical factors affecting your site?
  • Do you have a budget? What are some milestones for the site? What is the schedule like?
  • Are you building a completely new site or making changes to an existing site? If it is an existing site, why are you making changes and what are some things you can learn from the first edition of the site?

About content building – again, always keep your user in mind. This is starting to sound like an adage in web-design-speak now, but it rings true. No one wants to build a website only to have it go kahoot when the user reaches your site and then leaves frustrated after 20 clicks to find the information they are looking for. Your team of designers and other stakeholders may be more concerned about the look and feel of the site, which is completely valid, but you as the site developer should pay more attention to your user analyses data. Let those testing results guide your decision on how to build content. The goal here is to create a website your target audience will enjoy using. Ensure the ease of access for content they are looking for and provide a good navigation system for them to discover new content!

File naming conventions – just to make a quick note about this. The ISO 9660 Standard is the base file-naming convention that works on all operating systems. The ISO 9660 has a maximum of eight letters followed by a period and a three-letter extension; allowed characters are letters, numbers, and underscore ( _ ) symbol. To ensure that all systems can open your files correctly, start the habit of naming your files using all lowercase. While there is no case sensitivity between Macs and PCs, the UNIX server IS case sensitive. <picture.gif> and <Picture.gif> are two different files for UNIX.


URL stands for Uniform Resource Locator. There are two kinds of URLs – complete and partial. A complete URL contains the exact location of the file page. Here is a breakdown of a complete URL: <a href=”http://”>

http = protocol = domain

business/trends = path

laptop.htm = file

Partial URLs are links to files that reside in your own computer or server. These omit the protocol and domain or server name, and specify a path to the file that is in the current server. Here is an example: <a href=”laptop.htm”>link text</a>

Now here comes a point in the textbook that I don’t quite get and would like some clarification. In the section about setting your directory structure, there is a little bit more about partial URLs. Now, remember that your files need to be transferrable from your own computer to the server that hosts your site. Any URLs that you link in your pages that lead to another page on your website must include paths that are transferrable. Sklar writes, “You should never specify an absolute path in your partial URLs” (Sklar 126). By definition, a partial URL will not go far enough to reach the root directory, does it? Or is Sklar referring to the fact that you just omit the domain in the partial URL but might still need to write out the full path to the file. So, instead of writing /business/trends/laptop.htm, we should write /trends/laptop.htm. Am I getting this right?

After you have down your main content outline, you can start sketching out your folder structure (or a site flowchart, as I like to think of it). This structure will help you organize your site in a way that makes sense to both you and your user. There are two common types of structures – single and hierarchical. A simple site (like a personal site or a mom-and-pop shop site) can easily have a single folder structure. All the files needed for the main page are contained in one folder. However, if your site is a little bit more complicated (for example, with sectional tabs and interactive media), it is a good idea to organize your files in a hierarchical way. You will have one main folder and many sub-folders (and sub-sub-folders).

A quick note to self about creating hyperlinks between your pages (I will probably read about this later in subsequent chapters): <a href=”../index.htm”>Home Page</a> will lead you up one folder to your home directory. <img src=”../images/logo.gif”> is an example of going up one level and then down again to find a logo for your current page.