Difference between revisions of "CSS Syntax"

From PeformIQ Upgrade
Jump to navigation Jump to search
(New page: XX)
 
Line 1: Line 1:
XX
=CSS Syntax=
 
Define attributes to be associated with an HTML tag as follows:
 
<pre>
<HTML tag> {  <CSS Property> : <Value> ; }
</pre>
 
eg.
 
<pre>
  body  {
    background-color: blue;
    background: url(/img/rock.gif);
  }
  p  {
    color: white;
  }
</pre>
 
==Using CSS Classes==
 
Using classes is simple. Add an extension to the typical CSS definition and make sure you specify this extension as the class in your HTML.  For example.
 
CSS Code:
<pre>
p.first{ color: blue; }
p.second{ color: red; }
</pre>
HTML Code:
<pre>
<html>
<body>
<p>This is a normal paragraph.</p>
 
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
...
</pre>
 
Here is a more complex example where overloading is used:
 
CSS Code:
<pre>
p{ color: red; font-size: 20px; }
p.first{ color: blue; }
p.second{ font-size: 12px; }
</pre>
HTML Code:
<pre>
<html>
<body>
<p>This is a normal paragraph.</p>
 
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
...
</pre>
 
==More Examples==
 
===background-color===
 
<pre>
h4 { background-color: white; }
p  { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
<pre>
 
===background-image===
 
<pre>
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }
</pre>
 
<pre>
p { 
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 { 
background-image: url(smallPic.jpg);
background-repeat: repeat-y;}
ol { 
background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
ul { 
background-image: url(smallPic.jpg);
background-repeat: no-repeat;}
</pre>
 
==Font==
 
====Colour====
<pre>
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
</pre>
 
====Family====
 
<pre>
h4 { font-family: sans-serif; }
h5 ( font-family: serif; }
h6 { font-family: arial; }
</pre>
 
====Size====
 
<pre>
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
</pre>
 
====Style====
 
<pre>
p { font-style: italic; }
h4{ font-style: oblique; }
</pre>
 
====Weight====
<pre>
p { font-weight: 100; }
ul{ font-weight: bolder; }
</pre>
 
====Variant====
<pre>
p { font-variant: small-caps; }
</pre>
 
===Padding===
 
<pre>
p {padding: 15px; border: 1px solid black; } 
h5{padding: 0px; border: 1px solid red;}
</pre>
 
<pre>
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
</pre>
 
 
<pre>
p { padding-left: 5px; border: 1px solid black; }
h5{
    padding-top: 0px;
    padding-right: 2px;
    padding-bottom: 13px;
    padding-left: 21px;
    border: 1px solid red;
}
</pre>
 
Four padding values can be declared at once by either specifying two or four values. When only using two values, the first will define the padding on the top and bottom, while the second will define the padding on the left and right.
 
When using the four value padding specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left. The examples below shows partial (2) and complete (4) padding usage.
 
<pre>
p {
    padding: 5px 15px;
    border: 1px solid black;
} 
h5{
    padding: 0px 5px 10px 3px;
    border: 1px solid red;
} </pre>
 
===Margin===
 
Similar to padding but outside rather than inside object border.
 
<pre>
p {margin: 5px; border: 1px solid black; } 
h5{margin: 0px; border: 1px solid red;}
</pre>
 
<pre>
p {margin: 2%; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
</pre>
 
<pre>
p { margin-left: 5px; border: 1px solid black; }
h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; }
</pre>
 
<pre>
p {margin: 5px 15px;
border: 1px solid black; } 
h5{margin: 0px 5px 10px 3px;
border: 1px solid red;}
</pre>
 
===Border===
 
http://www.tizag.com/cssT/border.php
 
<pre>
p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }
</pre>
 
===Lists===
 
http://www.tizag.com/cssT/list.php
 
<pre>
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
</pre>
 
<pre>
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
</pre>
 
<pre>
ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}</pre>
</pre>
 
===Links===
 
A link has four different states that it can be in. CSS allows you to customize each state. The following keywords are used as pseudo-class modifiers of an attribute to modify its appearance in that state:
 
* link - this is a link that has not been used, nor is a mouse pointer hovering over it
* visited - this is a link that has been used before, but has no mouse on it
* hover - this is a link currently has a mouse pointer hovering over it/on it
* active - this is a link that is in the process of being clicked
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
==CSS Pseudo-Classes==
 
<pre>
a:(STATE'S NAME) { attribute: value; }
</pre>
 
Eg.
 
<pre>
a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; }
a:hover { color: blue; }
</pre>
 
or
 
<pre>
a:link {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
 
a:visited {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
 
a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;
}
</pre>
 
==CSS Layers==
 
See http://www.tizag.com/cssT/layers.php
 
==CSS IDs==
 
IDs begin with the hash character (#).
 
For example:
 
<pre>
p#Ex1 { background-color: white; }
p#Ex2 { text-transform: uppercase; }
</pre>
 
Would be used as:
 
<pre>
<p id="Ex1">This paragraph has an ID name of "Ex1" and has a white CSS defined background</p>
<p id="Ex2">This paragraph has an ID name of "Ex2" and has had its text transformed to uppercase letters.</p>
</pre>
 
 
===Classes vs. IDs===
 
The W3C defines class ID as "a unique identifier to an element".
 
In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).
 
So the CSS might look something like:
 
<pre>
#top {
background-color: #ccc;
padding: 1em
}
 
.intro {
color: red;
font-weight: bold;
}
</pre>
 
The HTML refers to the CSS by using the attributes id and class. It could look something like this:
 
<pre>
<div id="top">
  <h1>Chocolate curry</h1>
    <p class="intro">This is my recipe for making curry purely with chocolate</p>
    <p class="intro">Mmm mm mmmmm</p>
</div>
</pre>
 
The difference between an ID and a class is that an ID is used to identify a specific element, whereas a class is used to identify more than one.
 
You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class 'jam'.
 
Also see http://www.tizag.com/cssT/cssid.php
 
The intended approach is to use IDs when there is only one occurrence per page and classes where there are one or more occurences per page.
 
eg.
 
* Menu - div#menuPane
* Content - div#content
 
==Block vs. Inline Display==
 
See http://www.tizag.com/cssT/display.php
 
<pre>
a { display: block; }
p { display: inline; }
</pre>
 
<pre>
p.show { display: block }
p.hide { display: none; }
</pre>
 
==@ Rules==
 
See http://www.htmldog.com/guides/cssadvanced/atrules/
 
===Media types===
 
The media at-rule will apply its contents to a specified media, such as print. For example:
 
<pre>
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
 
#navigation {
display: none;
}
}
</pre>
 
The media-type can be:
 
* all - for every media under, over, around and in the sun.
* aural - for speech synthesizers.
* handheld - for handheld devices.
* print - for printers.
* projection - for projectors.
* screen - for computer screens.
 
You can also use braille, embossed, tty or tv.
 
Note: having said all of that, the only media-types currently supported by IE are all, screen and print.
 
===Pages===
 
The page at-rule is for paged media and is an advanced way to apply styles to printed media. It defines a page block that extends on the box model (see Margins and Padding) so that you can define the size and presentation of a single page.
 
There are a number of conventions that apply to page at-rules, such as there is no padding or border and this isn't a computer screen we're talking about - pixels and ems as units aren't allowed.
 
There are a number of specific properties that can be used, such as size, which can be set to portrait, landscape, auto or a length.  The marks property can also be used to define crop marks.
 
Pseudo classes for paged media
 
There are three pseudo classes that are used specifically in conjunction with the page at-rule, which would take the form of
 
<pre>
@page :pseudo-class { stuff }.
</pre>
 
* :first applies to the first page of the paged media.
* :left and :right apply to left-facing and right-facing pages respectively. This might be used to specify a greater left margin on left-facing pages and a greater right margin on right-facing pages.
 
==Grouping and Nesting===
 
See http://www.htmldog.com/guides/cssintermediate/grouping/
 
===Nesting===
 
If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
 
For example:
 
<pre>
#top {
background-color: #ccc;
padding: 1em
}
 
#top h1 {
color: #ff0;
}
 
#top p {
color: red;
font-weight: bold;
}
</pre>
 
Removes the need for classes or ID's if it is applied to HTML that looks something like this:
 
 
<pre>
  <div id="top">
<h1>Chocolate curry</h1>
 
<p>This is my recipe for making curry purely with chocolate</p>
 
<p>Mmm mm mmmmm</p>
  </div>
</pre>
 
This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.
 
This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.
 
 
See http://www.htmldog.com/guides/cssintermediate/grouping/

Revision as of 13:10, 7 February 2008

CSS Syntax

Define attributes to be associated with an HTML tag as follows: 

 <HTML tag> {  <CSS Property> : <Value> ; }

eg. 

  body  {
    background-color: blue;
    background: url(/img/rock.gif);
  }
  p  {
    color: white;
  }

Using CSS Classes

Using classes is simple. Add an extension to the typical CSS definition and make sure you specify this extension as the class in your HTML. For example.

CSS Code: 

p.first{ color: blue; }
p.second{ color: red; }

HTML Code: 

<html>
<body>
<p>This is a normal paragraph.</p>

<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
...

Here is a more complex example where overloading is used:

CSS Code: 

p{ color: red; font-size: 20px; } 
p.first{ color: blue; }
p.second{ font-size: 12px; }

HTML Code: 

<html>
<body>
<p>This is a normal paragraph.</p>

<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
...

More Examples

background-color

h4 { background-color: white; } 
p  { background-color: #1078E1; } 
ul { background-color: rgb( 149, 206, 145); } 
<pre>

===background-image===

<pre>
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }

p {  
	background-image: url(smallPic.jpg); 
	background-repeat: repeat; }
h4 {  
	background-image: url(smallPic.jpg);
	background-repeat: repeat-y;}
ol {  
	background-image: url(smallPic.jpg); 
	background-repeat: repeat-x;}
ul {  
	background-image: url(smallPic.jpg); 
	background-repeat: no-repeat;}

Font

Colour

h4 { color: red; }
h5 { color: #9000A1; } 
h6 { color: rgb(0, 220, 98); }

Family

h4 { font-family: sans-serif; }
h5 ( font-family: serif; } 
h6 { font-family: arial; }

Size

p { font-size: 120%; } 
ol{ font-size: 10px; } 
ul{ font-size: x-large; }

Style

p { font-style: italic; }
h4{ font-style: oblique; }

Weight

p { font-weight: 100; } 
ul{ font-weight: bolder; }

Variant

p { font-variant: small-caps; }

Padding

p {padding: 15px; border: 1px solid black; }  
h5{padding: 0px; border: 1px solid red;} 

p {padding: 2%; border: 1px solid black; } 
h5{padding: 0px; border: 1px solid red;}



p { padding-left: 5px; border: 1px solid black; } 
h5{ 
    padding-top: 0px;
    padding-right: 2px;
    padding-bottom: 13px;
    padding-left: 21px;
    border: 1px solid red; 
}

Four padding values can be declared at once by either specifying two or four values. When only using two values, the first will define the padding on the top and bottom, while the second will define the padding on the left and right.

When using the four value padding specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left. The examples below shows partial (2) and complete (4) padding usage. 

p {
    padding: 5px 15px; 
    border: 1px solid black; 
}  
h5{
    padding: 0px 5px 10px 3px; 
    border: 1px solid red;
}

Margin

Similar to padding but outside rather than inside object border. 

p {margin: 5px; border: 1px solid black; }  
h5{margin: 0px; border: 1px solid red;} 

p {margin: 2%; border: 1px solid black; } 
h5{margin: 0px; border: 1px solid red;}

p { margin-left: 5px; border: 1px solid black; } 
h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; }

p {margin: 5px 15px; 
border: 1px solid black; }  
h5{margin: 0px 5px 10px 3px;
 border: 1px solid red;}

Border

http://www.tizag.com/cssT/border.php 

p.solid {border-style: solid; } 
p.double {border-style: double; } 
p.groove {border-style: groove; } 
p.dotted {border-style: dotted; } 
p.dashed {border-style: dashed; } 
p.inset {border-style: inset; } 
p.outset {border-style: outset; } 
p.ridge {border-style: ridge; } 
p.hidden {border-style: hidden; }

Lists

http://www.tizag.com/cssT/list.php 

ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

ul { list-style-image: url("listArrow.gif"); } 
ol { list-style-image: url("listArrow2.gif"); }

ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}

Links

A link has four different states that it can be in. CSS allows you to customize each state. The following keywords are used as pseudo-class modifiers of an attribute to modify its appearance in that state:

  • link - this is a link that has not been used, nor is a mouse pointer hovering over it
  • visited - this is a link that has been used before, but has no mouse on it
  • hover - this is a link currently has a mouse pointer hovering over it/on it
  • active - this is a link that is in the process of being clicked












CSS Pseudo-Classes


a:(STATE'S NAME) { attribute: value; }



Eg.



a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; } 
a:hover { color: blue; }



or



a:link { 
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}

a:visited { 
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}

a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;
}



CSS Layers


See http://www.tizag.com/cssT/layers.php



CSS IDs


IDs begin with the hash character (#).

For example:



p#Ex1 { background-color: white; } 
p#Ex2 { text-transform: uppercase; } 



Would be used as:



<p id="Ex1">This paragraph has an ID name of "Ex1" and has a white CSS defined background</p>
<p id="Ex2">This paragraph has an ID name of "Ex2" and has had its text transformed to uppercase letters.</p>








Classes vs. IDs


The W3C defines class ID as "a unique identifier to an element".

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).

So the CSS might look something like:



#top {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}



The HTML refers to the CSS by using the attributes id and class. It could look something like this:



<div id="top">
  <h1>Chocolate curry</h1>
    <p class="intro">This is my recipe for making curry purely with chocolate</p>
    <p class="intro">Mmm mm mmmmm</p>
</div>



The difference between an ID and a class is that an ID is used to identify a specific element, whereas a class is used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class 'jam'.

Also see http://www.tizag.com/cssT/cssid.php

The intended approach is to use IDs when there is only one occurrence per page and classes where there are one or more occurences per page.

eg.



  • Menu - div#menuPane
    • 

  • Content - div#content


Block vs. Inline Display


See http://www.tizag.com/cssT/display.php



a { display: block; }
p { display: inline; }



p.show { display: block }
p.hide { display: none; }



@ Rules


See http://www.htmldog.com/guides/cssadvanced/atrules/



Media types


The media at-rule will apply its contents to a specified media, such as print. For example:



@media print {
	body {
		font-size: 10pt;
		font-family: times new roman, times, serif;
	}

	#navigation {
		display: none;
	}
}



The media-type can be:



  • all - for every media under, over, around and in the sun.
    • 

  • aural - for speech synthesizers.
    • 

  • handheld - for handheld devices.
    • 

  • print - for printers.
    • 

  • projection - for projectors.
    • 

  • screen - for computer screens.


You can also use braille, embossed, tty or tv.

Note: having said all of that, the only media-types currently supported by IE are all, screen and print.



Pages


The page at-rule is for paged media and is an advanced way to apply styles to printed media. It defines a page block that extends on the box model (see Margins and Padding) so that you can define the size and presentation of a single page.

There are a number of conventions that apply to page at-rules, such as there is no padding or border and this isn't a computer screen we're talking about - pixels and ems as units aren't allowed.

There are a number of specific properties that can be used, such as size, which can be set to portrait, landscape, auto or a length.  The marks property can also be used to define crop marks.

Pseudo classes for paged media

There are three pseudo classes that are used specifically in conjunction with the page at-rule, which would take the form of



@page :pseudo-class { stuff }.



  • :first applies to the first page of the paged media.
    • 

  • :left and :right apply to left-facing and right-facing pages respectively. This might be used to specify a greater left margin on left-facing pages and a greater right margin on right-facing pages.


Grouping and Nesting=


See http://www.htmldog.com/guides/cssintermediate/grouping/



Nesting


If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:



#top {
	background-color: #ccc;
	padding: 1em
}

#top h1 {
	color: #ff0;
}

#top p {
	color: red;
	font-weight: bold;
}



Removes the need for classes or ID's if it is applied to HTML that looks something like this:






   <div id="top">
	<h1>Chocolate curry</h1>

	<p>This is my recipe for making curry purely with chocolate</p>

	<p>Mmm mm mmmmm</p>
   </div>



This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.



See http://www.htmldog.com/guides/cssintermediate/grouping/









Retrieved from "https://performiq.com/kb/index.php?title=CSS_Syntax&oldid=1020"