Cascading Style Sheet Basics

Tutorial on how to make basic Cascading Style Sheets or CSS

To better understand this CSS tutorial you should first go through the html tutorial and html tags tutorial, this will give you the HTML knowledge needed to build a Basic HTML web page. You will then be well equipped for using cascading style sheets and better understand this CSS tutorial. If you already have, you are ready to start implementing CSS. CSS can affect any tags in a given web page. For example a cascading style sheet could say that all text between H1 tags in a web page will be green. To connect a cascading style sheet to an html page you can use one of two methods. #1 :put the cascading style sheet directly in the web page (internal style sheet). #2 : put the cascading style sheet in a separate file (external style sheet).

Create an internal style sheet

Tutorial on how to create an internal CSS

This part of the CSS tutorial shows you how to create a basic internal style sheet. The CSS here is stored between the head tags inside the style tags at the top of the HTML document. Inside the first tag you must type (type="text/css") to identify the style you are using to the browser. Once this is done you put the contents of your CSS between the tags. In this example a single command was given. All of the text inside the entire html document appearing between h1 tags will be green. I inserted a single command in there to simplify the example but multiple commands could be inserted. In fact, CSS commands can be given to alter the contents of almost all HTML tags. This means that if you wanted to change the colors of all the headings in your html document, you could do it all in one shot. The only disadvantage of using this method of inserting style sheets is that it will only affect the HTML page on which it appears. Using the second method of inserting a cascading style sheet (external style sheet) will allow you to create the style sheet only once and call upon it from any HTML page... Observe.

Create an external style sheet

Tutorial on how to create an external CSS

On the example to the left you can see how the CSS was inserted through a LINK tag. The LINK tag identifies the style which will be used and calls upon it. Right below it, you see what the insides of the whatever.css file could look like. This whatever.css file (style sheet) must be made in the same fashion as an HTML file. However, instead of saving it as ".html" you save it as ".css". In this CSS file you must write exactly what you would have written inside the STYLE tags in the first example. Do not attempt to re-write STYLE tags inside the new document because the style was already identified in the LINK tag.

CSS web page design commands

Tutorial on CSS web page design commands

Now that you know how to insert a cascading style sheet, allow me to introduce you to some of the commands you can insert inside your CSS document. This list will be followed by an example of cascading style sheet you could use.

O.K. this may seem a tad advanced if you're new to cascading style sheets, please allow me to explain. The example listed above would need to be either inserted between STYLE tags or be called upon by a LINK tag. The first word of each command begins with the html tag to be affected. For example the first command starts with "body". This means that the line will affect everything contained between the body tags on your page. The second and fourth commands start with different size headers (h1 & h2), which means that all content contained between the specific sized headers will be altered by the command. The third command starting with "p" specifies that all paragraphs contained between the P tags will be affected.

After the html tag name comes a pair of curly braces. Everything you put between them will represent what effects you desire upon the tag's contents. Notice how the ":" and ";" marks are scattered inside the braces. The ";" signifies that a command has ended and a new one begins. The ":" signifies a precision to the previous part of the command. Take the first line for example, "background-image :" tells you what will be affected (the BODY's BACKGROUND-IMAGE). The second part "url("whatever.jpg") ;" is there to specify how the background will be affected. In this example, if left as is, the web browser will look for the "whatever.jpg" picture to post as a background.

CSS Background Image and other commands

Tutorial on CSS Background Image and HTML tag alteration

The next example will be the exact coding for a web page containing all of which we have reviewed in this cascading style sheet (CSS) tutorial...

Go ahead and type in that text just the way it is, save it with the .HTML extension and open it with your web browser. This example will show you how CSS can affect the different html tags. For a better effect, draw an image and save it as “whatever.jpg”. If you do not create this image there will be no background image. Make sure you put the image in the same folder as this HTML file otherwise the browser wont find it.

More CSS syntax examples

Using internal and external CSS with a table

Here are some examples to familiarize yourself with the usage of both internal and external CSS. The first example is using external CSS with a table to modify the background image and color of one of the table's cells. The two examples are very similar. The second is using internal CSS with a table to modify the content of one of its cells. After all this you should have a good understanding of the use and implementation of CSS.

Thank you for visiting RoadDust's internal and external CSS tutorial.