Cascading style sheets can be described as a list of what are referred to as selector declarations. These selector declarations fall into four main categories.
A selector consists of three element: the selector name a property and its value. The CSS syntax is written out as follows.
Comments in CSS are enclosed in the following manner:
You should now be able to easily identify the four types of selectors in a cascading style sheet by simply looking at the selector name:
Now that you have a basic understanding of CSS syntax let's consider how we're going to layout a basic style sheet. A good way to start is by listing all of your selectors according to the CSS syntax categories separated by notes identifying each category. Start with the tag selectors followed by the ID selectors, class selectors and last the pseudo-class selectors. Take a look at the following example.
Note: You can create a cascading style sheet in notepad by saving it as a mystyle.css file.
Up to this point our lesson has been pretty straight forward and should be fairly easy to comprehend. Next we are going to learn how to assign declarations to each of the selectors is our CSS style sheet.
Each declaration consist of a property followed by a colon, and then the value for the property followed by a semicolon. A value will consist of one or more keywords and value types, usually (but not always) separated from each other by a space.
There are eight definition categories and each consist of of its own number of properties and values. Following is a list of the definition categories consistent with CSS 2.0.
I'm not sure where I heard this but it makes a lot of sense to me. "A successful process is a process of processes". Correct me if I'm wrong but I believe it was Henry Ford who first recognize the potential for efficiency and control of an assembly process by taking a complicated process and breaking it down into smaller more manageable processes, which he then capitalized on by creating the modern day assembly line, a concept that revolutionized modern industry. By now your probably wondering what this little bit of history has to do with our current creative learning process? The answer is: we are going to breakdown and simplify the process for creating and designing a valid website according to the new web standards. Our process will begin with the basic component parts needed for a “CSS Master” style sheet. I like to think of it as my website design flowchart.
But before we get started I think you should be aware of the fact that this tutorial is based on building our project in a basic word format without the aid of a visual program. The purpose is so that you can learn how the codes “structural syntax” language works. It is almost virtually impossible to troubleshoot potential problems if you don’t understand the “structural syntax” of the code you are using. The syntax of cascading style sheets is actually very easy to understand. So, let’s start by taking a look at our so called website design flowchart to figure out where to begin. If you are at all familiar with CSS style sheets you should already know that they come in two distinct varieties “Internal” and “External”. The word “Cascading” is a metaphor for the “hierarchy” of presentational sequences, which basically means that any declarations declared internally have precedence over those declared externally. Because we are building a “CSS Master Template” style sheet ours will be an external style sheet. Later we will talk about how to control individual page features with internal style declarations.
We will begin by creating a list of the basic tag elements that will be needed to create our website. Once we have our basic tag elements we will create our individual id elements, which I like to think of as "content modules", which are only used once on a page. Then last we will create our pseudo-class elements and any class elements needed. I will explain these later.
Tag style elements are nothing more than declarations that effect the appearance of valid tags, in our case XHTML. So let's start by creating a least of the basic XHTML tag elements we'll need for our website. Remember you can add or subtract tag elements as needed.
Okay, now that we have our basic tag elements listed let's consider our individual "content modules" (ID attributes). Note that all ID attributes begin with a "#" mark and can only be used once in a page. Because we our building a "Master" cascading style sheet we will name all of the "content modules" (ID attributes) needed to create several types of presentations.
Now that we have our tag elements and "content modules" listed now we will need to create a list of the pseudo-classes we'll need. A pseudo-class