1.
.class {
padding-left: 3px;
margin-right: 6px;
padding-top: 10px;
padding-right: 9px;
margin-left: 6px;
background-image: url('images/happy.jpg');
background-position: bottom;
background-repeat: repeat-x;
background-color: #E2CCCC;
}
-------------------------------
CSS Shorthand is used to turn many CSS properties into one to make the file size smaller
and a cleaner document. The above should be:
.class {
padding: 10px 9px 0 3px;
margin: 0 6px;
background: url('images/happy.jpg') repeat-x #E2CCCC bottom;
}
2.
a {color: #FF0;}
a:visited {color: #F00;}
<a name="myAnchor">don't like linking here</a>
<a name="myAnchor1" href="#">do like linking here</a>
-------------------------------------------
Users don't like linking to myAnchor, so should use pseudo-class :link:
a:link {color: #FF0;}
3.
p:first-child {font-weight: bold;}
<div>
<p>Hello</p>
<p>Here I need font-weight bold</p>
</div>
-------------------------------------------
The common error is to assume that a selector like p:first-child will select the first child of a p element.
p:first-child means p as first-child.
(IE6 doesn't support :first-child)
4.
body {font-size: 12px;}
h1 {font: bold italic 1.2/200% sans-serif; }
<body>
<h1>Welcome</h1>
</body>
------------------------------------------
The common error is to put line-height (1.2) before font-size (200%). Should be
h1 {font: bold italic 200%/1.2 sans-serif; }
5.
body {font-size: 10px;}
div {line-height: 1em; } /* computed value */
p {font-size: 20px;}
<div>
<p>The computed line-height value of 10px was inherited by the paragraph from its parent div.
This paragraph's font-size is 20px. This may cause the lines of text to overlap each other.
</p>
</div>
--------------------------------------------
The computed line-height value of 10px was inherited by the paragraph from its parent div.
This paragraph's font-size is 20px. This may cause the lineof text to overlap each other.
Setting it a scaling factor will fix this problem because the scaling factor is an inherited value:
div {line-height: 1; } /* inherited value */
It's better to set line-height using scaling factor in most cases.
6.
<p>This paragraph has many spaces in it.</p>
------------------------------------
Should use:
p {white-space: pre;}
<p>This paragraph has many spaces in it.</p>
Or:
<pre>This paragraph has many spaces in it.</pre>
7.
<a href="http://www.mysite.com" style="display: block>
<p style="display: inline;">change display to be inline inside anchor</p>
</a>
---------------------------------------
A link cannot be wrapped around a paragraph.
8.
You can t simply use { float: center; } to achieve that centered effect on block-level elements.
You need to use
{ margin: 0 auto; }
9.
Inline Styles (Embedded CSS) this would be a fast way to add CSS to your HTML documents,
by adding your styles directly into your HTML tags. (i.e. <h1 style= color: #F00; >Welcome!</h1>)
But, It doesn't separate content from presentation; It causes more maintenance headaches;
It makes your pages bigger.
10.
#selector { margin: 20px 0px; }
---------------------------------------
There s no need to include the px after 0.
11.
{ color: red; }
-----------------------------------
You should make sure it s the same color displayed across all browsers.
Use Hexadecimal Instead of Color Names.
12.
#selector {
font-family: Helvetica;
}
----------------------------------
Not Providing Fallback Fonts. Should be:
#selector {
font-family: Helvetica, Arial, sans-serif;
}
For background-image, we also need to specify a background-color (in case the image fails
to load for some reason).
13.
div#nav ul.myList li a.navLink {
/* Styles go here */
}
---------------------------------------------------
Overly specific CSS selectors don't do anyone any good. They take the browser longer to run.
Should be
#nav li a {
/* Styles go here */
}
