Work with Cascading Styles Sheet to style the contents in Expression Web
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 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
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
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
Output : The preview of the following styles as seen in browser: