Categories
Expression Web My Book

In rewrite mode: New version of my book on the way!

Since Amazon.com was kind enough to list my book months before it’s done and I’ve been Tweeting about it for weeks there really is no reason to pretend it’s a secret any more: I am currently in the process of revising my book Sams Teach Yourself Microsoft Expression Web in 24 Hours 3 for the upcoming release of Expression Web 3 which is slated for some time later this summer.

Needless to say writing a book about software that not only is not out yet but is not even finished yet is a bit of a challenge. And like last year (when I wrote the first version of the book) I will probably spend the next couple of months in constant revision mode making new screen grabs, changing tutorials to fit a not-yet-completed user interface and so on. But hey, I’m not complaining: Writing these books means I have to learn and understand every minute detail about the software. And knowing your tools inside out makes for a faster and more productive work routine.

The new book is more than just an update to fit the new user interface: Over the past year I’ve received countless emails from readers with questions and comments about everything from how to save files in Expression Web to how I got a book deal and I’ve taken all these comments, suggestions and criticisms along with my own experiences and thoughts to rewrite many of the chapters and add new and exciting content. And yes, my sentences are just as long in the book!

New features in the book

The new version of the book will, amongst other things, include:

  • a completely new project that the reader will build from the ground up. The new project has a better design, more flexibility and new choices for the designer to make the site her own. The idea behind the new project is that once the site is completed by the end of Hour 24, the reader can simply replace the content from the book with her own content and launch the site.
  • New menu tutorials showcasing vertical and horizontal CSS based menus as well as a CSS based drop-down menu.
  • A CSS layout tutorial explaining how you can use CSS to create multiple different layouts within one site without having to make separate style sheets.
  • An entire chapter on cross-browser testing using SuperPreview and the other accessibility and reporting tools built into Expression Web 3.

I am currently rewriting Hour 18 and, having skipped some chapters, still have about 10 to go (plus a couple of apendixes and a bonus chapter) so if you have comments, questions, concerns or anything else you want to say before I wrap this baby up, please feel free to put it in the comments below or send me an email. The book is written to help you so if you need help, speak up!

That said, go to Amazon.com and buy the book now. That way you know you’ll have it the minute it comes out!

Categories
Tutorials Video Tutorials WordPress as CMS WordPress Themes

Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation


Finally, after a full week of catching up, here is the video tutorial version of my presentation at WordCamp Whistler 09 for those who were there and those who couldn’t come. The video is also available on WordPress.tv if you’d rather watch it there. I recorded the video over the weekend and it contains the entire presentation including all my fancy slides as well as the code examples and demos. The only thing you won’t see is me waving my hands around and messing up the code like I did at the actual event ;o)

Code Snippets

The last half of the presentation centers around creating Custom Page Templates and Custom Fields for layout purposes. To help you along in your own WordPress site development, here are those code snippets ready to be cut and pasted into your templates:

Custom Page Templates in 5 lines of code

This block of code is inserted at the very top of the Custom Page Template file. To get started, simply open the page.php file, save it under a different name, paste these 5 lines of code at the top of the document, save and upload to your server. To activate the new Custom Page Template just select it from the Template menu under Attributes in the Page Editor within WordPress.

 

Custom Fields in one line of code

This code can be used in any template file including but not limited to page.php, any Custom Page Templates, index.php, archives.php, single.php etc etc. The code returns a string of text that matches the text inserted in the custom field. Remember to replace $key with the actual name of the custom field. You can read more about Custom Fields and how to use them in the WordPress Codex.

 ID, '$key', true); ?> 

Custom Field that parses PHP code

This code is used to parse (interpret) PHP code inserted into custom fields. It is a bit wonky – for instance it terminates any other custom field code placed directly after it in a page – so use it with caution. Otherwise it works exactly as the code above.

 
ID, 'centerBox', true); ?> 
'.$boxContent); ?> 

Applications Used in the Presentation

After the presentation several people came up to me and asked what applications I used, so here is a short list:

BitNami WordPress Stack

The demo site I used in the presentation was actually installed and running locally within Windows 7. To achieve this I used an ingenious application named BitNami WordPress Stack. Once installed this application will run a fully functional version of WordPress with database entry, plug-ins, custom themes and everything else you want to throw at it right inside Windows (XP, Vista and Windows 7 supported) so you don’t have to keep uploading your files to a server or hassle through complicated XAMP installs to play around with WordPress while offline. You can even install several different WordPress and other open source CMS stacks on your computer simultaneously to further increase your productivity. I have no idea exactly how it works but BitNami works incredibly well. Just remember to set the IP address to “localhost” when you install it.
You can download the BitNami WordPress Stack here. For Mac users there is a similar application called MAMP but I know nothing about it.

Web Developer Add-On for FireFox

FireFox is my absolute favourite browser and I use it for browsing as well as in the design process. One of the main advantages of FireFox is the myriad of add-ons you can install that make web site development a lot easier. The one I use the most is the Web Developer Add-On. This small application within an application lets you see and mess with CSS, turn styles and JavaScript on and off and do tons of other stuff that makes it easier to dissect and troubleshoot buggy web pages. Combine it with the HTML Validator add-on and you have a true powerhouse in a small browser window.

Microsoft Expression Web 2

My web development platform of choice is Microsoft Expression Web 2. This new offering from Microsoft is what enables me to build custom WordPress themes and web sites like AnnyChih.com from scratch in less than 24 hours. There are many great things you can talk about with Expression Web 2 but for WordPress theme development the two main features is full PHP support, unrivaled CSS integration and Standards Based CSS generation right out of the box. If you want to know more about Expression Web 2 or want to learn how to use it you can read more on this blog or pick up a copy of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours. It’s a good read, I promise.

Categories
Tutorials WordPress WordPress Themes

Using Conditional Custom Fields for Advanced Layouts

An often overlooked function in the WordPress arsenal is Custom Fields. Overlooked because to most it makes no sense: What do you use a custom field for? And how do you use it? The answers to these questions differ depending on how the WordPress theme has been set up: Custom fields can be used for everything from passing information to plug-ins like Next Gen Gallery to feeding custom areas in the template with information. But it goes way beyond that. Custom Fields can also be used to create advanced layouts and design variances that can be triggered on a page by page or post by post basis. And this tehcnique can be edhanced further by adding conditions to the scripts so that the changes only appear when the field is actually activated.

Understanding custom fields

You can add custom fields to any WordPress post or page through the custom fields interface found right underneath the main text area. The custom field contains two elements; a name and a value. These are pretty self explanatory: When the template asks the server for the name, the value is returned. But this also means that unless the template actually asks for the field by name, nothing is returned. An example to show how this works in real life:

Artist menuA web site for an art gallery requires each artist page to have a series of sub-pages containing an artists statement, bio, CV and image gallery. Although adding an unordered list directly to the text body of the page would work, it would require the addition of style elements and tags – something WordPress doesn’t like very much. Not to mention it’s also cumbersome and messy. A better solution is to place all the style tags in the template and then just feed the menu in the form of a standard unordered list from a custom field, in this case with the name “artistMenu”. Then all that’s left is to get the template to call for the info in the custom field like this:

ID, "artistMenu", true); ?>

When the template is opened, the content of the custom field named “artistMenu” is placed as a string inside the artistMenu div. (To understand exactly how the php code works you can read about the get_post_meta template tag in the WordPress Codex.)

Making the custom fields conditional

The problem with the example above is that even if there is no custom field defined, the div is still placed in the page taking up space. Not a big problem when it’s just a horizontal menu but if you use a custom field to populate something larger, like an image gallery or a text box, it will look weird if the box is left empty. One way of avoiding this is to make two separate templates, one with the custom field code and one without, but that can quickly become complicated. And the whole idea here is to make things simpler, not more complicated. A better way is to make the code and the call for the custom field conditional on whether the custom field has been defined in the first place. This can be done with a simple if statement:

ID, "artistMenu", true))) { ?>
	
ID, "artistMenu", true); ?>

Using conditional custom fields as design elements

Now for the really cool stuff: Because we can make custom fields conditional, and because we can populate them with pretty much anything, we can use them not only to add images or text but also to add all new design and layout elements. In the site I built for Sablok & Salbok Notaries Public I used this technique to create a header element that only appears if the custom field is populated by an image or text. The actual appearance of the element is controlled by standard CSS. You can see this layout element as the blue horizontal area in the image and on the front page of the site.

Sablok & Sablok custom fieldIn this particular example the custom field can be populated by an image. Rather than forcing the user to input all the image code in the custom field manually I added some extra code in the template that gathers the width and height of the image and creates the proper element code. As a result all the user has to do is provide the URL for the image. There is also an or condition in the if statement so that the custom field code in the template is triggered either when an image field or a text field is defined:

ID, "image", true)) || (get_post_meta($post->ID, "text", true))) { ?>
	
ID, "image", true)) { $size = getimagesize(get_post_meta($post->ID, "image", true)); ?> " alt="" width="" height="" /> ID, "text", true)) {?> ID, "text", true); ?>
Categories
CSS Expression Web News

Pure CSS Drop-Down Menu tutorial – a slight omission

I just got a comment from a reader of my recent Expression Newsletter article The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web. He was having trouble getting the grey boxes to “fill out” properly which left the menu looking weird.

A quick review of his CSS told me the problem was he didn’t have the display property set to block. A slight omission for sure but I was more focused on where it originated. A quick read of the paragraph in the article showed me that somewhere in the editing (probably during my rigorous clean-up) this small but important piece of code was ommitted. Which means if people follow the tutorial step by step they’ll run into the same problem.

I’ve already informed the newsletter team of the issue and hopefully they’ll fix it presently. In the meantime, if you’ve run into this problem and you found your way to this blog, here is the full paragraph and the resulting code:

5th paragraph under the heading “Style the links”:

To set the height of the link go to the Block category and set the line-height attribute to 30px to match the height of the ul li style you defined earlier. The reason you are using the line-height attribute instead of the height attribute is that line-height automatically places the text at vertical center. If you were to use height you would have to set the vertical placement manually using padding. To set the width, go to the Position category and set width to 150px to match. Finally, to “fill out” the area with the background colour, go to the Layout category and set display to block.

The resulting code should look like this:

ul li a {
	background-color: #808080;
	color: #FFFFFF;
	width: 142px;
	display: block;
	text-decoration: none;
	line-height: 30px;
	padding-left: 8px;
}

You can find a full working version of the menu here and it’s CSS here for reference.

Categories
CSS Tutorials WordPress

Highlight current page in WordPress menus

I have published an updated tutorial on this topic entitled Highlight Current Page or Category in WordPress 3.0 Menus. Click here to read the new article.

WordPress has a lot of built in functionality that you can tap for advanced customization. One of these which is often ignored is the ability to highlight the current page in menus with CSS. By default, WordPress assigns a special style class to the button that points to the current page. By styling this class differently from the “regular” classes the current page button is highlighted.

In this tutorial we’ll look at how to utilize the built in current page styling, how to create a menu like the one you see above and also how to hard code the functionality into a menu that is not generated dynamically by WordPress.

Identifying the custom styles

If you view the source code of a WordPress blog with a menu like the Reader’s Companion you’ll see that the menu items have been given different classes automatically by the CMS:

The important classes here are page_item which styles all the menu items and current_page_item which is only applied to the current page item. By styling these two classes independently you can get some very nice results. To demonstrate how far you can take this I’ve made a mock-up page that simulates the end output of a WordPress menu with custom styling. You can find it here.

By taking a closer look at the CSS you’ll see that the page_item and current_page_item classes have different styling. The remainder of the code is set up to make the button backgrounds expand and contract in accordance with the Sliding Doors technique from A List Apart.The CSS code on the demo page is identical to the CSS code being used to style the page itself:

page_item styles:

.page_item a {
float: left;
display: block;
background: url("img/right-over.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #DDDDDD;
text-transform: uppercase;
}

.page_item a:hover {
color:white;
}

current_page_item styles:

.current_page_item {
float: left;
background: url("img/left-selected.png") no-repeat left top;
margin: 0;
padding: 0 0 0 8px;
}

.current_page_item a, .current_page_item a:hover {
float: left;
display: block;
background: url("img/right-selected.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #C7532D;
text-transform: uppercase;
}

If you already have your menu up and running properly, all you need to do is style these two classes and you’ll automatically have the current page highlighted in your menu. But this only applies to dynamic menus generated by WordPress. What happens when you hard code your menus yourself?

Assign dynamic styles to hard-coded menus

To get the same effect when you create a hard-coded menu you need to apply some clever PHP code to each of your menu items.

If you don’t understand what I mean by “hard-coded menu” consider this: By default your menu is called by a function within WordPress that lists all of your pages plus the Home page. This call usually looks something like this:

But this function lists all your pages. If you only want certain pages listed you have to take this function out and create a manual list yourself. This is a hard-coded menu.

To make the current_page_item class apply only to the current page item you need to add a small piece of PHP to each of your menu items. This line of code looks like this:

and is applied inside the li tag of each item. To give a concrete example I have added this code to the list items in the list example at the beginning of this tutorial:

When the page is loaded the PHP script looks to see if the page name matches the name in the is_page section and if it does, the current_page_item class is applied. Therefore the name you put in the is_page section of the PHP script must match the name of the page as created in WordPress exactly. If it does, the current page item will be highlighted dynamically.

I have published an updated tutorial on this topic entitled Highlight Current Page or Category in WordPress 3.0 Menus. Click here to read the new article.

Categories
CSS Expression Web Tutorials

Fancy Interactive Pure CSS List Boxes with Hover Effect

Box List with hover effect

There was an urgent need to expand the product gallery for the Nature’s Carpet website I built last fall. More specifically they were asking for the ability to easily update and ad new carpets with info and pictures. The info would be fairly minimal (name, product number, some short details) and the most important aspect would be the ability for the visitors to see high quality photos of the carpets as surfed through without having to open new windows etc. In accordance with my new found obsession with standards based code and CSS, I decided that this could be an interesting challenge: Could I make a tableless product gallery with pop-up images triggered by roll-over behaviours and some other fancy effects while still keeping all the info in an unordered list? Well, after some trial and error, the answer is yes. And here’s how it’s done (I actually did all the styling in Expression Web using the Modify Styles functions, but for brevity (and those of you who don’t use Expression Web) I am just going to list out the actual CSS code here):

From idea to reality

One of the challenges with the Nature’s Carpet site is that it will be constantly updated by the company itself. Would be easy if the backend was a CMS, but as of now it’s not so it is done manually. The tricky part was to make the code as fool proof as possible without making the site bland and uninteresting. I had this idea of having each carpet represented by a small rectangle with a thumb nail on top and the name and info underneath. When the visitor hovered over the rectangle, the background colour should change, and when she hovered over the image, a larger one should pop up automatically without having to do anything.

Step 1: Make a list

The most fool proof thing I could think of was a simple unordered list. And that’s easy enough:

  • ”Aureg

    Aureg - Bracken

    Berber loop PIle

Problem is an unordered list looks like an unordered list. What I wanted was something that looked like a 3 column table.

Step 2: Wrap the list items in a box

To keep the list styles separate from the rest of the list items in the page, everything needs to be wrapped in a box.I call it showcaseWrapper:

#showcaseWrapper {
}

All the content in each unordered list item should also be wrapped in it’s own box. Since there are several lists, it has to be a class rather than an id:

ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}

This strips away the regular spacing and elements featured in an unordered list. Now the list items themselves:

ul.showcaseList li {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}

Pretty straight forward: The margins are used to space the boxes evenly. Each box has a solid grey stroke and a white background. They float to the left and line up side by side rather than on top of each other. Take special note of the “width” and “height” numbers: They are not flexible because I want the items to line up nicely. These values match the content displayed perfectly and fills out the space nicely. Depending on what you want to put inside your boxes, you can change them. I would advice against making the height dynamic because if one box is taller than the rest, the order becomes disorder and the whole thing becomes a big mess.

Step 3: Make a Hover Effect

I also wanted the boxes to react to the mouse hovering over them to give the visitor a more interactive experience. This is surprisingly easy: Just ad a “hover” stage to the list item with some different info like this:

ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}

Notice that the only difference is the background colour. You could make it more fancy by using a graphic background and the sliding doors technique like Verlee did. Or you could make the entire list item into a link. The posibilities are endless.

Step 4: Style the Content

Now it’s up to you to style the content as necessary. Since everything is wrapped in the showcaseWrapper id, you can safely style everything within the wrapper without it affecting the rest of your site. Here are a couple of examples:

#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}

#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}

Final HTML Markup

  • ”Aureg

    Aureg - Bracken

    Berber loop PIle

Final CSS

/* The box that wraps the entire list /*

#showcaseWrapper {
}

/* Styles for text not contained in the lists  */

#showcaseWrapper h2 {
color: #666666;
font-size: 1.2em;
text-transform: uppercase;
margin-left: 5px;
margin-top: 0px;
clear: both;
}

#showcaseWrapper p {
padding : 10px;
clear : both;
}

#showcaseWrapper a {
color: #5F8C00;
}

#showcaseWrapper a:hover, #showcaseWrapper a:focus, #showcaseWrapper a:active {
color: #3D5900;
text-decoration : none;
}

/* The list itself  */

ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}

/* Turning each list item into a box and stacking them sideways */

ul.showcaseList li {
margin: 0 10px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}

/* The hover effect for the list box  */

ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}

/* Styles inside the list boxes */

#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}

#showcaseWrapper ul.showcaseList p {
font-size : 0.9em;
padding : 0;
margin: 5px 10px 10px 10px;
}

/* Padding the image */

#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}

Here again is the final result. And yes, it validates (provided the client didn’t mess with the html code).

Categories
CSS Expression Web Tutorials

Center a Page Horizontally Using CSS – An Expansion

This is an expansion to Anna Ullrich’s tutorial Center a page (horizontally) by using CSS which can be found on her blog. I’m picking up where she left off, so if you are confused about where we are when we start, I suggest you read her post first.

In this tutorial I’m going to isolate the CSS styling in Anna’s tutorial and move it to a separate style sheet (.css file). Doing this has two benefits: First off you can apply the same style sheet to multiple pages without having to insert all the code in each one. Seccondly, by leaving all the styling in a separate file, you can make global changes to a whole web site by just changing one file. This is a major benefit if you are working with larger sites that have many pages.

Starting point

At the end of Anna’s tutorial we were left with this block of code:






Untitled 1






Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id lectus. Vivamus vitae neque. Morbi at sapien. Etiam pharetra velit non dolor tempor bibendum. Nullam nibh. Aenean quis elit. Cras posuere, sem eu tincidunt dictum, nisl arcu laoreet ipsum, ac aliquet orci augue sed nulla. Nunc libero sapien, egestas id, aliquam eget, semper id, nunc. Quisque tempor consequat quam. Nullam sapien libero, viverra non, varius vitae, pharetra nec, nisi. Cras egestas consectetuer justo. Nullam ante orci, luctus ut, ullamcorper nec, eleifend eu, justo. Donec eleifend nibh eu nunc. Nunc porta consequat mauris. Cras libero diam, ullamcorper id, adipiscing non, tincidunt ac, eros. Ut auctor tortor vel purus. Nullam dapibus. Mauris pede urna, vestibulum eget, pellentesque a, consectetuer at, eros.

This code creates a page that looks like this:

Image borrowed from Anna Ulrich's blog

Let’s quickly dissect the code to help understand exactly what’s going on. The first important part of code is contained in the <head> area:


Everything within the <style type=”text/css”></style> containers will be interpreted by the browser as styles to be applied to the content further down in the document. What this particular piece of code says is that every time the style of the class “style1” is applied to content, that content should have a background colour of hot pink (#CC0066). You can see the class being called further down in the document:

Lorem ipsum dolor sit …

In addition to the very attractive pink background (sorry Anna, but in spite of my company name, pink really isn't my colour) there is more styling applied to the text, but this is contained in a div within the html code itself:

This line of code says that all content between the two <div></div> containers should be 395px wide and have a left and a right margin set to "auto". It's this line of code that centers the content: By telling the browser that both the left and right margins are automatic, the browser will give them equal values depending on how big the window is and put whatever is in between in the center.

But this is a somewhat messy way of doing it, because most of the styling is inside the html code and is not repeatable. What we want to do is make it a style that can be used again and again. You can avoid this problem by employing a different method when you build the site - I'll post a different tutorial for this technique - but for now, we'll just fix the code to make it more funcional:

Sifting out the styles

Since we already have the style settings, all we need to do is move them to the style area in the <head> by cutting and pasting the definitions like this:


To make this more understandable, we can rewrite it like this:


To make this work properly, you also have to make a small change in the html section replacing this:

with this:

Much simpler, right? Well, we can do even better. Notice how the <body> is also defined within the html code? We should move that to the styles section as well:


Finally we remove the styling from the <body> in the html section. Now the html is "clean" and the styles are all contained in a separate area.

Modifying the styles

This is where Expression Web's excellent CSS tools kick in for real. Now that we have separated all the styles, Expression Web lets us play around with them in any way we want without typing a single line of code.

Manage Styles panelYou'll notice that the Manage Styles panel now has two entries: body and .style1. By right-clicking on either one of them and clicking "Modify Style", you open the Modify Styles panel where you can edit the styles in pretty much any way you wish. If we open the panel for .style1, we see all the information contained in the style: The name of the style, what categories are active (in bold), a preview of the style as a whole and even a complete text sting of the entire style. From this panel you can make all possible changes to the style and see the results in real-time both in the preview window, the code window and also in the visual area of the design page. Likewise you can use the "New Style" button in the Manage Styles panel to create new styles through the same window. And once you have styles in your Manage Styles panel, you can apply them to any portion of the content simply by highlighting the area, right-clicking on the style you want and selecting "Apply Style".Style1 modifier

Making a separate style sheet or CSS file

Finally, we are going to port the styles to their own file, also called a Style Sheet or a .css file. Microsoft Expression makes this very easy. First off, you need to make a new .css file: File -> New -> CSS. This opens a fresh CSS document. Save it wherever you want and give it a reasonable name. I tend to name the main .html file and it's corresponding .css file the same, so since my main file is called centeredContent.html, I save my .css file as centeredContent.css in the same folder.

Next, click "Attach Style Sheet" in the Manage Styles panel and select the file you just created. This causes two things to happen: First, a line of code is added to the <head> of the html page:

This is a relative link telling the browser that there is a file that relates to the page called "centeredContent.css", that this file is a stylesheet and that it's content is css code.

NOTE: At this point I renamed the style ".style1" to ".box" to reflect exactly what it does. You can do this in the Manage Styles panel, in the code or in the pop-up window. Just remember to change the name in the html code as well so that where it used to say <div class="style1">, it should now say <div class="box">.

Secondly, the Manage Styles panel now shows the attached style sheet file:

managestyles2.jpg

But as you can see, centeredContent.css has no styles in it yet. So next we grab the styles and simply pull them down on top of the name of the .css file and voila, the styles are in the external style sheet. If you look at your <head> you'll see that the styles are gone from the <styles> area, so you can delete the whole <styles> section without anything happening. When you open the centeredContent.css file, you'll see that the styles are now resting there. You might think that this will cause problems, but because of the way Expression Web handles CSS code, nothing really changes. You can still manage the CSS code from the Manage Styles panel the same way you did before, from the html file, without ever opening the .css file, and you still have the same control as before. The main difference is that you can now create multiple html files that get their styles from the same .css file and that changing styles in that one file will impact all the other html files.

The end result looks the same (but appearances can be deceiving)

That's it. The page looks exactly the same as before, but the code is much cleaner and we now have the ability to build many pages using the same style sheet.

Final code for centeredContent.html:






Untitled 1






Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id lectus. Vivamus vitae neque. Morbi at sapien. Etiam pharetra velit non dolor tempor bibendum. Nullam nibh. Aenean quis elit. Cras posuere, sem eu tincidunt dictum, nisl arcu laoreet ipsum, ac aliquet orci augue sed nulla. Nunc libero sapien, egestas id, aliquam eget, semper id, nunc. Quisque tempor consequat quam. Nullam sapien libero, viverra non, varius vitae, pharetra nec, nisi. Cras egestas consectetuer justo. Nullam ante orci, luctus ut, ullamcorper nec, eleifend eu, justo. Donec eleifend nibh eu nunc. Nunc porta consequat mauris. Cras libero diam, ullamcorper id, adipiscing non, tincidunt ac, eros. Ut auctor tortor vel purus. Nullam dapibus. Mauris pede urna, vestibulum eget, pellentesque a, consectetuer at, eros.

Final code for centeredContent.css:

body {
background-color: #CCCCFF
}
.box {
background-color: #CC0066;
width: 395px;
margin-left: auto;
margin-right: auto;
}