Work with Cascading Styles Sheet to style the contents in Expression Web

Hi guys, Well this article is related to the last article in the sense that in this article I will be demonstrating how to use a cascading style sheet to change the look and feel of the Groups and Lists. Actually what happens is there is no certain style defined by us so when the page is opened in different browsers the font and style changes because different browsers use their own styling for web pages.

Follow the steps below :

Step 1 : Open a project containing Lists, here for example I will be working on the project explained in my last article. All the steps below will be are based on this article only.

Step 2 : To know the changes just look at the HTML code it will look like this before any styling is applied to it.

Step 3 : Now click on the Text of the list in the design panel. A selector tab becomes visible.

Step 4 : Click on the selection tab and  Go to Apply Theme Tool--> select new style. See figure below.

Step 5 : Now after you select the New style link a new window, as shown below, opens up. This window allows you to make changes to all the styles however you like to do. Lets start working with this window.

Styling the Font category :

First of all select the tag you want to apply style to. Here I have selected "li" tag in the selector field. Then select the context you would like to Define the styles to. There are mainly three ways of defining the style

• Current page : This is selected if you want to apply style to only this page and no other page in the application.
   
• New Style Sheet : This option creates a new style sheet and defines all the properties you apply in a separate style sheet and this style sheet so created can also be used again and again throughout the application.
   
• Existing Style Sheet : This option derives the style from the pre existing style sheet. for this option there should be already existing style sheet.

Now select the Font category from the column alongside in the styling window to edit the font styles. When font category is selected related options open up such as:

• Font Family
              
• Font size                 
   
• Font weight            
   
• Font color                
   
• Font style                   
   
• Font Variant  
            
• Text- transform       
   
• Text decoration       

Also you can preview your style in the Text box at the bottom. See the figure below:

Step 6 : Now select the Background category and change the background color to gray. You can add any background image to this layout. Rest of the options are not that important while focusing on the webpage text fields. Here I would discuss only the key features necessary for a nice looking style of the text. See the fig below:

Step 7 : Now have a look at the HTML code after applying the style.

Step 7 : Till now I applied the style to the ordered and unordered List. Now lets apply style to the Definition List, What I want in this respect is that each term and definition assumes a different styling. For this also click on the term name( ex. Adam Douglas). This shows the selector tab.Click on the selector tab and Go to Apply Theme Tool--> select new style. This opens up the Styling window. Change the style as shown in figure below.

In this term background is set light gray. You can see the changes in the design panel.

Step 9 : Similarly select the definition text and change the style like this:

Here the definition background is set black. You can see the changes in the design panel.

The style sheet created for Definition List is shown below:

The style sheet created for List is shown below:

Output : The preview of the following styles as seen in browser: