A semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout.
Semantic vs structural approach in naming classes
In general, a semantic approach defines classes names considering the "meaning" a certain element has on your page, independently from its "position" or specific property (structural approach). ... Read More
1. HTML source code
Start with a blockquote and some text.
<blockquote>Hello, I am a double quote...</blockquote>
2. Specify blockquote
Specify blockquote element as follow:
blockquote {
font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
width: 400px;
background: url(images/close-quote.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
}
The CSS code above will display the close-quote.gif graphic background at bottom right corner. The ... Read More
The <div> tag can be defined as the division in a web page. It is a block level element. This implies that the default behavior of div's is to stack up one above the other. This serves the purpose of using div's for a simple web page layout where all the elements ... Read More
This script will make an image grey until it has a mouse over it. Once you mouseoff, it changes back to grey. Copy and paste this code into your <img>command.
style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover="this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'" onmouseout="this.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'" ... Read More
Love Hate is how I taught myself to remember the order. The acronym for the order (LVHA) just wasn't terribly easy to remember on its own. It didn't spell anything, or really give a sensical meaning to me. But Love Hate works. So what is LVHA?
1. a:link
2. a:visited
3. a:hover
4. a:active
LVHA is ... Read More
Basics
So to start, we need to define the basic page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>3 Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> </style>
</head>
<body>
</body>
</html>
This should all be very basic. The doctype will be XHTML 1.1, and the rest should be obvious.
The first thing we will be doing is ... Read More
CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much ... Read More
1. The content is separated from the design
Because you are able to create a separate Stylesheet and link it to all your web documents, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter ... Read More
One thing that CSS allows us to use for screen presentation are alternate cursors. This is not the idea of downloading or forcing a download of a cursor, as was done in the past (though that is possible as well), but instead, we use several built in concept cursors.
Each of ... Read More
