Video: USE CSS STYLESHEETS IN EXPRESSION WEB

Presenter:Todd Miranda

Stylesheets allow for the separation of look and content in web pages. This presentation demonstrates how to create and use styles in Expression Web in order to keep the look and feel of a web site separate from the content.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video



Minute 0

For this presentation is to demonstrate how to use CSS stylesheets with expression web is begin by creating a new website we use a one page website and let s open up the default htm file must begin by adding a header one element to the top and will add some text by website and then perhaps we have a header to that says welcome to my website and then we have an ordered list that will use for our menu for the site will have a home


Minute 1

ADH then we have a picture page and will ever contact us page any 20s list elements will be a hyperlink so will go ahead and add a hyperlink to home will go to the default page picture will go to a page that we have created yet call pictures HQ will at that document later and contact us will go to a page a new page contact us htm and will edit the document will so let s also adhere maybe a header surreal and this will be my introduction and will put a paragraph on page with text


Minute 2

This is my website will be like you and thanks for visiting him in one of the paragraph that says coming in soon as I get us some elements are a page that we can now look at styling was the demolition of tools that we have available to us or task panes that we can use or RCS properties pains and they apply rules shows a particular apply styles to the element that would parse the selected filters like this element with which it was assaulted her plot development don t here we receive the properties of the CSS file is plenty that are if you look over your main styles pane we apply styles pane which will list the styles that are in the Saudi and give us a little bit of


Minute 3

Review of themselves look like we can also use clear files to remove the stuff I ll may styles of Alice tells us to view all the styles are applied to this page and select a style preview down here we also have two full bowlers we can use this to toolbars are not visible by default you can go to view toolbars and select the style of the war in the style application toolbar and style application toolbar for now will make auto so the first thing we want to do is look at tag based styles and when we create a style often times will want to apply a particular font to a particular element in order to do that we need to create four cents with Lookout create a font set


Minute 4

If we go to tools page editor options or the tabs this font families will see that we got a number of fonts has created for us if we want to create a new form said we can do that by simply selecting the father we want use to add we can add another font after that initially thought it would used it would be used if modern was not on their user s machine and then perhaps you have personal and typically you always want include one of default fonts and will use Sans Serif so there s a new font said that we can use our page we can move this up or down its fourth priority of the list if we wanted to remove this font said once we ve created a fonts is that we want


Minute 5

Styles we do that by going to the many styles pane selecting new style in for a tag based style will select a tag that we want to style will begin with the HWND of will choose a font family a font size that will make a bold and will give it a particular color that you notice the changes immediate a tag based style will affect every element that is a bad tag type in your site in this particular case it will be the current page will see later how to make the supply the entire site was located and created new style for our H2 element we wanted to be the same for a little bit smaller we ll make this bold and that will make


Minute 6

Italicized as well and for H35 this I will choose a different font family font size will make this bold and we will make it a different color and will utter lack so many leaves you see a tag based style affects each instance of that particular tag throughout the page is Lookout style are links to create a new style is a tag based style as well and will choose eight Link this is the anchor tag is a visited link and send it to a particular font size and will go ahead and make a particular color


Minute 7

And whistling mind because we don t want to be underlined by default now we can copy a style as well so we want another elementary style similarly we can right click on a style to new style copy this file will change the style to be active and we will leave all these things the same for active will copy this file again for the visited link we want everything to be the same for visited and will copy it one more time for the hover in the case of the hover we actually want to link to be underlined so let s leave aside and this preview it to see what we have so far there saw


Minute 8

With our styles are lakes have been underlined on hover of the water shall exactly say that extra dollar would look at is a class based style at class a style is similar to a tightly style except that is not applied to a particular tag has look at how we create a class again we go to new style in this town were going to name the style leading to In front of it will call this first file by style will choose a font family to thought wait and will choose a color so that stands out was what created a class they style we had to apply it to an element with a tag based files


Minute 9

Is automatically applied to elements of that particular tag with a class based on we have to tell the webpage which element would like to be tagged with that style so we highlight some text come down here right click on the style and click apply style if you do that style gets applied to that particular text we mentioned that in our CSS properties pay if you select an element we would see those files that were applied to it here you can see that Rh three element has a three style plot our paragraph tags doesn t have any styles plot but our hope text does have my style rule applied you to also edit the style by changing the information in the CSS properties pane the school appear toward each one element and let Senate let s see how we change that fruit to see if


Minute 10

Properties pane will change the text line to center if we go back to your door each one element right click and to modify style you ll see that the change has taken place over here for him a block of text align a closer driven waste and selflessly to create a good expect foul again is an in line style wedding cascading style sheets work is that the closer the style is to the element that is attached to the more influence it has over its appearance so an external style sheet has the least amount of influence style specified in a page itself has a little more influence in a style specified in line has the most influence so let s take a look at this particular paragraph in style this particular paragraph order to create a new stuff


Minute 11

Where specified as an in line style and all will really go do is change the color of the text will change a delightfully notice all the pair of text is light blue except for Hope this take a look at the code to see exactly why most of our styles are specified in a style block in our page itself the in line style is applied directly to the step to the element in which the island however noticed that the class based style is applied directly to the text hope within a span tag it s closer to the text and so it has more influence over who in the in line style which is applied to the paragraph is what hope does it change to a light blue because it has a style is actually closer to it in the


Minute 12

Style to remove a style which include only a woman is filed with you go to the apply styles tab and click clear styles or we can go over to the CSS properties pane right click on the particular style we won t remove and remove a lifestyle that s lifted the last that Fowler will look at ID based styles I database files are typically used for layout and positioning and they can only be used in a page for once this create a new ID based style where the class they styles panel In front of them the ID based styles so let s call this my ID style and will simply set the color to purple lady will actually apply underlines well


Minute 13

So if we select this paragraph where right click on the class IV based style I thought I saw you see their style is applied its our IP based style if we try to make another element that same style will get a warning because as I said you can only use an ID baselevel wants in a particular page so far we ve seen how to create styles actually in a page in the styles only affect this particular page will see how to make styles affect an entire website in order to do that we want to create a new file will create a new page we will use a stylesheet page and will choose a blank stylesheet page to save the stylesheet page will give it a name


Minute 14

Remains us create a new directory for it called styles and was put in there that would create a stylesheet one of the easiest ways to apply a stylesheet to a page is to actually click the style sheet and drag it onto the face who want to attach it to the other we ve attached the stylesheet to this page if we look at our main style section will say we have solved their in the current page and we also have listed our stylesheet if we want to move our styles that we create for this page to the style sheet so that we can apply them to multiple pages simply highlight click and drag it would download these files to our stylesheet if we go back and look at our code we can see that they ve been removed from the head section or page


Minute 15

Been added for Main CSS so let s save these files as per your site at his same styles give us the capability to separate the look and feel of our site from the actual content of our site was created an external stylesheet and we ve got in the way that we want we can apply that stylesheet to other pages so we can drag and drop a stylesheet on multiple pages for our site and now he uses files on every page and make sure that are looking so you ll is similar across all the pages are sought this presentation is given a good overview of the types of files that we can create how to create those files directly are pages how to move ourselves to an external style sheet and apply that stylesheet to all the pages in our site as we maintain a


Minute 16

Look and feel

Click here to go to original video page