Style syntax (CSS)

Defining a style

Defining a style is done using simple text rules for describing the aspects of page elements. A CSS rule is characterised by two main elements:

A type selector, for specifying which tags in the document the style applies to;
A style declaration, defined within brackets, for specifying which style to apply to the selected tags. The declaration, in turn, is made up of:
- one or more property(-ties), followed by the character ":" (a colon),
- one or more value(s) associated with each property, surrounded by quote marks and separated by commas if there are multiple values, all followed by a semicolon.

The syntax, therefore, is:

Syntax of a CSS rule

As an example, the following syntax defines the style to apply to hyperlinks (<A> tag), specifically Verdana font, 18 pixels in size, bold and in yellow:

A {
					  font-family: Verdana;
					  font-size: 18px;
					  font-style: bold;
					  color: yellow
					  }

Type selectors

"Type selectors" (or "type element selectors") are the word(s) before the brackets, which indicate the documents tag(s) to which the style between the brackets apply.

To define the style of a particular HTML tag, simply use the name of the tag (without the characters < and >). For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--

tag {properties}
		-->
		</STYLE>
	</HEAD>
<BODY>

<tag> ... </tag>

...
</BODY>
</HTML>

Multiple selectors

You can also apply a style to multiple tags, by separating the names of these tags with a comma (,). The syntax of such a selector, called a multiple selector, is:

type-selector1, type-selector2  { /* style */  }

Universal selector

With the universal selector ("*") you can define a style that will apply to all HTML elements. The universal selector's syntax is:

*  { /* style */  }

The universal selector is not commonly implemented in browsers!

Nested selectors

You can select a tag within a given context, i.e. depending on what the surrounding elements are, using contextual selectors.

There are several types of contextual selectors.

A nested selector is used for creating a rule which only applies when element Y is nested within element X. Its syntax is:
```
selector_X selector_Y { /* style; */ }
```
For the following HTML code:
```
 Note, this is a warning 
 Please read carefully 
```
The following rule only affects the word "warning" (the only one surrounded by tags, which themselves are nested within a set of tags):
```
P B { font-weight: bold; color: red; } 
```
The adjacent sibling selector is used for creating a rule which only applies when element Y immediately follows element X. Its syntax is:
```
selector_X + selector_Y { /* style; */ }
```
For the following HTML code:
```
 Note, this is a warning 
 Please read carefully 
```
The following rule only affects the word "warning" (the only one surrounded by tags, which themselves follow a set of tags):
```
I + B { font-weight: bold; color: red; } 
```
The child selector is used for creating a rule which only applies when element Y is the descendent of element X. The rule does not apply if Y is enclosed within one or more other intermediary tags. Its syntax is:
```
selector_X > selector_Y { /* style; */ }
```
For the following HTML code:
```
 Note , this is a warning 
 Please read carefully 
```
The following rule only affects the element " Note " (the only one surrounded by tags, which are themselves embedded within a set of tags):
```
P > B { font-weight: bold; color: red; } 
```

Style properties

Comments

It is possible (and recommended) to document style sheets by incorporating comments that give additional information (a reason for choosing one style or another, the type of document it applies to, context, etc.) CSS comments are set off by the signs /* and */:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--
/* This is a comment */
tagA {properties}
tagB {properties}
tagC {properties}
		-->
		</STYLE>
	</HEAD>
<BODY>
...
</BODY>
</HTML>

A style can be applied "in-line" to any HTML tags, except for the following: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Last update on Thursday October 16, 2008 02:43:13 PM.

Previous Cascading Style Sheets

Next Declaring a style sheet

Best answers for « Style syntax (CSS) » in :

Declaring a style sheet (CSS) Show Declaring a style sheet Style sheets are not directly integrated into the W3C's HTML recommendations. For this reason, you need to include elements in the HTML code indicating both the type of document, meaning the version of the HTML and CSS...

Style classes (CSS) Show Classes and IDs Classes A web designer might want to assign different styles to the same tags. For this reason, the CSS specifications introduced the concept of classes. The definition of classes is as simple as that of styles. It involves...

Units in style sheets (CSS) Show Units With style sheets, you can use numeric values to set style properties in multiple ways: absolutely, meaning in units which are independent of the form of output (such as in centimetres); relatively, meaning in units relative to an element....

Create CSS easily ShowCreate CSS easily Easy links CSS is a short term for Cascading Style Sheets. CSS is used to alter the display of the HTML coded environment. For example, using CSS can change the appearance of your scroll bar, the color, headings...

Remove the border on an image in a link in HTML / CSS ShowRemove the border on an image in a link in HTML/CSS HTML You made a clickable image by using the IMG tag within a link and the browser displays a frame or more precisely a border around the image. There are two ways...

Remove the underline under the links in HTML/CSS ShowRemove the underline under the links in HTML/CSS Using CSS Using CSS via a class Using CSS online AS you may have noticed, hyperlinks are underlined in HTML (by default) It is possible to remove the underline by using the CSS Using...

Epson stylus dx 8450 software Show

Change my windows style Show

SIMS 2 TEEN STYLE STUFF Show

Download Amaya ShowAmaya is a Web editor, developed collectively by the INRIA and the W3C, to edit and publish very simply pages containing text (in HTML or XHTML), graph (in SVG) and mathematical expressions (in MathML), the whole with style sheets CSS. Amaya is a...

Download Driver Epson Stylus DX4850 Show

Download Windows 7 Style for Vista ShowFinally, its editor giannisgx89 has just finished Windows 7 Style for Vista. This new visual style is only available for Windows SP1 and x86 systems for the time being. This new style looks perfectly like Windows Vista but it is quicker at the...

Epson Stylus SX100 Show

Speed-Link 360 Style Gamepad USB Black PC (SL-6555-SBK) Show

Epson Stylus SX200 Show

Units in style sheets (CSS) ShowBlock elements DIV tags define blocks of elements This is a structure created to define boxes such as menus or windows. CSS offers several properties for specifying the characteristics of margins. With a good working knowledge of these properties,...

CSS - Style sheets ShowIntroduction to style sheets The concept of style sheets first appeared in 1996 when the W3C published a new recommendation entitled "Cascading Style Sheets", or CSS for short. The principle behind style sheets involves using a single document to...

CSS - Style sheets ShowFont properties Property Value Description font-family Specific font (Arial, Times, Verdana) Familly (serif, sans-serif, fantasy, monospace, cursive) Defines one or more font names or font families. If multiple fonts are defined,...