Styling with Code: Fully Immersed in CSS
What You’ll Learn in This Hour:
. How to read CSS code
. How inline styles differ from other styles
. How to apply styles, classes, and IDs to tags in Code view
. How to create external style sheets and apply them to multiple pages
In Hour 10, “Bringing Style to Substance with Cascading Style Sheets,” and Hour 11,
“Getting Boxed In, Part 2: Knee Deep in CSS,” you learned how to create styles and apply them to content in Design view. But that’s just half the story. To fully grasp what Cascading Style Sheets (CSS) is all about, you need to go to the source and learn how to read the code.
Fortunately, CSS code is simple to learn, especially when you have Expression Web 4’s many CSS tools available whenever you get confused. Just as in Design view, you have full access to the CSS panels when you work in Code view, and all the tools you used in the past two hours are available for use in the same way.
This hour goes beyond the basics, and you learn how styling actually works and how to create, apply, and modify styles without using the tools every time. Because the tools Expression Web 4 provides are excellent, they are sometimes cumbersome to use, especially if you make quick, minor changes and already know what to do.
Other benefits to using Code view are that you have more control when it comes to the placement and attribution of tags, and you can get a better overview of what is happening to your code. Also, you get a much clearer picture of the meaning of the phrase “separating the style from the content.”
ptg7913109 In addition to how to read, write, and dissect CSS code, this hour covers how to create
separate style sheets and apply them to multiple files. You also see how easy it is to move styles from one file to another and to apply a style created in one file to other files without having to re-create it. By the end of this hour, you will have the neces- sary tools and understanding to use CSS not only as a styling tool, but also as a plat- form to create visually stunning websites with clean and concise code that looks the same across most, if not all, browsers and platforms.
Introducing CSS: The Code Version
In the previous two hours, you created a series of styles, classes, and IDs. In this hour, you inspect and expand on these, so if you didn’t do all the tasks in earlier hours, you should replace the default.html file and the myCameras.html file with the ones supplied in the lesson files for this hour.
To work, CSS requires two sets of code: the styles and the tags to which the styles are attached. Let’s take a closer look at the styles as they appear in code form. Expression Web 4 gives you multiple ways to view the CSS code. By far, the easiest way of doing so is simply to hover over the style in question in the Manage Styles panel. When you do so, a ScreenTip opens to display the entire style code in a pop-up window (see Figure 12.1).
FIGURE 12.1 Hovering the mouse pointer over a style in the Manage Styles panel brings up a ScreenTip that displays the CSS code for that style.
With the default.html file open, hovering over the #sidebarstyle gives you the following output:
#sidebar {
padding: 10px;
border-radius: 5px;
ptg7913109 background-color: #CCCCCC;
border: 1px solid #808080;
width: 250px;
}
This is a typical style. It consists of the style name followed by a set of curly braces.
The braces contain all the actual styling code: Each attribute followed by its respec- tive values after a colon. A semicolon separates the attributes.
As you can see, the CSS code Expression Web 4 generates is easy to read. The only reason why each attribute is on a separate line is for readability. If you want to, you could remove all the line breaks and write the entire style on one line, but, as you can see, it would be much harder to read:
#sidebar { padding: 10px; border-radius: 5px; background-color: #cccccc;
border: 1px solid #808080; width: 250px;}
Because of the limited physical width of this book, the entire line doesn’t fit on one single line when printed. Normally, if you look at the line in Expression Web 4, it would appear on one line. Just like in this book, there are times when CSS con- fined to a single line is arbitrarily divided into multiple lines by the application you use to look at the code. Even so, the style works the exact same way. The infor- mation you should walk away with here is that it is the semicolons that define when a line of code ends, not the line breaks.
By the Way
Now that you know what the CSS code looks like, the next logical question is, “Where is it located?” If you paid close attention when you created the styles in the previous two hours, you might already have a good idea. Directly under the Selector box in the New and Modify Style dialog was the Define In box, which was set to Current page.
That means all the styles you created so far are stored in the same page as the content—more specifically, at the top of the page inside the <head>tag. The <head>tag contains functional but nonvisual content and information about the current page.
To see where the styles are stored, switch to Code view and scroll to the top of the page. Directly under the <meta>tags is a tag that says <style type=”text/css”>. You can find all the styles within this tag (see Figure 12.2).
In Hour 8, “Cracking the Code: Working in Code View,” you were introduced to the Code View toolbar. Now is a good time to use it. To get an idea of how much code Expression Web 4 created for you when you created the styles, place your cursor on any of the lines with CSS code and then click the Select Tag button on the toolbar. This highlights all the CSS code. Likewise, to highlight the code within one style, you can use the Select Block button. However, reading this code can still be daunting. Currently, you have 13 styles defined, and many style sheets have hundreds or even thousands of styles.
ptg7913109 To find a particular style in Code view, all you need to do is click the style in question
in the Manage Styles panel, and Expression Web 4 highlights the style for you. While in the Manage Styles panel, you can even use the arrow keys to navigate between styles for quick-and-easy access to the particular style, class, or ID on which you want to work.
The Value of Separation
Throughout this book, there have been several mentions of the styles being separate from the content. Now, for the first time, you see what this means in real life: The style code is literally separate from the rest of the content in the page. There are sev- eral reasons for this. First, keeping the styles separate means that style code does not clutter the content portion of the page. Second, it’s easier to make changes to both the styles and the content because they are easily distinguishable. Last, it means you don’t have to insert styling code in the page whenever you add new content.
When you add CSS code to the head of an HTML page, the browser reads it and applies it to whatever content it finds below. In practical terms, it works kind of like a coin sorter. If you just dump various coins in a bucket, they have no order. However, a coin sorter sorts, separates, and puts each different coin size in its own collector.
In HTML, the CSS code becomes the different coin slots, and as the content flows through the filter, the different kinds of content fall into their appropriate slots.
Therefore, rather than sorting each piece of content individually by applying styles directly to it, CSS works as a template from which all the content sorts simultaneously.
FIGURE 12.2 You can find the CSS code at the top of the default.html page inside the
<head>tag in Code view.
ptg7913109
Understanding Inline Styles
But what is a rule without an exception? In Hour 10, you created an inline style that applied to just one section of the page. You removed that inline style and replaced it with a class in Hour 11, so you need to make a new one. But this time, you see what goes on in the code and, through that, learn how the inline style gets its name.
1. With the default.html page open in Split view, scroll to the bottom of the page and place the cursor anywhere inside the last paragraph. Click the New Style button to create a new style and then use the drop-down menu to set the selec- tor name to (Inline Style).
2. In the Font category, set font-sizeto0.8emandfont-varianttosmall-caps. In the Block category, set text-aligntocenter. Click OK to apply the new inline style, the result of which you can see in Figure 12.3.
FIGURE 12.3 You can use inline styles to create special- ized styles for small segments of content that should appear different from the regular content.
The last paragraph of the page changes appearance after you apply the inline style.
But what matters is what happened in Code view. Look at the tag for this particular paragraph:
<p style=”font-size: 0.8em; font-variant: small-caps; text-align: center”>
Rather than creating a new style and adding it to the list at the top of the page, Expression Web 4 added this style inside the tag of the affected paragraph. The style is in the same line as the content—hence the name inline style. This explains not
ptg7913109
▼
only why the style you just created affects only this particular paragraph, but also serves as a good example of why you should always try to keep your styles separate from your content. Just imagine what your HTML code would look like if every tag had to contain the necessary style attributes! With that said, inline styles are useful if you need to apply a special style featured only once in the entire page or site.
Try It Yourself
Create a New Style in Code View Using IntelliSense
In Code view, you can make direct changes to the CSS code or create new styles with the help of IntelliSense. In this example, you create a new imgstyle from scratch to give the image the appearance of having a white background with a gray border.
1. With the myCameras.html page open in Code view, find the <style type=“text/css”>tag and create a new line directly below it.
2. To create the new style, type imand IntelliSense suggests img. Press the Enter key to accept img, press the spacebar, and type a beginning curly bracket ({). In response, IntelliSense automatically moves you to the next line, inserts the end curly bracket on the line below, and brings up a list of all available attributes that apply to the imgtag (see Figure 12.4).
FIGURE 12.4 IntelliSense automatically closes any bracket you start and gives you a list of the avail- able attributes.
3. To create 5-pixel padding around the image, type pa. IntelliSense suggests padding. Press Enter to complete the word.
4. IntelliSense now opens a ScreenTip to tell you what kind of information the padding attribute requires. Because you want 5-pixel padding on all four sides, you can type 5pxand be done with it. If you want different values for each side, follow the ScreenTip and type, for example, 5px 4px 4px 10px(top, right, bottom, left). Complete the line by entering a semicolon and pressing Enter to create a new line.
▼
ptg7913109 To create a border, you need to set three attributes: border-style,border-width, and
border-color. To help you remember this, IntelliSense reminds you and helps you set all three variables on one line: On the new line, type border:. This opens the Screen- Tip for the borderattribute. IntelliSense now asks you for the values it needs. First up isborder-width. Type 1pxand press the spacebar. The ScreenTip automatically jumps to the next variable, border-color, and opens a drop-down menu of colors for you (see Figure 12.5). Pick the gray color and press the spacebar. IntelliSense now asks you for the border-style. Select solidfrom the drop-down menu and finish the line with a semicolon. The two new lines should read padding:5px;andborder: 1px gray solid;.
FIGURE 12.5 Depending on which variable is required, Intelli- Sense provides a drop-down menu of options for you to choose from.
In this case, it provides a list of colors for the border-color variable.
To see the effects of your changes, click anywhere inside Design view to apply the changes. The image now has a 1-pixel solid gray border and 5 pixels of white padding.
This example shows you how easy it is to write and make changes to CSS code in Code view and how IntelliSense works with you to simplify the code-writing process.
Applying Classes to Tags in Code View
In Hour 11, you learned to apply special styles to certain content with the use of classes. In one example, you used classes to change the position of the image in the myCameras.html page. This example provides a good basis for learning how Expres- sion Web 4 applies classes to tags in Code view. If you open myCameras.html in Split view and click the image, the relevant code highlights in Code view (see Figure 12.6).
<img alt=”Most of my cameras together” height=”355”
src=”Images/camerasSmall.jpg”
width=”600” class=”alignCenter” usemap=”#FPMap0” />
▲
▼
ptg7913109 Inspecting the tag code, you see a new attribute toward the end:
class=“alignCenter”. This is how Expression Web 4 applies classes to tags, whether they are selectors, spans, or divs. To change the class, all you need to do is edit the class name in Code view. In Hour 11, you learned how to create two more alignment classes. To apply one of these instead, simply change the class name to either alignLeftoralignRightand you’ll immediately see the changes in Design view.
Adding a class to an existing tag is just as easy: Simply type the word classbefore the end bracket of the beginning tag, and IntelliSense gives you a drop-down list of all available classes.
To see the CSS code for the class in Code view, right-click the class in the Manage Styles panel and select Go to Code, or simply double-click the class to go right to it.
No matter where you are in the program, these functions take you straight to the rel- evant CSS code in Code view.
Using Divs and Spans to Separate Content
We touched on both the <span>tag and the <div>tag earlier, and now it’s time to take a closer look at these separators. The main difference between the two is that span is an inline separator, whereas div is a block separator. In other words, span’s display attribute is inlineby default, whereas div’s displayattribute is block. You saw the dif- ference between the two when you used the .alignCenterclass to center the thumbnail earlier: The inlinevalue means that the content, although separated from the sur- rounding content, is still on the same line as the rest. In contrast, the blockvalue cre- ates a block or box on its own line that holds only the content inside the tag.
FIGURE 12.6 Theimgtag for the image high- lights in Code view when you click the image in Design view.
ptg7913109 The default.html page contains two instances of the <span>tag that you created to
highlight the word kipple and the random word you chose in the first paragraph. If you find the words in the Design portion of Split view and click them, you can see the corresponding<span>tags and how they are applied in Code view:
<span class=”auto-style1”> kipple</span>
As you can see, the class application is no different in the spantag than in any other tag. However, because you were just starting to learn how to create styles, you didn’t give the class a proper name, so it has the nondescript name auto-style1. It’s impor- tant to give all your styles, classes, and IDs proper descriptive names so that you know what they do. But how do you do so without afterward going into the code and manually changing all the references to the style?
Renaming Styles and Applying the Change to All Tags in a Page
When you work with large pages or sites, you often run into situations in which you need to rename a style, class, or ID. The problem is that Expression Web 4 already applied these elements to many tags within your pages, and if you change the name of the style, class, or ID, all the references have to change as well. To help simplify this process and save you from the trouble of tracking down every reference to your now changed style, class, or ID, Expression Web 4 can make all the substitutions for you.
1. With the default.html page open in Split view, navigate both the Code and Design views so that you can see both span instances you created earlier by clicking one of them.
2. In the Manage Styles panel, right-click the .auto-style1class and select Rename Class “auto-style1” from the context menu. This opens the Rename Class dialog.
3. In the Rename Class dialog (see Figure 12.7), give the class the new name highlight. Be sure to enable the Rename Class References in This Page box and click OK.
FIGURE 12.7 The Rename Style, Class, and ID dialogs give you the option of renaming all references to the renamed element in the current page or in all pages affected by it.