<?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 Fonts</title>
	<atom:link href="http://www.cssmaster.co.uk/tag/css-fonts/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 Link Styling</title>
		<link>http://www.cssmaster.co.uk/css-link-styling</link>
		<comments>http://www.cssmaster.co.uk/css-link-styling#comments</comments>
		<pubDate>Fri, 15 Jan 2010 18:37:51 +0000</pubDate>
		<dc:creator>CSS Master</dc:creator>
				<category><![CDATA[CSS Tutorials]]></category>
		<category><![CDATA[CSS Fonts]]></category>
		<category><![CDATA[CSS Links]]></category>
		<category><![CDATA[CSS Text]]></category>

		<guid isPermaLink="false">http://www.cssmaster.co.uk/?p=28</guid>
		<description><![CDATA[CSS can be a powerful tool when styling links on your web page.  
You can change the look of the link itself using traditional CSS Font Styling and CSS Styling Text, but links also have extra behaviours that can be styled.
A link is an anchor, the HTML for an anchor tag is , so [...]]]></description>
			<content:encoded><![CDATA[<p>CSS can be a powerful tool when <strong>styling links</strong> on your web page.  </p>
<p>You can change the look of the link itself using traditional <a href="http://www.cssmaster.co.uk/css-font-styling">CSS Font Styling</a> and <a href="http://www.cssmaster.co.uk/css-styling-text">CSS Styling Text</a>, but links also have extra behaviours that can be styled.</p>
<p>A link is an anchor, the HTML for an anchor tag is <a>, so the CSS is:<br />
<code>a:link { color:#fff; }<br />
a:visited { color:red; }<br />
a:hover { color:blue; }<br />
a:active { color:yellow; }</code><br />
:link &#8211; An unvisited link<br />
:visited &#8211; A link that has been visited<br />
:hover &#8211; When the mouse hovers over a link<br />
:active &#8211; The selected link</p>
<p>Ofcourse you can completely customise these links, whether that&#8217;s with a background color, a border or a text styling underline.  By default the links are blue with an underline.  &#8216;active&#8217; links are red by default and visited links are purple.</p>
<p>An example of a link styled as a button:<br />
<code>a {<br />
&nbsp;&nbsp;padding:10px;<br />
&nbsp;&nbsp;margin:5px;<br />
&nbsp;&nbsp;background-color:#eee;<br />
&nbsp;&nbsp;color:#000;<br />
&nbsp;&nbsp;border:1px solid #ccc;<br />
}</p>
<p>a:hover{<br />
&nbsp;&nbsp;background-color:#999;<br />
&nbsp;&nbsp;color:#fff;<br />
}</code><br />
A link with the :hover select</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cssmaster.co.uk/css-link-styling/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Font Styling</title>
		<link>http://www.cssmaster.co.uk/css-font-styling</link>
		<comments>http://www.cssmaster.co.uk/css-font-styling#comments</comments>
		<pubDate>Fri, 15 Jan 2010 17:58:14 +0000</pubDate>
		<dc:creator>CSS Master</dc:creator>
				<category><![CDATA[CSS Tutorials]]></category>
		<category><![CDATA[CSS Fonts]]></category>
		<category><![CDATA[CSS Text]]></category>

		<guid isPermaLink="false">http://www.cssmaster.co.uk/?p=24</guid>
		<description><![CDATA[CSS Font styling is similar to CSS text styling, except the font styles change how the fonts themselves are displayed.
Let&#8217;s begin with the font itself.
p { font-family:"Times New Roman", Times, serif; }
This gives 3 fonts to choose from, or in this case, 3 &#8216;families&#8217; of fonts.  The first is a specific font, the second [...]]]></description>
			<content:encoded><![CDATA[<p><strong>CSS Font styling</strong> is similar to CSS text styling, except the font styles change how the fonts themselves are displayed.</p>
<p>Let&#8217;s begin with the font itself.<br />
<code>p { font-family:"Times New Roman", Times, serif; }</code><br />
This gives 3 fonts to choose from, or in this case, 3 &#8216;families&#8217; of fonts.  The first is a specific font, the second is a font-family and the third tells the browser to use any serif font it has in it&#8217;s font library.  This acts as a fall back system, so if the first isn&#8217;t found the second is used, and if that isn&#8217;t found the third is used.</p>
<p>The font itself can be styled.  The styles allowed are &#8216;norma&#8217;, &#8216;italic&#8217; or &#8216;oblique&#8217;.  Normal is just normal standard text.  Italic makes the text lean as italics do.  Oblique is similar to italics only it is hardly supported by many browsers.  Some examples:<br />
<code>.normal { font-style: normal; }<br />
.italics { font-style: italic; }<br />
.oblique { font-style: oblique; }</code></p>
<p>The font size can also change.  Generally there are three ways to do this:</p>
<ul>
<li>Pixels (px)</li>
<li>Em (em)</li>
<li>Percentages (%)</li>
</ul>
<p>The W3C recommend using em.</p>
<p>Here are some examples:<br />
<code>h1 { font-size: 36px; }<br />
h2 { font-size: 2em; }<br />
h3 { font-size:90%; }</code><br />
Internet Explorer users may have issues using pixel values, where as nearly all other browsers are fine.  Because of this always try to use em where possible.</p>
<p>Similar to text styling of capitalising the letters you can also produce a &#8217;small caps&#8217; version of most fonts using CSS.<br />
<code>p { font-variant: small-caps; }</code></p>
<p>Finally, you can bold the font with a number of options, including:</p>
<ul>
<li>normal</li>
<li>bold</li>
<li>bolder</li>
<li>lighter</li>
<li>100</li>
<li>200</li>
<li>300</li>
<li>400</li>
<li>500</li>
<li>600</li>
<li>700</li>
<li>800</li>
<li>900</li>
<li>inherit</li>
</ul>
<p>Use these in the following format:<br />
<code>p { font-weight: bold; }<br />
.mid { font-weight:500; }<br />
.bolder { font-weight: bolder; }</code></p>
<p>See <a href="http://www.cssmaster.co.uk/css-styling-text">CSS Styling Text</a> tutorial for more information on how to style text on your web page.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cssmaster.co.uk/css-font-styling/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>CSS Styling Text</title>
		<link>http://www.cssmaster.co.uk/css-styling-text</link>
		<comments>http://www.cssmaster.co.uk/css-styling-text#comments</comments>
		<pubDate>Fri, 15 Jan 2010 17:35:58 +0000</pubDate>
		<dc:creator>CSS Master</dc:creator>
				<category><![CDATA[CSS Tutorials]]></category>
		<category><![CDATA[CSS Fonts]]></category>
		<category><![CDATA[CSS Text]]></category>

		<guid isPermaLink="false">http://www.cssmaster.co.uk/?p=22</guid>
		<description><![CDATA[Nine out of ten times the most important aspect of your website is the content, which is often text.  You want to make sure that the text you display reads well and makes sense, but more than that, you want to make sure that the text is styled and looking good.
Using CSS text styling [...]]]></description>
			<content:encoded><![CDATA[<p>Nine out of ten times the most important aspect of your website is the content, which is often text.  You want to make sure that the text you display reads well and makes sense, but more than that, you want to make sure that the text is styled and looking good.</p>
<p>Using <strong>CSS text styling</strong> you can easily manipulate exactly how the text looks.  Let&#8217;s begin by manipulating the text colour for the whole page (body).<br />
<code>body { color:red; }</code><br />
Using this CSS all of the text on the page (unless otherwise stated) will be red.  Of course this goes for other text elements too, such as h-tags (h1, h2, h3, &#8230;), p tags, divs, spans and most container elements.</p>
<p>Aligning the text is also possible.  Let&#8217;s make sure the text is aligned to the left of the page:<br />
<code>body { text-align:left; }</code><br />
You can even justify the text, making it all come to an even end: <code>body { text-align:justify; }</code>.<br />
It&#8217;s important to remember that the text-align code only works to text INSIDE an element.  A common mistake with new comers to CSS is to <code>text-align:center;</code> a layout element expecting it to go in the middle of the page, but this code will only center align the text within the element.</p>
<p>There are some basic decorations that can be applied to the text too, such as a line above the text, a line through the text, a line underneath the text, and blinking text/  Blinking text is not very well support so it is not recommended.<br />
<code>.class { text-decoration:overline; }<br />
.class2 { text-decoration:line-through; }<br />
.class3 { text-decoration:underline; }<br />
.class4 { text-decoration:blink; }</code><br />
Be careful when underlining text as it can often mis-lead users into thinking that the text is infact a link.</p>
<p>Text can be transformed to different case too.  See the following examples:<br />
<code>.upper { text-transform: uppercase; }<br />
.lower { text-transform:lowercase; }<br />
.capitals { text-transform:capitalize; }</code><br />
This code can come in very handy when changing the look of a website, if for example you want all of your menu items to become capitals.</p>
<p>The final section on <em>CSS Text Styling</em> is indentation.  You can indent text as much as you like using specific measurements:<br />
<code>p { text-indent: 100px; }</code></p>
<p>If you&#8217;re looking for more information on how text can be changed to become bolded, italics, etc, then you need to look for <a href="http://www.cssmaster.co.uk/css-font-styling">CSS Styling Fonts</a> as there are seperate behaviours for both FONTS and TEXT.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cssmaster.co.uk/css-styling-text/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

