---

NOTE: You must have a page called homework.html and it must include all of the following:

This includes:

1. Register your blog
2. Delicious
3. Create resume and artist statement
4. Gravatar
5. Facebook Page
6. Add social book marking on your blog
7. LinkedIn – 100% complete
8. Create Twitter and YouTube accounts
9. Create Resume, Index, Contact and Artist Statement pages
10. Mark up your resume
11. Put all homework links on homework.html page
12. Longest page, add back to top markup
13. Make and unordered list
14. Create an external CSS for the bio and resume pages
15. Add div’s to all your pages
16. Use styles including font, color size
17. Create boxmodel.html
18. Recreate Layout 1 and Layout II
19. Recreate the sample layouts
20. Gather all materials for website development including all graphics, images, videos
21. Make an image gallery with 6 images including thumbnail and full sizes
22. Create wireframes
23. Create styleframes
24. Create site map
25. Create css stylesheet that includes different backgrounds, headings, links and list styles for each of the three divs
26. Add rounded corners to your divs
27. Create a single image roll over menu
28. Create a photoshop design template for your homepage and save as a jpg
29. Create production graphics for your site

---

HOMEWORK | WEEK 11

1. Create a new sitemap that incorporates any changes you made after reviewing your site’s content.

2. Create style frames for the rest of your pages.

3. Have your contact page and at least one other page coded in HTML/CSS by next week’s class

---

NOTE: You must have a page called homework.html and it must include all of the following:

This includes:

1. Register your blog
2. Delicious
3. Create resume and artist statement
4. Gravatar
5. Facebook Page
6. Add social book marking on your blog
7. LinkedIn – 100% complete
8. Create Twitter and YouTube accounts
9. Create Resume, Index, Contact and Artist Statement pages
10. Mark up your resume
11. Put all homework links on homework.html page
12. Longest page, add back to top markup
13. Make and unordered list
14. Create an external CSS for the bio and resume pages
15. Add div’s to all your pages
16. Use styles including font, color size
17. Create boxmodel.html
18. Recreate Layout 1 and Layout II
19. Recreate the sample layouts
20. Gather all materials for website development including all graphics, images, videos
21. Make an image gallery with 6 images including thumbnail and full sizes
22. Create wireframes
23. Create styleframes
24. Create site map
25. Create css stylesheet that includes different backgrounds, headings, links and list styles for each of the three divs
26. Add rounded corners to your divs
27. Create a single image roll over menu
28. Create a photoshop design template for your homepage and save as a jpg
29. Create production graphics for your site

---

HOMEWORK | WEEK 10

1. Create a new sitemap that incorporates any changes you made after reviewing your site’s content.
2. Create the remaining wire frames for all pages on your site:

• Your wire frame layouts will need to be intuitive to read and close to the scale that it will appear in the web browser. You will need to indicate if a part of the layout will fit above the “fold” (the portion of the screen that is visible to the user without requiring the user to scroll).
•  Use plain boxes to show the placement of “side bar” content areas
•  Design the page layout as 1280 x 800
• For regular text, use a 8 or 9 points font size to correspond to normal text sizes within the common default settings with the browser.
• Use an underline to indicate all links (text or images)
• If you use elements such as drop down menus or text field boxes, make sure they are recognizable and always treated the same within your wire frame layout

3. Create style frames for your home, about and contact pages.

Information Architecture

The role of an Information Architect in Web development is to develop the structure, labeling, and navigation schemes of the site. This phase is alternately known as Interaction Design and Experience Design and Information Design. The Site Outline is the first step in this process. Now we are going to visualize our Information Architecture in the form of a Functionality Specification or Functional Spec.

With the Functional Spec you create a blueprint for your site much the way an architect does for a building. The purpose of this spec is to synthesize needs identified in the requirments document into a concrete plan for development. It includes a visual map of the overall hierarchy and flow of your site, and detail views for each interface or page. At this point in the process, we are not concerned with the graphical interface of images, colors, and fonts that will go into your site, but the outlining basic structure and functionality.

Your impulse as a designer may be to skip the functional spec and jump right into graphic design. The problem with this is that it is too easy to get caught up in aesthetic decisions which can overshadow the functionality and usability of your site.

CREATING A FUNCTIONAL SPEC

For our purposes, the Functional Spec will consist of a Site Map (or Site Flow) and a set of Wireframes.

The Site Map is a visual representation of all the pages of the site and how the user navigates through them.

A Wireframe is a diagram that represents the layout, content, and functionality of each page.

• Del.icio.us links for Information Architecture

You can create these documents in any drawing or page layout program you are comfortable with. A great resource for making wireframes is Google’s Mockingbird. It’s a Google Chrome add-on

A site map is a  flow diagram of the pages contained in your website. This is the essential information architecture needed to build your website.

Tips for creating usable navigational systems:

Navigation should:

• Be easy to learn.
• Be consistent throughout the website.
• Provide feedback, such as the use of breadcrumbs to indicate how to navigate back to where the user started.
• Use the minimum number of clicks to arrive at the next destination.
• Use clear and intuitive labels, based on the user’s perspective and terminology.
• Support user tasks.
• Have each link be distinct from other links.
• Group navigation into logical units.
• Avoid making the user scroll to get to important navigation or submit buttons.
• Not disable the browser’s back button.

Create an outline of  your website and include:

• Content Inventory: a hierarchical view of the site content, typically in a spreadsheet format, which briefly describes the content that should appear on each page and indicates where pages belong in terms of global and local navigation.
• Site Maps: visual diagrams that reflect site navigation and main content areas. They are usually constructed to look like flowcharts and show how users will navigate from one section to another. Other formats may also indicate the relationships between pages on the site.

Usability First is a great resource for developing your website. Go to this link and READ IT!

Here’s an example of what a sitemap could look like.

You can create your sitemap using any number of different tools. Here are a couple of great tools used to create sitemaps. Great designer resources.

• WriteMaps
• SlickPlan

Wire frame: Where Content Elements Appear Within the Page

Wireframes are rough illustrations of page content and structure, which may also indicate how users will interact with the website. The first step is to great these diagram to establish page layout and then you will move to the visual design. Wireframes are useful for communicating early design ideas showing exactly what information, links, content, promotional space, and navigation will be on every page of the site. Wireframes may illustrate design priorities in cases where various types of information appear to be competing.

Since a site map does not indicate any hot links that may appear within a page, your wire frame will help you to determine how a user will navigate through your site beyond the main navigation. The purpose of a wire frame is to determine where each content piece will be displayed on the page, and which pieces will be displayed most prominently.
You do not need to worry about how each piece will look. The wire frame example below uses a tabbed navigation approach, however this visual is merely a placeholder and the designer may take a totally different aesthetic approach once the design phase begins.

=====================================================================

HOMEWORK | WEEK 9

1. Create a new folder in your DropBox and call it Photoshop Project II Website Design.
2. Complete DO NOW 1-4 as listed above
3. Complete video tutorial
4. Complete ONE of the six website design tutorials

• a preliminary wire frame for your home page
•  two (2) interior pages ( try your about page, your portfolio page or your contact page)
• Your wire frame layouts will need to be intuitive to read and close to the scale that it will appear in the web browser. You will need to indicate if a part of the layout will fit above the “fold” (the portion of the screen that is visible to the user without requiring the user to scroll
•  Design the page layout as 1280 x 800

Read: The following reference…
Barrett Communications – Wireframes: A Vital Step in Your Web Site Strategy
http://www.barrettcommunications.com/contentmgr/showdetails.php/id/378

Portfolio Tips for Design Students

Take a look at student work for inspiration

Great Resume Design

 

 

---

<div id=”nav”>

<ul id="navlinks">
   <li id="home"><a href="#">Home</a></li>
   <li id="navprojects"><a href="#">Projects</a></li>
   <li id="navclients"><a href="#">Clients</a></li>
   <li id="navevents"><a href="#">Events</a></li>
   <li id="navabout"><a href="#">About</a></li>
   <li id="navcontact"><a href="#">Contact</a></li>
 </ul>

</div>

Then, set up a unordered list of links in your html page. This is a nice semantic way to represent navigation:

Make sure that you give the ul and each li unique ids.

Then, in your CSS, you can use link states (a, a:hover, a:active, a:visited) and background position to reveal the appropriate section of the background image.

To style elements in a document, you apply rules to selectors.  A “selector” is a way of referring to some specific element or group of elements on a page. If you want to apply a style to all paragraphs, then the <p> (paragraph) tag is our “selector” – it’s what we’re “selecting” to style. Selectors can either be standard HTML tags, or custom elements you define.

A “rule” is a set of properties that get applied to the selected element or elements. A rule can be as simple as a single line declaring the background color of the element, or a complex grouping of properties that work together to achieve an effect.

Let’s walk through styling a single paragraph. First, attach a style to an element on the page, and create rules as name:value pairs, separated by semi-colons. (You’re writing this all in your HTML page)

This single paragraph, the paragraph that you applied the color “red” to, will look different from every other paragraph on the page. The text will be red.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo …

Now, delete the “<p style=”color:red;> from your HTML page. Go into Text Wrangler and create a new page and call it style.css.  This will be your EXTERNAL stylesheet. See the image below.

In the new style.css document you’ve created, write in the following:

p {

Note: You must put this link inside the header tags. <link rel=”stylesheet” type=”text/css” href=”style.css” /> You can add as many rules as you want. See a few more below:

 p {

NO style tags are to be used inside your HTML document. Everything will be placed in an external stylesheet called style.css.

---

CSS Basics – HTML/CSS

---

CLASS VS. ID

There are two constructs for custom selectors — “class” and “id.” Class can be applied as many times as you like on a page. IDs work almost the same way, but apply to just one element on a page. When creating rules for IDs, simply prepend the selector name with “#” rather than “.”  Example:

Since you will probably only ever have one footer on a page, it makes sense to use this as an ID rather than as a class. You would invoke this ruleset in your document like this:

Complete Code Academy

 You can easily apply a <p> style to both a paragraph andlists or a block quote or just about anything else. You could just duplicate the rule, but it would give you more work because any time you modified one, you’d have to modify all the rest as well. CSS easily solves this problem by allowing you list a set of selectors for a given rule.  See below:

p, ol, ul, dd, blockquote {
color:#00ff00;
font-size:14px;
font-family:Verdana;
}

Now the rules in the set will apply equally to paragraphs, ordered, unordered and definition lists, and to blockquotes. If you want to set basic rules that will apply to your entire document, there’s an easier way — just use the  <body> tag as your selector:

body {
color:#00ff00;
font-size:14px;
font-family:Verdana;
}

Since all visible elements in a document (elements that show up on your website) fall inside the opening and closing <body> tags, the rules above will apply to everything on the page. CSS favors the specific over the general so you can easily override any rule on a per-selector basis. For example:

body {
color:#000000;
font-size:14px;
font-family:Verdana;

}

blockquote {
color:#ffffff;}

Even though you’ve defined a color for the entire document within you <body> tage, and your block quotes fall inside that document, blockquotes will be rendered with a white font (#ffffff stands for white). The cascade says that even though everything on the page is black by default (you listed that in the <body> tag), blockquotes are treated like an exception.

Narrowing the Scope of Rulesets

We can also create the opposite situation. Above, I showed you the class .mango, which applied to anything on the page with class="mango". What if  you want to be more specific than that or if  you only want those rules to apply to paragraphs in that specific class, but not to blockquotes in that class. This is done like this:

p.mango {
color:darkred;
background-color:blue;
border:2px solid black;
padding:10px;
}
The rule above would not be invoked for standard paragraphs, nor would it be invoked for blockquotes with a class of “mango.” It would only be invoked for paragraphs with a class of “mango.” This “narrowing” approach can be used for IDs as well as classes:

p#mango {
color:darkred;
background-color:blue;
border:2px solid black;
padding:10px;
}

The rule above would not be invoked for standard paragraphs, nor would it be invoked for blockquotes with a class of “mango.” It would only be invoked for paragraphs with a class of “mango”. This “narrowing” approach can be used for IDs as well as classes:

p#mango{
color:darkred;
background-color:bisque;
border:2px solid gray;
padding:10px;

}

---

FONTS AND TEXT

You can  set the font face (font-family), the font size, font style (such as italic) and the font weight (such as bold):

p {
font-family:”Arial”,Verdana;Georgia,Serif;
font-size:10pt;
font-weight:bold;
font-style:underline;
}

Font sizes can be set in pixels, points, ems, or relative values.

From within CSS you can control how wide your letters and lines are spaced, set your text color, align text right, left or center, and even change the case of text.

Setting text color and letter spacing:

Letter spacing can be set in points, pixels, or ems. “Em” is a typesetter’s term, referring to the width of one character. It is recommend to use ems when setting text sizes and widths, because it flexes automatically with the user’s current screen resolution and magnification.

Line spacing is not set in ems – it’s a simple decimal value representing a factor of the current line height. In the example below, “1.8″ means “spacing between lines should be 1.8 times whatever the current height of a line of text is.”

p {
color:#166A3F;
font-weight:bold;
letter-spacing: 0.3em;
line-height: 1.8;
}

If you wanted to make the text uppercase, just add the following line : text-transform: uppercase;  If you wanted to change the text alignment, just add the following line: text-align: center|left|right; (You would need to choose either center, left or right). You could also add: text-align:justify; if you wanted the text to justify into a block.

---

BORDERS 

You can put a border around almost anything on your page including a single character, an image or a section of a page. Borders can be of any thickness, any color, and can be solid, dotted, or dashed. If you use border: by itself, the border will go around all four sides of the element. Or you can use border-top:, border-left: and so on to control each side of the border independently. You can can consolidate all of the attributes of the border into a single command by separating the attributes with spaces.

Example:

p {
border:1px solid #4c97ff;
}

By not specifying a side, you get the same 1px consistent border on all four sides of an element. If you want to control each specific side of a border, use: (change the colors to what ever you like)
p {
border-top:3px solid #595128;
border-right:5px solid #3d3600;
border-left:2px dotted #5bbe00;
border-bottom:5px dashed #005062; 
}

Using four different colors on a border would be pretty ugly so try his. A 1px  border around a paragraph would look like this:

---

BACKGROUNDS

You can set the background of any element with your choice of either a solid color or a tiled (repeating) image.

Example:

p {
background-color:#00ff00;
}

If you want to use a tiled image as a background, just specify its relative or absolute URL:

p {
background-image: url(‘http://a3.twimg.com/profile_images/454374541/iTunesU_Button.jpg’)
}

By default, a background image will tile repeatedly in all directions, to fill up the space it’s assigned to. You can tell your background image to only repeat along the x or y axis. In the next example, we use both a background color and a background image. We tell the background image to only repeat vertically. To prevent the text from sitting on top of the tiled image, we add 120px of left padding.

p {
background-image: url(‘http://a3.twimg.com/profile_images/454374541/iTunesU_Button.jpg’);
background-repeat: repeat-y;
background-color:#D33333;
padding:10px;
padding-left:120px;
border:1px solid #899999;
}

---

MARGINS AND PADDING

Margins refer to the area around, or outside of an element. Padding, refers to the area between the edges of a box and what lives inside that box. An easy way to remember which is which is to think of mailing a breakable object  – you fill the empty space in the box with foam peanuts to protect the item. Those foam peanuts are your padding. The margin would then be the space between your box and the next box in the truck. Just remember: Padding is inside the box, margins are outside the box.

In CSS, you’ll use padding to give an element some breathing room within the space it’s in, as we did with the last example in the Backgrounds section. You typically use margins to cause a box or element to be offset from adjacent elements. The syntax for working with padding and margins is very similar.

Padding and margins may just seem decorative right now, but they’ll become critical when we start getting into CSS page layout, so make sure you understand them.

Example:

p {
padding:25px;
border:4px solid blue;
}

Would give you below:

Just like borders, padding can be controlled for the whole box, as above, or per-side:
p {
padding-top:0px; 
padding-right:25px; 
padding-bottom:45px;
padding-left:15px; 
border:4px solid blue;
}

When setting padding values separately for different sides of a box, you can use this shorthand, which achieves exactly the same result as the previous example:

p {

padding:0px 25px 45px 15px;
border:4px solid blue;
}

MARGINS

To illustrate how margins work, I’ll show you how one element (box) relates to another. For this example, we’ll be putting a sample paragraph inside of an element called a “div”. A div is an arbitrary box used to contain other things. I’ll put a border on the div so you can see it, then put a paragraph with its own border inside that div, so you can see what the margin attributes do to it.

div {
padding:0px;
margin:0px;
border:1px solid blue;
background-color:#AFEEBD;
}
p {
padding:10px;
margin:10px;
border:1px solid blue;
background-color:#ACCFDB;

}

The blue space above represents the paragraph, while the green space represents the margin between that paragraph and it’s containing box. As with padding, we can control margin depths per-side, rather than globally.

LISTS AND CSS

An ordered or unordered list can be much more than a simple set of bullet points – in CSS, lists are often used to create navigation elements such as horizontal or vertical menus. Let’s start with options for simple lists.

For unordered lists, you can select whether the bullet style should be circular, square, or none:

ul {
list-style-type: square;
}
apple
Is a
List
Try changing “square” to “circle” or “disc” for other effects. You can also use an image in place of your bullets by specifying its URL:

ul {
list-style-image: url(http://www.w3schools.com/css/arrow.gif);
}
This
Is a
List
Ordered lists can have any combination of Roman numerals, decimal, alphabetic characters and more. A nice trick is to nest lists within lists, then use the CSS nested selector syntax we learned earlier to style different levels of your list differently, like this:

ol {
list-style-type: upper-roman;
}

ol ol {
list-style-type: decimal;
}

ol ol ol {
list-style-type: lower-alpha;
}
Person
Place
Region
Country
United States
Canada
Mexico
State
Thing
In the example here, ordered lists “ol” are told to use “upper-roman” as the list-style-type, unless it’s an ordered list inside of an ordered list, in which case the list-style-type is “decimal”… unless it’s a triply nested ordered list, in which case the list-style-type is “lower-alpha.” This technique is the key to building CSS based flyout navigation menus.

LISTS AS MENUS IN CSS

By default, list items are “block-level elements,” which means each one gets a line break above and below itself. To make a list appear horizontally, we need to override the default block behavior and use CSS to tell list items that they’re “inline” elements instead. In this example, we’ve also added background-color and padding to our list items, to make them appear like real menu items. Here is the simple HTML and CSS to create a basic list menu.

li {
display: inline;
list-style-type: none;
background-color:#425899;
color:white;
padding:5px;
}

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
Which seen by the browser it looks like this:

To make the experience more intuitive, we want to add some rollover behavior, so that the list items change color when the mouse rolls over them. To accomplish this, we’ll first make our list items into links (in the HTML). Then we’ll again use the CSS nested selector syntax to detect a linked item inside of a list item. Finally, we’ll use the anchor tag’s :hover pseudo-property to change appearance when a list item is in a certain state – namely, when the mouse is hovering over it.

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

li a {
background-color: #60996C;
color:white;
padding:5px;
text-decoration:none; 
}

li a:hover { 
/* This rule is only in effect when mouse is hovering */
background-color: #567499;
}

<ul>
<li><a href=”#”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>
</ul>

See below. Roll mouse over list items to see the hover state in effect.

• Item one
• Item two
• Item three
• Item four
• Item five

---

Complete Code Academy

5. Review

Let’s go over what you’ve learned in this lesson.

<div id=”nav”>

<ul id="navlinks">
   <li id="home"><a href="#">Home</a></li>
   <li id="navprojects"><a href="#">Projects</a></li>
   <li id="navclients"><a href="#">Clients</a></li>
   <li id="navevents"><a href="#">Events</a></li>
   <li id="navabout"><a href="#">About</a></li>
   <li id="navcontact"><a href="#">Contact</a></li>
 </ul>

</div>

Then, set up a unordered list of links in your html page. This is a nice semantic way to represent navigation:

Make sure that you give the ul and each li unique ids.

Then, in your CSS, you can use link states (a, a:hover, a:active, a:visited) and background position to reveal the appropriate section of the background image.

The Box Model
An explanation of what the box model is and how it is treated by different user agents.

To style elements in a document, you apply rules to selectors.  A “selector” is a way of referring to some specific element or group of elements on a page. If you want to apply a style to all paragraphs, then the <p> (paragraph) tag is our “selector” – it’s what we’re “selecting” to style. Selectors can either be standard HTML tags, or custom elements you define.

A “rule” is a set of properties that get applied to the selected element or elements. A rule can be as simple as a single line declaring the background color of the element, or a complex grouping of properties that work together to achieve an effect.

Let’s walk through styling a single paragraph. First, attach a style to an element on the page, and create rules as name:value pairs, separated by semi-colons. (You’re writing this all in your HTML page)

This single paragraph, the paragraph that you applied the color “red” to, will look different from every other paragraph on the page. The text will be red.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo …

Now, delete the “<p style=”color:red;> from your HTML page. Go into Text Wrangler and create a new page and call it style.css.  This will be your EXTERNAL stylesheet. See the image below.

In the new style.css document you’ve created, write in the following:

p {

Note: You must put this link inside the header tags. <link rel=”stylesheet” type=”text/css” href=”style.css” /> You can add as many rules as you want. See a few more below:

 p {

NO style tags are to be used inside your HTML document. Everything will be placed in an external stylesheet called style.css.

---

CSS Basics – HTML/CSS

---

CLASS VS. ID

There are two constructs for custom selectors — “class” and “id.” Class can be applied as many times as you like on a page. IDs work almost the same way, but apply to just one element on a page. When creating rules for IDs, simply prepend the selector name with “#” rather than “.”  Example:

Since you will probably only ever have one footer on a page, it makes sense to use this as an ID rather than as a class. You would invoke this ruleset in your document like this:

 You can easily apply a <p> style to both a paragraph andlists or a block quote or just about anything else. You could just duplicate the rule, but it would give you more work because any time you modified one, you’d have to modify all the rest as well. CSS easily solves this problem by allowing you list a set of selectors for a given rule.  See below:

p, ol, ul, dd, blockquote {
color:#00ff00;
font-size:14px;
font-family:Verdana;
}

Now the rules in the set will apply equally to paragraphs, ordered, unordered and definition lists, and to blockquotes. If you want to set basic rules that will apply to your entire document, there’s an easier way — just use the  <body> tag as your selector:

body {
color:#00ff00;
font-size:14px;
font-family:Verdana;
}

Since all visible elements in a document (elements that show up on your website) fall inside the opening and closing <body> tags, the rules above will apply to everything on the page. CSS favors the specific over the general so you can easily override any rule on a per-selector basis. For example:

body {
color:#000000;
font-size:14px;
font-family:Verdana;

}

blockquote {
color:#ffffff;}

Even though you’ve defined a color for the entire document within you <body> tage, and your block quotes fall inside that document, blockquotes will be rendered with a white font (#ffffff stands for white). The cascade says that even though everything on the page is black by default (you listed that in the <body> tag), blockquotes are treated like an exception.

Narrowing the Scope of Rulesets

We can also create the opposite situation. Above, I showed you the class .mango, which applied to anything on the page with class="mango". What if  you want to be more specific than that or if  you only want those rules to apply to paragraphs in that specific class, but not to blockquotes in that class. This is done like this:

p.mango {
color:darkred;
background-color:blue;
border:2px solid black;
padding:10px;
}
The rule above would not be invoked for standard paragraphs, nor would it be invoked for blockquotes with a class of “mango.” It would only be invoked for paragraphs with a class of “mango.” This “narrowing” approach can be used for IDs as well as classes:

p#mango {
color:darkred;
background-color:blue;
border:2px solid black;
padding:10px;
}

The rule above would not be invoked for standard paragraphs, nor would it be invoked for blockquotes with a class of “mango.” It would only be invoked for paragraphs with a class of “mango”. This “narrowing” approach can be used for IDs as well as classes:

p#mango{
color:darkred;
background-color:bisque;
border:2px solid gray;
padding:10px;

}

---

FONTS AND TEXT

You can  set the font face (font-family), the font size, font style (such as italic) and the font weight (such as bold):

p {
font-family:”Arial”,Verdana;Georgia,Serif;
font-size:10pt;
font-weight:bold;
font-style:underline;
}

Font sizes can be set in pixels, points, ems, or relative values.

From within CSS you can control how wide your letters and lines are spaced, set your text color, align text right, left or center, and even change the case of text.

Setting text color and letter spacing:

Letter spacing can be set in points, pixels, or ems. “Em” is a typesetter’s term, referring to the width of one character. It is recommend to use ems when setting text sizes and widths, because it flexes automatically with the user’s current screen resolution and magnification.

Line spacing is not set in ems – it’s a simple decimal value representing a factor of the current line height. In the example below, “1.8″ means “spacing between lines should be 1.8 times whatever the current height of a line of text is.”

p {
color:#166A3F;
font-weight:bold;
letter-spacing: 0.3em;
line-height: 1.8;
}

If you wanted to make the text uppercase, just add the following line : text-transform: uppercase;  If you wanted to change the text alignment, just add the following line: text-align: center|left|right; (You would need to choose either center, left or right). You could also add: text-align:justify; if you wanted the text to justify into a block.

---

BORDERS 

You can put a border around almost anything on your page including a single character, an image or a section of a page. Borders can be of any thickness, any color, and can be solid, dotted, or dashed. If you use border: by itself, the border will go around all four sides of the element. Or you can use border-top:, border-left: and so on to control each side of the border independently. You can can consolidate all of the attributes of the border into a single command by separating the attributes with spaces.

Example:

p {
border:1px solid #4c97ff;
}

By not specifying a side, you get the same 1px consistent border on all four sides of an element. If you want to control each specific side of a border, use: (change the colors to what ever you like)
p {
border-top:3px solid #595128;
border-right:5px solid #3d3600;
border-left:2px dotted #5bbe00;
border-bottom:5px dashed #005062; 
}

Using four different colors on a border would be pretty ugly so try his. A 1px  border around a paragraph would look like this:

---

BACKGROUNDS

You can set the background of any element with your choice of either a solid color or a tiled (repeating) image.

Example:

p {
background-color:#00ff00;
}

If you want to use a tiled image as a background, just specify its relative or absolute URL:

p {
background-image: url(‘http://a3.twimg.com/profile_images/454374541/iTunesU_Button.jpg’)
}

By default, a background image will tile repeatedly in all directions, to fill up the space it’s assigned to. You can tell your background image to only repeat along the x or y axis. In the next example, we use both a background color and a background image. We tell the background image to only repeat vertically. To prevent the text from sitting on top of the tiled image, we add 120px of left padding.

p {
background-image: url(‘http://a3.twimg.com/profile_images/454374541/iTunesU_Button.jpg’);
background-repeat: repeat-y;
background-color:#D33333;
padding:10px;
padding-left:120px;
border:1px solid #899999;
}

---

MARGINS AND PADDING

Margins refer to the area around, or outside of an element. Padding, refers to the area between the edges of a box and what lives inside that box. An easy way to remember which is which is to think of mailing a breakable object  – you fill the empty space in the box with foam peanuts to protect the item. Those foam peanuts are your padding. The margin would then be the space between your box and the next box in the truck. Just remember: Padding is inside the box, margins are outside the box.

In CSS, you’ll use padding to give an element some breathing room within the space it’s in, as we did with the last example in the Backgrounds section. You typically use margins to cause a box or element to be offset from adjacent elements. The syntax for working with padding and margins is very similar.

Padding and margins may just seem decorative right now, but they’ll become critical when we start getting into CSS page layout, so make sure you understand them.

Example:

p {
padding:25px;
border:4px solid blue;
}

Would give you below:

Just like borders, padding can be controlled for the whole box, as above, or per-side:
p {
padding-top:0px; 
padding-right:25px; 
padding-bottom:45px;
padding-left:15px; 
border:4px solid blue;
}

When setting padding values separately for different sides of a box, you can use this shorthand, which achieves exactly the same result as the previous example:

p {

padding:0px 25px 45px 15px;
border:4px solid blue;
}

MARGINS

To illustrate how margins work, I’ll show you how one element (box) relates to another. For this example, we’ll be putting a sample paragraph inside of an element called a “div”. A div is an arbitrary box used to contain other things. I’ll put a border on the div so you can see it, then put a paragraph with its own border inside that div, so you can see what the margin attributes do to it.

div {
padding:0px;
margin:0px;
border:1px solid blue;
background-color:#AFEEBD;
}
p {
padding:10px;
margin:10px;
border:1px solid blue;
background-color:#ACCFDB;

}

The blue space above represents the paragraph, while the green space represents the margin between that paragraph and it’s containing box. As with padding, we can control margin depths per-side, rather than globally.

LISTS AND CSS

An ordered or unordered list can be much more than a simple set of bullet points – in CSS, lists are often used to create navigation elements such as horizontal or vertical menus. Let’s start with options for simple lists.

For unordered lists, you can select whether the bullet style should be circular, square, or none:

ul {
list-style-type: square;
}
apple
Is a
List
Try changing “square” to “circle” or “disc” for other effects. You can also use an image in place of your bullets by specifying its URL:

ul {
list-style-image: url(http://www.w3schools.com/css/arrow.gif);
}
This
Is a
List
Ordered lists can have any combination of Roman numerals, decimal, alphabetic characters and more. A nice trick is to nest lists within lists, then use the CSS nested selector syntax we learned earlier to style different levels of your list differently, like this:

ol {
list-style-type: upper-roman;
}

ol ol {
list-style-type: decimal;
}

ol ol ol {
list-style-type: lower-alpha;
}
Person
Place
Region
Country
United States
Canada
Mexico
State
Thing
In the example here, ordered lists “ol” are told to use “upper-roman” as the list-style-type, unless it’s an ordered list inside of an ordered list, in which case the list-style-type is “decimal”… unless it’s a triply nested ordered list, in which case the list-style-type is “lower-alpha.” This technique is the key to building CSS based flyout navigation menus.

LISTS AS MENUS IN CSS

By default, list items are “block-level elements,” which means each one gets a line break above and below itself. To make a list appear horizontally, we need to override the default block behavior and use CSS to tell list items that they’re “inline” elements instead. In this example, we’ve also added background-color and padding to our list items, to make them appear like real menu items. Here is the simple HTML and CSS to create a basic list menu.

li {
display: inline;
list-style-type: none;
background-color:#425899;
color:white;
padding:5px;
}

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
Which seen by the browser it looks like this:

To make the experience more intuitive, we want to add some rollover behavior, so that the list items change color when the mouse rolls over them. To accomplish this, we’ll first make our list items into links (in the HTML). Then we’ll again use the CSS nested selector syntax to detect a linked item inside of a list item. Finally, we’ll use the anchor tag’s :hover pseudo-property to change appearance when a list item is in a certain state – namely, when the mouse is hovering over it.

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

li a {
background-color: #60996C;
color:white;
padding:5px;
text-decoration:none; 
}

li a:hover { 
/* This rule is only in effect when mouse is hovering */
background-color: #567499;
}

<ul>
<li><a href=”#”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>
</ul>

See below. Roll mouse over list items to see the hover state in effect.

• Item one
• Item two
• Item three
• Item four
• Item five