Flux rss

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 */  }
Note: 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: 

    <p> <i>Note</i>, this is a <b>warning</b> </p>
    <b> Please read carefully </b>
    The following rule only affects the word "warning" (the only one surrounded by <B> tags, which themselves are nested within a set of <P> 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: 

    <p> <i>Note</i>, this is a <b>warning</b> </p>
    <b> Please read carefully </b>
    The following rule only affects the word "warning" (the only one surrounded by <B> tags, which themselves follow a set of <I> 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: 

    <p> <b><i> Note </i></b>, this is a <i><b> warning </b></i> </p>
    <b> Please read carefully </b>
    The following rule only affects the element "<i> Note </i>" (the only one surrounded by <B> tags, which are themselves embedded within a set of <P> 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>
Note: 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.
This document entitled « Style syntax (CSS) » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the licence, as this note appears clearly.

Results for

Create CSS easily Create 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... en.kioskea.net/faq/sujet-593-create-css-easily
Style sheets - Introduction 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 store the page layout... en.kioskea.net/css/cssintro.php3
HTML 4.0 - Positioning elements Using style sheets along with the and tags, you can specify the location of text or images down to the pixel. This is possible with versions 4 and higher of Netscape and Internet Explorer; however, the technique is still problematic and... en.kioskea.net/css/cssposition.php3

Results for

Log in remotely with SSH (Linux)Log in remotely with SSH (Linux) The commands below are relevant only if you have an existing account on the PC you want to connect and that a SSH server is installed. When using Linux the syntax is quite simple as the client part is... en.kioskea.net/faq/sujet-604-log-in-remotely-with-ssh-linux
CAML: Online Guides and TutorialsCAML: Online Guides and Tutorials For Beginners For Advanced Users CAML is a programming language that has been created by INRIA in 1985 and works like an object-programming language as well as having functional and imperative style.... en.kioskea.net/faq/sujet-491-caml-online-guides-and-tutorials
Major difference between “display: none” and “visibility: Major difference between “display: none” and “visibility: hidden” There are two attributes that you can use in your webpage, using CSS, to hide the display command in a web browser of an element that has been added in a CSS... en.kioskea.net/faq/sujet-791-major-difference-between-a-display-nonea-and-a-visibility
Voir les réponses

Results for

Windows xp appearance>styleHello, I have Windows XP Pro installed on my computer. The taskbar and start menu are classic style, but my windows are windows xp style. Does anyone know what's wrong? Please Help Me en.kioskea.net/forum/affich-7433-windows-xp-appearance-style
Epson stylus dx 8450 softwareHello, i need drivers for epson stylus dx 8450 en.kioskea.net/forum/affich-13631-epson-stylus-dx-8450-software
Change my windows styleHello, i download a windows style from internet and i want to use it how can i do it en.kioskea.net/forum/affich-24405-change-my-windows-style
Voir les réponses

Results for

Download Crystal ClearCrystal Clear is will change entirely the appearance of your Windows XP by changing files system. The pack ice Crystal Clear inserts a visual style which will bring the sweetness in your Windows. To answer all your wait, this style is declined in... en.kioskea.net/telecharger/telecharger-393-crystal-clear
Download SmartFlipThe billing of windows can be made in a completely different manner of what they had traditionally on versions previous to Windows Vista, notably Windows XP. Windows allow to show windows opened there 3D, in a style floating quotation with quotation,... en.kioskea.net/telecharger/telecharger-449-smartflip
Download 2 Pic2 pic is a program of style of drawing which you can use to edit your pictures (photographs or drawings). Functions offered in programs are distinctly more practical than that offered by other programs such as Photoshop or PaintShop Pro, however... en.kioskea.net/telecharger/telecharger-617-2-pic
Voir les réponses

Results for

Newest BlackBerry aims to keep Apple iPhone at bayA visitor walks past a display of Blackberry "Smart Phones" at the CeBIT trade fair in Hanover. Research in Motion unveiled Monday its latest BlackBerry smartphone with new styling and technology that aims to bite into Apple's juicy iPhone... en.kioskea.net/actualites/newest-blackberry-aims-to-keep-apple-iphone-at-bay-10364-actualite.php3
Britain seeks ban on cartoon-style abuse imagesA police officer from Germany's State Office of Criminal Investigation views computer files connected with child pornography in the northern city of Hanover in 2006. The possession of computer-generated images of child abuse should be illegal,... en.kioskea.net/actualites/britain-seeks-ban-on-cartoon-style-abuse-images-10411-actualite.php3
Voir les réponses

Results for

CSS - 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 recommendations used by the... en.kioskea.net/css/cssimplant.php3
CSS - Style 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 specifying a selected tag (as with... en.kioskea.net/css/cssclass.php3
HTML - Style tags Style tags modify the typography of the text. They can overlap with other style tags, as with word processing programs. Here is a list of style tags recognised by most browsers (although some of which may produce identical effects in certain... en.kioskea.net/html/htmlstyle.php3
Voir les réponses