Categories
Useful Sites
Stu Nicholls offers CSSplay, a site with CSS examples, including many uses of :hoverCSSPlay
W3School includes many useful tutorials and examples on CSS.W3school
A demonstration of what can be accomplished visually through CSS-based design.CSS Zen Garden
free css html tutorial
Web Design Tutorials
Using two classes together
We can use two classes together by:
<p class="mainc subc"> Description here.. </p>
The above paragraph calls up two rules assigned to mainc and subc. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
Centering a page
The following codes (in the CSS file) will center all the content:
* html #wrap { height:100%; }
body, html { height:100%; }
body { margin:0;padding:0; }
#wrap { position:relative; width:770px; margin:auto; min-height:100%; }
CSS border default value
The only requirement for the border to work is the existance of style attributes. Meaning that border: solid will output a border with medium thickness (default), solid style and the color of text (default).
Creating a gradient with CSS
To create a gradient for your background, you can make a 1px-wide, 600px-high (or however long you need the gradient to be) gradient image in the image editor of your choice, put it in the background of your body and repeat-x.
Removing the border around every image
a img { border: 0px; } /* to be included in the CSS file*/
Content overlapped upon first visit
Some designers may experienced that the some of the content were overlapping when they first visit the page but it will be fixed once the refresh button is hit. Assuming that the HTML codes were successfully implemented, you may want to check if all the dimension of the images were supplied.
When you don't supply a width and height for the images, the browser has to load the image first to know how big is actually is. The problem occurs in that the browser will carry on loading the rest of the page while the image is still loading and therefore doesn't allocate the correct amount of space for the image.
It is advised to state every dimension (width and height) of the images to ensure the page loads correctly upon first visit.