tag:blogger.com,1999:blog-75900351879003753922024-03-13T20:38:04.897-07:00CSS StuffAll about CSScssstuffhttp://www.blogger.com/profile/05562602933005533421noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-7590035187900375392.post-79694017784295033912010-09-22T15:42:00.000-07:002010-09-22T17:34:37.663-07:00CSS Common Mistakes for Beginners<span class="Apple-style-span" style="font-family: inherit;">I frequently encounter people doing mistakes when they write CSS and here I will try to point out some of them.</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<b><span class="Apple-style-span" style="font-size: large;"><span class="Apple-style-span" style="font-family: inherit;">1. Duplicate properties when possible</span></span></b><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">When you want to style particular element let's say with border -</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">border-left:1px solid #000;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border-right:1px solid #000;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border-top:1px solid #000;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border-bottom:1px solid #FFF;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">you can duplicate properties this way -</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">border:1px solid #000;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border-bottom:1px solid #FFF;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">first, your browser will apply first property where all sides of the border will be same color - #f00, and then second property. But browser does these operations so fast that you can't notice these changes, in result you get the same style but you write less code.</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: large;"><b><span class="Apple-style-span" style="font-family: inherit;">2. Redundant parameters and units</span></b></span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">Let's look at the following code -</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">margin:10px 5px 10px 5px;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;">it could be written like this -</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">margin: 10px 5px;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">Many people write units next to 0 parameters like this -</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">margin: 10px 0px 5px 0px:</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;">when they could write it this way -</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">margin: 10px 0 5px 0;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: large;"><b><span class="Apple-style-span" style="font-family: inherit;">3. Hash symbol missing</span></b></span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">When you assign a colour to parameter don't forget about hash symbol -</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">color:ffffff;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;">It should be:</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">color:#ffffff;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"> Or even:</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">color:rgb(111,111,111);</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: large;"><b><span class="Apple-style-span" style="font-family: inherit;">4. Don't repeat unnecessary parameters </span></b></span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">border-top:1px solid #00f;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border-right:1px solid #00f;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border-bottom:1px solid #00f;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border-left:1px solid #00f;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;">Why not just write this?</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">border:1px solid #00f;</span></li>
</ul><div><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<b><span class="Apple-style-span" style="font-size: large;"><span class="Apple-style-span" style="font-family: inherit;">5. Don't repeat styles</span></span></b><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">If you find yourself writing code like this -</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">p {color:#FFF;}</span></li>
</ul><ul><li><span class="Apple-style-span" style="font-family: inherit;">h1 {color:#FFF;}</span></li>
</ul><ul><li><span class="Apple-style-span" style="font-family: inherit;">h4 {clolor:#FFF;}</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;">You can save your time just by grouping these elements -</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">p, h1, h4 {color:#FFF;} </span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: large;"><b><span class="Apple-style-span" style="font-family: inherit;">6. Use short color declarations</span></b></span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">Hex numbers that repeat like -</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;"> color:#ffffff;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;"> background-color:#000000;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;"> border:1px solid #ee66aa;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">can be condensed to -</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">color:#fff;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">background-color:#000;</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">border:1px solid #e6a;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">But it doesn't work this though</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<ul><li><span class="Apple-style-span" style="font-family: inherit;">color:#ac34b5;</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">This is another way to condense your code and keep things short and easy to look at.</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: large;"><b><span class="Apple-style-span" style="font-family: inherit;">7. Don't use height parameter unless it's necessary</span></b></span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;">Once I worked on my friends stylesheet and found that he used height parameter on all <divs> This was a nightmare to fix just a tiny bit.</span><br />
<span class="Apple-style-span" style="font-family: inherit;">Use margin: and padding: parameters instead, that gives you much more flexibility what you can do with an element</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="font-size: large;"><b>8. Don't use inline CSS</b></span></span><br />
<br />
Always and always separate HTML and CSS otherwise when it comes to changes you wanna make to design, you will regret that you even started that thing.<br />
<br />
So remember!<br />
<br />
<ul><li>wrong: <a href="somewhere.html" style="float: right; color: rgb(51, 51, 51);">link</a></li>
<li>right: <a href="somewhere.html" class="link_style">link</a></li>
</ul><br />
<br />
<br />
</div><div><a href="http://cssstuf.blogspot.com/2010/09/introducing-to-css-style-cascading.html">Need more? Read my other CSS articles</a></div>cssstuffhttp://www.blogger.com/profile/05562602933005533421noreply@blogger.com0tag:blogger.com,1999:blog-7590035187900375392.post-3873514952467923752010-09-21T10:48:00.000-07:002010-09-22T17:04:05.115-07:00About CSS (Style Cascading Sheets)<b><span class="Apple-style-span" style="font-size: large;">CSS</span></b><br />
<br />
<div style="text-align: justify;"> Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"> CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). </div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"> CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"> CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.</div><br />
<br />
<b><span class="Apple-style-span" style="font-size: large;">Levels (versions)</span></b><br />
<br />
<br />
CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS1, CSS2, and CSS3. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types, which were added in CSS2.<br />
<br />
CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need.<br />
<br />
CSS level 2 revision 1 (“CSS 2.1”) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. At this moment, September 2009, it is a Candidate W3C Recommendation.<br />
<br />
CSS level 3 is under development. It includes all of level 2 and extends it with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more.<br />
<div><br />
<br />
<br />
<a href="http://cssstuf.blogspot.com/2010/09/css-common-mistakes.html">Need more? Read CSS common mistakes for beginners</a> </div>cssstuffhttp://www.blogger.com/profile/05562602933005533421noreply@blogger.com0