The XHTML WYSIWYG Editor For Desktop & Web Applications

CSS Reference

• FAQs
• How It Works
• Most Common CSS Properties
• Complete CSS Property Reference

FAQs

What are CSS?

CSS (Cascading Style Sheets) are a language used to attach presentation (formatting) to XHTML tags. Presentation can be visual, such as a font face or text color, or they can be used for non-visual purposes. For example, screen readers can use presentation to customize the pronunciation of text.

XHTML 1.1 only permits formatting using (referencing) CSS. XStandard for example lets business users reference the appropriate CSS by selecting styles from a drop-down menu on XStandard's toolbar, and the developer will typically tailor the selection of styles to match the type of document the user is editing.

Are CSS Industry-standard?

Yes. CSS are maintained by W3C - the same people who maintain XHTML and XML.

What Does The CSS Language Look Like?

The following is an example of a CSS syntax (or style rule) that instructs the Web browser to color all <h1> tags red:

1. h1 {color: red}

The syntax has 3 parts: selector, property and value:

1. selector {property: value}

The selector identifies the tags to which the style rule should apply. The property is the name of the characteristic of the XHTML tag, and the value is the measurement of that characteristic. You can assign many property / value pairs to a selector simply by inserting a semicolon between each pair. For example:

1. h1 {color: red; font-size: 1.6 em}

Property / value pairs are called declarations. So a CSS rule has only one selector but can have one or more declarations.

How Do XHTML Documents Reference CSS?

CSS can be external (written in a separate document) or embedded (placed inside the XHTML document).

It is better to use embedded CSS when the CSS rules apply to one Web page.

It is better to use external CSS when the same CSS rules apply to more than one Web page, or if you want to be able to change the look and feel of all your Web pages at once by modifying a single CSS file.

If the CSS is external, reference it by putting a <link> tag in your XHTML document. For example:

1. <link rel="stylesheet" href="format.css" type="text/css" />

If the CSS is embedded, reference it by putting a <style> tag in your XHTML document. For example:

1. <style type="text/css">
2. body {
3. background-color: white;
4. color: black;
5. font-family: arial;
6. }
7. </style>

What Is Inline Style?

In earlier versions of XHTML, it was possible to put CSS declarations directly into HTML tags. For example:

<h1 style="color: red">Hello World!</h1>

This approach is no longer supported in XHTML 1.1 since it fuses presentation with content.

How It Works

XHTML documents contain elements (tags) that are organized into a hierarchy. Web browsers use CSS to lay out the contents of the elements and to give the contents visual formatting.

The browser draws a rectangle for each element and then lays out the element on the page inside the rectangle. There are two types of rectangle - block and inline.

Block elements take up 100% of the width of their parent element. This pushes any sibling elements underneath. For example, <h1> is a block element. Any text following the <h1> element is displayed on the next line.

Inline elements take up only the width of their contents. This means that two or more inline elements can be displayed next to each other on the same line. For example, the <a> tag is an inline element. It can appear in the middle of a line with text preceding it and following it.

CSS controls the appearance of each rectangle and its contents. CSS has properties for setting foreground and background colors, border width and style, font family, font size and many more options.

Web browsers have built-in CSS for certain predefined XHTML elements. For example, the built-in CSS for headings (<h1> elements) renders text 100% larger than the regular size. The default CSS for hyperlinks (<a> elements) renders hyperlinks blue with an underline. Default CSS can be overwritten by custom CSS embedded in an XHTML document or in a separate file. Whichever option you choose, the fact that your CSS is no longer embedded inside XHTML tags means you can change the look and feel of an entire Web site quickly and simply by modifying a single CSS file.

Most Common CSS Properties

background-color

This property sets the background color of an element. For example:

1. h1 {background-color: red}

border

This property sets the width, style and color of an element's border. For example:

1. h1 {border: 1px solid red}

color

This property sets the foreground color of an element's content. For example:

1. body {color: blue}

float

This property specifies if an element should float to the left, right, or not at all. The most common use of this property is to wrap text around images.

For example:

1. img {float: right}

font-family

This property specifies which font family to use to render the text. Since not all fonts are available on all systems, this property allows authors to specify a list of fonts. The browser will attempt to use the first font in the list that is available to the system. For example:

1. body {font-family: arial, helvetica, sans-serif}

font-size

This property specifies the size of the font. For example:

1. body {font-size: .8em}

font-weight

This property specifies the boldness or lightness of the text. For example:

1. a {font-weight: bold}

margin

This property specifies the amount of space outside the border of an element.

For example:

1. h1 {margin: 2em}

padding

This property specifies the amount of space between an element's contents and its border.

For example:

1. h1 {padding: 2em}

text-decoration

This property describes decorations to be added to the text of an element. For example:

1. a {text-decoration: none}
2. h1 {text-decoration: underline}

width

This property specifies the width of a block element. For example:

1. hr {width: 90%}

Complete CSS Property Reference

* Original W3C document. Copyright (c) World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.

• Home
• Products
• Downloads
• Purchase
• Documentation
• Support
• Contact Us
• My Account / Login

XStandard works for ...

Most popular FREE downloads

1. XStandard WYSIWYG editor
2. HTTP component
3. ZIP component
4. Image size component
5. Base64 component

XStandard quick links

• Features
• API reference
• Web integration steps
• App integration steps
• Did you know?

Content management articles

• WYSIWYG editors and bad markup
• Advanced image management

Articles & resources

• XHTML reference
• Why XHTML is best for CMS
• A better way to author alternate text