<?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>Design Gala &#187; One Line CSS</title>
	<atom:link href="http://designgala.com/tag/one-line-css/feed/" rel="self" type="application/rss+xml" />
	<link>http://designgala.com</link>
	<description>Web Usability, Web Technology, User Experience</description>
	<lastBuildDate>Sat, 11 Jun 2011 02:38:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>One Line CSS Magic</title>
		<link>http://designgala.com/one-line-css-magic/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=one-line-css-magic</link>
		<comments>http://designgala.com/one-line-css-magic/#comments</comments>
		<pubDate>Fri, 21 Mar 2008 04:51:36 +0000</pubDate>
		<dc:creator>Design Gala</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[One Line CSS]]></category>

		<guid isPermaLink="false">http://www.designgala.com/one-line-css-magic/</guid>
		<description><![CDATA[Its pure beauty of CSS that gives life to the website and makes it lively. Sometimes, one line in CSS can be more than a magic providing solutions. I reviewed some of the CSS files and came up with some one line CSS.
]]></description>
			<content:encoded><![CDATA[<p>No need to mention <abbr title="Cascading Style Sheets">CSS</abbr> is awesome. Its pure beauty of CSS that gives life to the website and makes it lively.  Yes, it&#8217;s not simple to write CSS for newbie and even professionals sometimes gets stuck because of cross browser issues. Sometimes, One line in CSS can be more than a magic providing solutions. I reviewed some of the CSS files and came up with some one line CSS.</p>
<p>Below are list of one line CSS. One line <a title="CSS" href="http://www.designgala.com/topics/css/">CSS</a> mentioned below may or may validate <a title="Web Standards" href="http://www.designgala.com/topics/web-standards/">web standards</a> and <a title="Web Accessibility" href="http://www.designgala.com/topics/web-accessibility/">web accessibility</a> rules.</p>
<h3><strong>1. Set default margin and padding to all elements</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<p>Every  element that have not assigned margin or padding will have default value of above.<br />
Some CSS designers argue that this is not necessary at all because all CSS element at the end will have their assigned value.</p>
<h3><strong>2. Set image border to zero</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">img<span style="color: #00AA00;">,</span> a img <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<p>This can be used to prevent any linked images from displaying borders.</p>
<h3><strong>3. Remove Firefox&#8217;s link border</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">a<span style="color: #3333ff;">:active</span><span style="color: #00AA00;">,</span> a<span style="color: #3333ff;">:focus </span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<p>This removes dotted outline from focused or active links on firefox.</p>
<h3><strong>4. Scrolling Render IE</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">html <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background</span> <span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span>null<span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">fixed</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<h3><strong>5. Prevent line breaks in links, over sized content to break</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">a<span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">white-space</span><span style="color: #00AA00;">:</span><span style="color: #993333;">nowrap</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
element <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<p>This trick prevents line breaks on links.</p>
<h3><strong>6. Centering block elements horizontally</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">element <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<p>This one line CSS horizontally centers a block level element.</p>
<p>For IE less than 7, following line should be added though.</p>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">element <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<h3><strong>7. Show Firefox scrollbar</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">html<span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #3333ff;">:-moz-scrollbars-</span>vertical<span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<h3><strong>8. Remove textarea scrollbar in IE</strong></h3>
<div class="wp_syntax">
<div class="code">
<pre class="css" style="font-family:monospace;">textarea<span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre>
</div>
</div>
<div id="fb-root"></div>
<p><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><!-- Do not remove --></p>
]]></content:encoded>
			<wfw:commentRss>http://designgala.com/one-line-css-magic/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>

