CSS Basics
Much of the content of this page is based on the User Guide in Expression Web. You can access the User Guide by selecting Help from the menu, then User Guide.
What is CSS?
CSS stands for Cascading Style Sheets. A style is a set of formatting characteristics that are defined in a cascading style sheet (CSS) and define how to display HTML elements. You can apply styles to content in a web page, including text (individual characters or entire paragraphs), graphics, layers, tables, and even to the body of the entire web page. Styles enable you to efficiently reuse a set of properties and values without having to set the properties every time you want to use them.
They also make it much easier to maintain a website. If you decide you want the page background to be green instead of blue, one change in the style sheet will make the change on every page the style sheet is attached to.
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Styles are read in three ways: browser default, style sheets (internal in the <head> or external via @import or <link>) and inline styles. The default priority is as follows, where number four has the highest priority:
- Browser default
- External style sheet
- Internal or Embedded style sheet (inside the head tag)
- Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
Example of an inline style which tells the browser to render the content of this paragraph as red:
<p style="color:red">This is a line of content.</p>
Types of Styles
A style rule has two main parts: a selector and one or more declarations. The style can have a class, element, or ID selector. The above example uses an element for the selector.
A style is defined by its rule set, which consists of a selector, followed by a block of property declarations that appear between a left curly brace ({) and right curly brace (}).
Each type of style is distinguished from the other style types by its selector;
- a period (.) precedes the selector for a class-based style;
- a number sign (#) precedes the selector for an ID-based style;
- and the selector for an element-based style consists only of an HTML element, such as H1 which is shown in the drawing above.
Element selectors
Use an element selector to define a set of properties that you want every instance of a particular HTML element to use in a web page. For example, to create a margin of 25 pixels around all paragraphs (content surrounded by <p> tags) in your web page, you create a style that uses the p element as its selector and contains declarations for margin properties, as shown in the following code.
Example of a rule set for an element selector:
p { margin-left: 25px; margin-right: 25px }
Class Selectors
Use a class selector to define a set of properties that you want to use on one or more items in a web page. If you ever want to modify the style, you can edit the style's rule set and every item you've applied the style to will automatically reflect the changes.
In the following example, "sidebox" is the style's selector, and "border: #cccccc 2px solid; " is one property declaration, followed by a second property declaration.
Example of a rule set for a class selector:
.sidebox { border: 2px solid #CCCCCC; margin: 0px 5px 3px 5px; padding: 0px 3px 15px 3px; background: #FFFFFF; color: #000000; font-size: 85%; }
Example of a class selector applied to a <div>tag:
<div class="sidebox>
The Testimonials box on the left is the result.
ID selectors
Use an ID selector when you want to define a set of properties for a single item or block of items that you want to distinguish from all other content in one or more web pages. Use an ID selector when you want to style a single HTML element in a web page.
Example of a rule set for an ID-based style:
#footer { border-top: 2px solid #564c66; text-align: center; font-size: 80%; padding: 10px 0px; margin-top: 5px; margin-bottom: 5px; }
Apply this CSS rule to a single HTML element.
<div id="footer">
Inline styles
Use an inline style when you want to define a set of properties for a single item or block of items in a web page and don't want to reuse that style. Unlike ID, element, and class selectors, whose properties are defined in either the head section of a web page (internal CSS) or in an external CSS file, the properties of an inline style (or inline CSS) are defined directly in the HTML element you want to use the style.
<p style="font-weight: bold; font-style: italic; color: #003A73">
which would render this:
A sentence that looks like this.
Written May
2010
Expression Web 4.0 Tutorials 2nd Edition from Install to Publish, a FREE EBook by Pat Geary.
Expression Web has a group on Facebook. If you are a FB user, come join us.
Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.
April 2007 - April 2013