Creating styles in Expression Web

CSS is suitable for applying layout and design to web page elements. I assume that you have some knowledge about CSS. In this article you would learn how to define and apply CSS using the feature provided by Expression Web.

Creating style sheets in Expression Web is so easy and convenient that I am sure you are going to love it. The ‘Intellisense’ feature of Expression Web smartly assists you in writing your code by prompting the appropriate tags and their corresponding values as you type. Hence there is less possibility of going wrong anywhere, and saves your time too.

Expression Web comes with several CSS tools for managing and applying styles. I will cover them in detail later in this article, but to begin with let us look at the procedure of defining styles in Expression Web.

Defining styles in Expression Web

There are different ways in which you can define styles in Expression Web.

To define a style you need to open the ‘New Style’ dialog box by following any one of the steps given below:

A. Click on the New Style… option in the Apply Styles or Manage Styles task pane.

B. Right click in the CSS Properties task pane and choose ‘New Style’.

C. Choose New Style from Format menu.

D. Right click on any toolbar and choose the Style toolbar. Choose the buttons for New Style and Attach Style Sheet on the extreme right of the Style toolbar.

The New Style dialog box is prompted as shown below:

Let us go through each field of the dialog box in detail.

The Selector drop down box lets you choose the type of style you want to define, like the inline style by selecting the same, class or id based by specifying a class or id name in the box or lastly by selecting tags from the list for a tag-based style.

The Define in: drop down box allows you to choose to create the style in the ‘Current page’ or create a ‘New style sheet’ with this style definition or add it to an ‘Existing style sheet’.

Current page option adds the style to the current page open. New style sheet creates a new style sheet (css file), adds the style to this css file and asks confirmation if you want to attach this newly created style sheet to the current page. Existing style sheet lets you choose the url to the existing style sheet, either from the drop down box or by browsing to the path.  

The Apply new style to document selection checkbox allows you to apply this new style definition to a selected portion in the current page.

If you select ‘Existing style sheet’ in ‘Define in’ drop down, enter or browse to the existing css file.

Once you finish choosing these details, move to the next section to pick the actual style options. Category box lists the components you can choose and set the attributes for.

Select the desired categories, and then set the attributes you want. In the Preview section, you would be able to see the exact illustration as you choose and set the attributes. In the Description section Expression Web displays the corresponding code.

Click OK to insert the style. The code would be added to the page that you have selected in the Define in as per the attributes set. In the above example the code would look like:

.newStyle1 {

          font-family: Algerian;

          font-weight: lighter;

          font-style: oblique;

          color: #CC33FF;

          text-decoration: blink;

}

 Then you can use this class based style on any element you want as shown below:

As displayed by the tool tip, ‘Use Ctrl + Click’ to go to the style definition.

If you choose to create a class-based or an id-based style, then in the ‘Selector’ box, type in the suitable name for your class, preceded with a period; or a unique id preceded with a hash (#). If you want to create an Inline style, then select (inline style) in the Selector drop down. As soon as you do this, the ‘Define in’ is set to Current tag: <tag name> where tag name is the currently selected tag. Similarly you can choose to define a tag-based style by selecting a tag in the same drop down box.

CSS Tools in Expression Web

Expression Web offers ample CSS handling features and tools to create, apply, manage styles and set various properties and attributes for the elements, using CSS.

Manage Styles Task Pane  

Manage Styles task pane provides you with a central point where you can manage all the style sheets that are used in your website. If your Expression Web interface does not display the Manage Styles task pane, to view that, go to the Task Panes menu and choose Manage Styles.

The Manage Styles task pane has options to create New Style and Attach Style Sheets. You have already seen the New Style option earlier in this article. The Attach Style Sheet… option in the Manage Styles task pane would allow you to browse and choose the style sheet, and then attach a style sheet either to your ‘Current page’, to the ‘Selected page’ or to ‘All HTML pages’; if you have a site open in Expression Web. You can choose to attach the style sheet as a ‘Link’ or ‘Import’ into the page.

It also has ‘CSS styles’ and ‘Selected style preview’ sections below these choices. The Options button displays a menu of view options that allow you to customize how you view the styles in the task pane.

You can categorize the styles by the order in which they are defined, or by the elements they are applied to or even by their type. Choose Show All Styles to display all the styles, Show Styles Used In Current Page to show only the styles used in the page you are currently in and Show Styles Used On Selection to display styles in current selection. Separate Grouped Selector would display each selector in the grouped selector as a separate style in the task pane. Display Selected Style Preview would show you a preview of the style.

Depending upon the options selected from this menu, the CSS styles section changes. The Selected style preview section would be visible only if you choose the ‘Display Selected Style Preview’ option from the above menu. CSS styles section lists all the styles that are defined in the css files as well as in the current page, as per the default setting of ‘Show All Styles’.

In the above screen, the CSS styles section displays all the styles in the ‘style.css’ file, as well as the Current Page, which is selected at that time. The ‘style.css’ is the external style sheet linked to the web page, and is the only external style sheet linked to the page in this example. But if there were more than one css file, all of them would have been listed in this section.

As you scroll through the list of styles, you must have noticed that style names are listed along with some colored icons next to them. Some of them have the same color, while some don’t. Some have a ring around the small ball-like icon and some don’t. Let us understand what each icon portrays, since each of them represents something.

  Denotes a tag based css style.

  Denotes a class based css style.

  Denotes an id based style.

Any dot without a ring or a circle around it represents that a style has been defined but still not used with any element in the page. For example

NOTE: Inline styles are represented with yellow dots like . Since the above example did not have an inline style, the picture representation does not have one.  

As you hover over your mouse over each style, the tool tip would show the corresponding style definition helping you to quickly glance through the style. See the image given below:

Manage Styles task pane lets you perform some more action, right click on any of the styles in the CSS styles section, to get the following menu.

‘Apply Style’ lets you apply the chosen style to the element you have selected or where your cursor is placed. ‘Go To Code’ takes you to the style definition. It could be in the css file or in the html page itself, depending upon the type of style. ‘Select All 1 Instance(s)’ selects all the instances where the chosen style is applied. ‘New Style…’ lets you create a new style the way you have seen earlier in this article. ‘New Style Copy…’ lets you create a copy of the selected style using the New Style dialog box. ‘Modify Style…’ opens the New Style dialog box with the set style definitions and lets you modify the attributes. ‘Rename class “para”…’ is a rename style option. In this case style ‘para' is selected; hence the option asks you to rename class ‘para'. ‘Delete’ deletes a style. ‘Remove Link’ option is active only for the external css file. It detaches the css file from your html page. ‘Attach Style Sheet…’ lets you attach a style sheet to your html page. ‘Manage Style Sheet Links…’ lets you manage all the style sheets through the Link Style Sheet dialog box shown below.

The last section is ‘Selected style preview’ section, where you would be able to preview the chosen style.

Apply Styles Task Pane  

The Apply Styles task pane lets you apply styles on your page. Some of the controls are same as the Manage Styles task pane, like the ‘New Style…’, ‘Attach Style Sheet’ and some options from the Options button.

One of the major differences is the list of styles that is displayed under Select CSS style to apply. This list allows you to choose a style from all the styles that are available to you in the page. These styles could be from an external style sheet or defined in the page itself. In order to apply a style from this list, select the content you want the new style applied to, in any of the three views and then click on the style you want to apply.

CSS Properties Task Pane

In the default interface of Expression Web, you would find the CSS Properties task pane in the bottom left corner of the Expression Web window. Else choose the CSS Properties task pane from the Task Pane menu. CSS Properties:

The CSS Properties tab in the CSS Properties task pane has several options:

Applied Rules show you all the rules that are applied to the current selection in the page based upon where the styles have been defined. See the picture given below:

Here <h1> tag has two rules applied to it. Because of the way the style sheets cascade, the styles defined in the <h1> tag are applied first followed by the styles defined in the <inline style> mentioned on the <h1> tag.

The above screen shows the applied rules for the <h6> tag where the cursor is positioned. ‘(Current Page)’ written next to the Applied Rules in the CSS Properties tab, indicates that the id-based style definition exists in the current page. Similarly ‘(style.css)’ in below screen denotes that styles are defined in this css file. You can click on the style name to go to the style sheet.

As you click on each of these styles in the Applied Rules section, the CSS Properties section displays all the properties that are set in that specific style. You can edit a style, by changing the CSS properties in this task pane, and they will get added to the style definition.

Automatic Style Generation by Expression Web

You saw how to define and apply styles in Expression Web manually as well as using the tools provided. But Expression Web also creates styles for you automatically as you design objects in your web page. I would illustrate this with an example.  

In this example, the text was entered and then, color of the word ‘first’, was changed from black to fuchsia. Expression Web automatically entered a span tag and the class ‘style4’. The style4 class definition was also generated in the <style> tag. Further if you make any changes in your page that correspond to the style defined in style4, then Expression Web automatically attaches the same class to the element.

This is called as Automatic Style Generation.

TIP: If you are not comfortable with writing and defining style, then leave this job to Expression Web. Later you can also open these styles and make the required changes.  

You can use all the CSS tools provided by Expression Web like Apply Styles, Manage Styles and CSS Properties task panes, to manage the automatically generated styles, in similar way as you use them to manage the manually generated styles.  

Manual Generation Mode   

An experienced CSS author uses Manual style generation mode to generate styles. To switch between auto and manual generation modes, right click on Style Application section on the status bar, and choose the Mode as Manual.  

Alternately, double clicking on Style Application section also generates the Style Application Toolbar.

The toolbar allows you to choose modes between Auto and Manual. Target Rule lets you choose where you want the current formatting to be applied. You can choose to create ‘New Auto Class’, ‘New Inline Style’ or ‘Apply New Style’.  

CSS Layouts

By now you know that CSS is used for designing appearance, but now CSS is also used to design and control the layout of your web pages. CSS layouts are introduced as a replacement to the table layouts that are widely used to design web pages. Even though tables are commonly used for laying out web pages, there are some reasons for which you may think of adopting another layout technique. Primary function of tables was to present tabular data, but they do a magnificent job of organizing items on the web page. However they mess up the code making it complicated. Expression Web makes this process easier with CSS Layouts.  

Go to the File menu and choose New > Page. On the Page tab choose the category as CSS Layouts. In this category, there are different pre-defined layouts available for you to use to create your web pages in Expression Web. The names of the layouts are self-explanatory and the Preview section too gives you an idea of how your layout would look. 

You can choose a layout according to your page requirement. 

Once you choose the layout, the corresponding code is added to the <body> tag. There is a <div> tag at the top level, which is the container for the other div tags – left col, page content and right col. CSS Layout creates a css file with the style definition for the layout as shown below: 

The ‘container’ is positioned relatively with a width of 100% to take up all the available space. Left column, right column and page content style sheets define how each column behaves. The left and right columns have a fixed width of 200px and are positioned absolutely at top left and top right respectively of its parent ‘container’. The page content has a fixed position with fixed left and right margins.

As you increase the number of columns and bars in the layout the code becomes slightly complicated with the number of <div> tags. But it is still more efficient than the tables, because with table layouts this code becomes much more complex with increased number of table tags.

TIP: If you do not find a suitable CSS layout that matches your requirement, then choose the one that is nearest to the one you need and edit it to go with your requirements.  

If you liked the article,  Subscribe to my RSS Feed or Subscribe Via Email

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke