<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CSS Tutorials and CSS Articles &#187; CSS Grouping</title>
	<atom:link href="http://www.cssmaster.co.uk/tag/css-grouping/feed" rel="self" type="application/rss+xml" />
	<link>http://www.cssmaster.co.uk</link>
	<description>CSS tutorials and articles</description>
	<lastBuildDate>Tue, 02 Feb 2010 01:43:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS Grouping and Nesting</title>
		<link>http://www.cssmaster.co.uk/css-grouping-and-nesting</link>
		<comments>http://www.cssmaster.co.uk/css-grouping-and-nesting#comments</comments>
		<pubDate>Sat, 16 Jan 2010 23:23:26 +0000</pubDate>
		<dc:creator>CSS Master</dc:creator>
				<category><![CDATA[CSS Tutorials]]></category>
		<category><![CDATA[CSS Grouping]]></category>
		<category><![CDATA[CSS Nesting]]></category>

		<guid isPermaLink="false">http://www.cssmaster.co.uk/?p=51</guid>
		<description><![CDATA[In CSS it is possible to nest and group selectors together.
The easiest way to explain CSS grouping and nesting is by using examples.  
Let&#8217;s say I want to have all my h tags (h1-h6) in a green font colour, rather than the rest which are all black.  All I need to do is [...]]]></description>
			<content:encoded><![CDATA[<p>In CSS it is possible to nest and group <a href="http://www.cssmaster.co.uk/selectors-and-declarations">selectors</a> together.</p>
<p>The easiest way to explain <strong>CSS grouping and nesting</strong> is by using examples.  </p>
<p>Let&#8217;s say I want to have all my h tags (h1-h6) in a green font colour, rather than the rest which are all black.  All I need to do is list the tags I want to use as selectors one after another, just before the declaration:<br />
<code>h1,h2,h3,h4,h5,h6{<br />
&nbsp;&nbsp;color:green;<br />
}</code></p>
<p>This works for classes too:<br />
<code>.bold,.bolded,.bolder{<br />
&nbsp;&nbsp;font-weight:bold;<br />
}</code></p>
<p>You can also nest selectors.  Let&#8217;s say I have a div, in which content resides, but I want that content to be styled differently to the rest of the page, without having to declare a style for everything.<br />
<code>.my_div{<br />
&nbsp;&nbsp;background-color:green;<br />
}<br />
.my_div p{<br />
&nbsp;&nbsp;color:white;<br />
}</code><br />
That code will make all paragraph tags WITHIN the .my_div element to be styled that way.  You will find this a massive time saver and of great use when dealing with larger web pages.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cssmaster.co.uk/css-grouping-and-nesting/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

