Join our community
- Expression Web Forum
- Expression web resources
- Build Expression Web Template 1
- Build Expression Web template 2
- Build Expression Web Template 3
- Style horizontal Navigation with CSS
- Style vertical menu with CSS
- Style the main content area
- Style the footer
- Centre a page
- Build Expression Web DWT Tutorial
- Graphic Template example
- Free Expression Web Templates
- Add RSS to Expression Web
- Expression web forms
- RSS feeds
- 10 Tips
- Page includes
- Insert flash in expression web
- Expression web dropdown menu
- Use XML with Expression Web
- Point and click easy drop-down menu's
- Table Based Layouts
- ASP.NET Ad Rotator
- Display Data
- Search database using a text box
- Transparent Text
- Bold text - Formatting
- Date and time
- Who are you
Expression Web and Cascading Styles Sheets
Cascading style sheets (CSS) allow you complete control of the presentation of your web pages. Simply put, CSS can precisely position and style any or all of your page elements.
CSS can be, External, Internal or Inline (embedded) a web page can be styled with any or all of the styles. However, conflicting styles will cascade!
Lets assume your web page is styled by an external style sheet. In most cases, an internal style will override an external style and an inline style will over ride an internal style. So if you have an external style set for H1 but a different internal style for the same element, the internal style will be applied. Therefore if an external style is not giving the effect you had wanted, check that an internal or inline style is not overriding it!
Using an external style sheet, you can control the appearance of the whole web site from just one place. Any amount of style sheets can be attached to one or all your web pages. It is unlikely, that you will need more that 3 and in most cases 1 will do.
An external style sheet will have a CSS extension.
The code (syntax) for both external and internal styles is the same - except external styles are not surrounded by <style> tags and no style syntax appears in the html document. A reference to the style will be made in the opening tag of the element you are working with for example every time i show an example of code on these pages, i type the code between a <p> tag to create a paragraph and then apply the style of .cssexample by clicking on the style in the apply styles task pane. I could have used the <code> tag but want it for other coding.
The the external CSS code is below.
font-family: Courier New, Courier, monospace;
Internal CSS (Embedded CSS) is styling that is found in the <head> section of your web page and will be enclosed inside the <style> tags. Internal styling is best for single pages but be aware, every page that has internal styling will need to be edited to change the styles unlike the external style sheet where the site changes are made in just one place. Internal style sheets are a good way to override an external style.
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
font-family: Arial, Helvetica, sans-serif;
<p>This is text that is controlled by internal styles.</p>
An internal style sheet writes the style into the <head> tag of your page. To change styles, you need to edit every page that uses the styles.
An inline style is a once only type of style. Use it to style individual elements. Inline styles.
You define inline styles in the start tag of the given element. The example shows a <p> tag with an inline style applied. (shown in bold)
<p style="font-family: Arial Black; font-size: 20px; font-weight:
bold; color: #FF0000">
This is an inline style</p>
Global site wide web styles are best done in an external CSS file, that way updating your site is a simple case of visiting one file to make site wide changes.
Expression Web , is CSS!