<?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>DT Blog &#187; syntax</title>
	<atom:link href="http://www.dreamtemplate.com/blog/tag/syntax/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.dreamtemplate.com/blog</link>
	<description>Web Design Tips, Tutorials &#38; More!</description>
	<lastBuildDate>Sat, 22 Oct 2011 12:45:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Syntax Rules for CSS</title>
		<link>http://www.dreamtemplate.com/blog/web-design-tips/syntax-rules-for-css/</link>
		<comments>http://www.dreamtemplate.com/blog/web-design-tips/syntax-rules-for-css/#comments</comments>
		<pubDate>Wed, 22 Apr 2009 21:01:08 +0000</pubDate>
		<dc:creator>Richard Teahon</dc:creator>
				<category><![CDATA[Web Design Concepts]]></category>
		<category><![CDATA[Web Design Tips]]></category>
		<category><![CDATA[Web Design Tutorials]]></category>
		<category><![CDATA[basic syntax for css]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[syntax]]></category>
		<category><![CDATA[syntax rules]]></category>

		<guid isPermaLink="false">http://www.dreamtemplate.com/blog/?p=61</guid>
		<description><![CDATA[CSS has some great admirers among the web community, and many developers are using CSS to great effect in more creative ways.  If you are yet to come across CCS, there is no doubt that you soon will.  What follows, is a guide on some of CSS’s basic syntax rules. Selectors, are elements that are [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-62" src="http://www.dreamtemplate.com/blog/wp-content/uploads/2009/04/images6.jpg" alt="images6" width="145" height="101" /><strong>CSS</strong> has some great admirers among the web community, and many developers are using <strong>CSS</strong> to great effect in more creative ways.  If you are yet to come across <strong>CCS</strong>, there is no doubt that you soon will.  What follows, is a guide on some of <strong>CSS’s basic syntax rules</strong>.</p>
<p><strong>Selectors</strong>, are elements that are linked to a particular style.  It is worth remembering, that any <strong>HTML element</strong> is a possible <strong>CSS1 selector</strong>.</p>
<p>In the following code, the <strong>selector</strong> in   <strong>A {text-indent: 5em}    </strong>is<strong> A</strong>.</p>
<p>It is possible for an <strong>element</strong> to adopt different styles, because the selector can have different <strong>classes</strong>.  The following example shows how a designer can display particular code in a different color.</p>
<p><strong>Code.html  {color: #191970}<br />
Code.css    {color: #4b0082}</strong></p>
<p>Here we can see two <strong>classes, html</strong> and <strong>css</strong>.  Both are to be used by <strong>HTML’s code element</strong>. </p>
<p><strong>HTML</strong> uses the <strong>Class</strong> attribute to show the class of an element.</p>
<p>Thus:  <strong>&lt;A CLASS=warning&gt;Only one class is allowed per selector.<br />
For example, code.html.proprietary is invalid.&lt;/p&gt;</strong><br />
It is possible to use <strong>classes</strong> without an associated element.  The note class may be used with any element in following example.</p>
<p><strong>.note  { font-size :  large  }</strong><br />
  <br />
Most designers will tell you that it is good practice not to name Classes after their appearance, but to name them according to their function.  It would have been easy to name .note as .large, but what would have happened if the style of the class no longer had a large font size?  The reference to the class, would have been rendered meaningless.</p>
<p>It is recommended that ID selectors are used sparingly as they have inherit limitations.  They are individually assigned for the purpose of defining, on an element by element basis.  The “#” symbol is used as an indicator in CSS syntax.  It is placed before the name of the class:</p>
<p><strong>#svu890 { text-indent: 5em }</strong></p>
<p>The ID attribute is used by HTML for reference: <br />
                                                 <br />
                      <strong>         &lt;O ID=svp940&gt;Text indented 5em&lt;/O&gt;</strong></p>
<p>Strings of two simple selectors with white space in-between are <strong>Contextual Selectors</strong>.  Due to the rules of cascading order, they take precedence over simple selectors, and can be assigned normal properties.  The <strong>Contextual Selector</strong> below is <strong>P EM</strong>.  The stated rule is that emphasized text contained in a paragraph, will be on a red background.  Emphasized text in a heading will be unaffected.</p>
<p><strong>P EM  { background : red }</strong></p>
<p>Here are some useful <strong>declarations</strong> in <strong>CSS syntax</strong>.</p>
<p>Color, margin and font are types of <strong>property</strong>.  Properties are assigned to a selector to change its style.</p>
<p>The <strong>value</strong>, is a declaration that is assigned to a property.   Color, for example could be assigned a value red.</p>
<p><strong>Grouping</strong>, is a useful little trick that decreases repetitious statements within style sheets, as <strong>declarations </strong>and selectors, can be <strong>grouped</strong> together.  In the example below, all the headings have been given identical declarations via a grouping.</p>
<p><strong>H1, H2, H3, H,4 H5, H6  {<br />
       color: yellow<br />
       font-family: sans-serif   }</strong></p>
<p> It is important to remember that a <strong>nested </strong>selector, ( a selector that is nested within a selector), will inherit the <strong>property values</strong> assigned to the outer selector, unless it is modified.  So a color defined for the body will also be applied to the text in a paragraph.</p>
<p>However, in some cases this is not the case, and the nested selector will not inherit the outer selectors values.  The <strong>margin-top</strong> property is not inherited, as a paragraph would not have the same top margin as the document body.  As you can see these are largely logical in nature.</p>
<p>CSS allows comments with the same conventions as used in the C programming language.  Thus</p>
<p><strong>/* COMMENTS CAN NOT BE NESTED /*</strong></p>
<p>We hope the basic Syntax rules for CSS prove useful.  Good luck.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dreamtemplate.com/blog/web-design-tips/syntax-rules-for-css/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

