expression web CSS tutorial

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!

External CSS

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.

e.g.: sitestyles.css

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.

.cssexample {
font-family: Courier New, Courier, monospace;
border-style: dashed;
border-width: 1px;
border-color: #FF6600;
padding: 5px;
background-color: #FFFFCC;
}

Internal CSS

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.

Example:

<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 2</title>
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
font-variant: small-caps;
color: #0000FF;
}
</style>
</head>

<body>

<p>This is text that is controlled by internal styles.</p>

</body>

</html>

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.

Inline style

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!

RSS

Our forum feed can be found here

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now

Expression Web help

Join our community

Visit our Expression Web Forum

Expression Web and Cascading Styles Sheets

External CSS

Internal CSS

Inline style

RSS