Cascading Style Sheets - Revision history

PeterHarding at 04:41, 21 March 2008

2008-03-21T04:41:49Z

← Older revision		Revision as of 14:41, 21 March 2008
Line 83:		Line 83:
	=Documents=		=Documents=

	* [Cascading Style Sheets, level 2 CSS2 ~~Spec~~]		* [http://www.performiq.com.au/kb/images/CSS2.pdf Cascading Style Sheets, level 2 CSS2 Specification]

PeterHarding at 04:41, 21 March 2008

2008-03-21T04:41:12Z

← Older revision		Revision as of 14:41, 21 March 2008
Line 80:		Line 80:

	See [[CSS Syntax]]		See [[CSS Syntax]]

			=Documents=

			* [Cascading Style Sheets, level 2 CSS2 Spec]


	[[Category:TERMINOLOGY]]		[[Category:TERMINOLOGY]]
	[[Category:Internet]]		[[Category:Internet]]
	[[Category:CSS]]		[[Category:CSS]]

PeterHarding at 02:18, 7 February 2008

2008-02-07T02:18:25Z

← Older revision		Revision as of 12:18, 7 February 2008
Line 77:		Line 77:
	</pre>		</pre>

			=Syntax=

			See [[CSS Syntax]]

	[[Category:TERMINOLOGY]]		[[Category:TERMINOLOGY]]
	[[Category:Internet]]		[[Category:Internet]]
	[[Category:CSS]]		[[Category:CSS]]

PeterHarding at 02:11, 7 February 2008

2008-02-07T02:11:27Z

@@ Line 56: / Line 56: @@
 * http://www.bigbaer.com/css_tutorials/
 * http://www.d.umn.edu/is/support/Training/Online/webdesign/css.html
 =Incorporation into HTML=
@@ Line 78: / Line 76: @@
    </script>
 </pre>

PeterHarding at 02:10, 7 February 2008

2008-02-07T02:10:10Z

Show changes

PeterHarding at 02:07, 7 February 2008

2008-02-07T02:07:35Z

@@ Line 397: / Line 397: @@
 See http://www.tizag.com/cssT/layers.php
-==Classes vs. IDs==
+==CSS IDs==
-The W3C defines class ID as "a unique identifier to an element".
+IDs begin with the hash character (#).
-See http://www.tizag.com/cssT/cssid.php
+For example:
 <pre>
@@ Line 407: / Line 407: @@
 p#Ex2 { text-transform: uppercase; }
 </pre>
 <pre>
-<p id="Ex1">This paragraph has an ID name of
+<p id="Ex1">This paragraph has an ID name of "Ex1" and has a white CSS defined background</p>
- "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>
-Suggested approach is to use IDs when there is only one occurrence per page.  Use classes when there are one or more occurences per page.
 eg.
@@ Line 581: / Line 618: @@
 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.

PeterHarding: /* Nesting */

2008-02-07T02:01:25Z

Nesting

← Older revision		Revision as of 12:01, 7 February 2008
Line 493:		Line 493:
	See http://www.htmldog.com/guides/cssintermediate/grouping/		See http://www.htmldog.com/guides/cssintermediate/grouping/

	===~~Grouping~~===		===Nesting===

	~~You~~ can ~~give the same~~ properties to ~~a number of~~ selectors ~~without having to repeat them by separating the~~ selectors ~~by commas~~.		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~~, if you have something like~~:		For example:

	<pre>		<pre>
	h2 {		#top {
	color: ~~red~~;		background-color: #ccc;
			padding: 1em
	}		}

	~~.thisOtherClass~~ {		#top h1 {
	color: ~~red~~;		color: #ff0;
	}		}

	~~.yetAnotherClass~~ {		#top p {
	color: red;		color: red;
			font-weight: bold;
	}		}
	</pre>		</pre>

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


	<pre>		<pre>
	~~h2, .thisOtherClass, .yetAnotherClass {~~		<div id="top">
	~~color: red;~~		<h1>Chocolate curry</h1>
	}
			<p>This is my recipe for making curry purely with chocolate</p>

			<p>Mmm mm mmmmm</p>
			</div>
	</pre>		</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/


			[[Category:TERMINOLOGY]]
			[[Category:Internet]]
			[[Category:CSS]]

	===Nesting===		===Nesting===

PeterHarding at 02:01, 7 February 2008

2008-02-07T02:01:03Z

@@ Line 437: / Line 437: @@
 ==@ Rules==
 ===Media types===
@@ Line 478: / Line 480: @@
 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 }.
+There are three pseudo classes that are used specifically in conjunction with the page at-rule, which would take the form of
-:first applies to the first page of the paged media.
+See http://www.htmldog.com/guides/cssintermediate/grouping/
 [[Category:TERMINOLOGY]]
 [[Category:Internet]]
 [[Category:CSS]]

PeterHarding at 01:55, 7 February 2008

2008-02-07T01:55:26Z

@@ Line 28: / Line 28: @@
 * [http://www.csszengarden.com/ CSS ZenGarden]
 * [http://www.cameraontheroad.com/?p=189 Camera on the Road Site]
 =Example Sites=
@@ Line 37: / Line 38: @@
 * http://www.tizag.com/cssT/reference.php
 =Tutorials=
@@ Line 50: / Line 53: @@
 * http://www.htmlgoodies.com/beyond/css/
 * http://www.thenoodleincident.com/tutorials/css/
+* http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/
@@ Line 431: / Line 436: @@
 </pre>
 [[Category:TERMINOLOGY]]
 [[Category:Internet]]
 [[Category:CSS]]

PeterHarding at 01:41, 7 February 2008

2008-02-07T01:41:57Z

@@ Line 19: / Line 19: @@
 * [http://en.wikipedia.org/wiki/Style_sheet_%28web_development%29 Use in web development]
-=Other References=
+=Other Links=
 * [http://www.w3.org/2002/03/csslayout-howto.html.en W3.org article on tableless layout]
@@ Line 33: / Line 33: @@
 * [http://www.cssplay.co.uk/ CSS Play]
 * [http://www.tizag.com/cssT/liveExampleCss/ Tizag.com]
 =Incorporation into HTML=
@@ Line 396: / Line 416: @@
 * Menu - div#menuPane
 * Content - div#content
 [[Category:TERMINOLOGY]]
 [[Category:Internet]]
 [[Category:CSS]]