CSSintro

Okay, I know this topic is nothing new and you’ve read hundreds of tutorials about it, but for a newbie like me, it’s still fascinating.

CSS = cascading style sheets. Basically, CSS is a compilation of styles and formatting elements you can add to your HTML code such as different fonts, colors, and other. It has replaced older, more traditional tags such as <font> and <align>. The best way to use CSS is to create a separate .css file that you’ll link into your HTML code like this:

<link rel=”stylesheet” type=”text/css” href=”filename.css”>

Add that into your <head> tag and the whole html file will follow these rules. This basically tells the browser that there is a stylesheet CSS in text that can be found under the name “filename.css”. You can also create in-document styles using this tag in the <head>:

<style type=”text/css”>

After you place this tag into the document, just write your style definitions and end the tag with </style>. Here is an example of that:

<head>

<style type=”text/css”>

p {color: blue; margin-left: 5 px}

</style>

</head>

I just created a style in which every “<p>” or paragraph in the HTML document will be in blue with a five pixels margin from the left. You can use this same technique for a specific paragraph, using the <style> tag, if you wish to like this:

<p style=”color: blue; margin-left: 5px”>

Text

</p>

There are a few commonly used tags associated with CSS:

  • <style>- this tag gives you the straight style definition, there’s nothing more to it. You can use several different attributes with this tag.
  • <div> - creates a division in the document. You can create a “block” in the HTML code using div. It’s usually used for formatting the layout of a page.
  • <span>- similar to div, span is meant for smaller portions of HTML to define. Usually used with “class” and “id” attributes
  • <link>-is pretty self-explanatory and used in an example at the beginning of this article

How to write CSS:

CSS has a distinct form:

.newstyle{

property: value;

}

You can define a class this way and use it like this:

.fontstyle{

font-weight: bold;

}

<p class=”fontstyle”> style text </p>

The text would show up bold. You can put multiple properties under one style but they always have to be separated by “;” (just like in PHP). Now, let’s say you want all of the paragraphs to be bold, there is no sense in applying “class” to each one of them so you can apply the value a tag:

p {font-weight: bold;}

Now all paragraphs will show up in bold. You can redefine basically any tag this way in CSS. It’s a very powerful tool. You can define multiple tags at once as well:

h1, h2, p

{

color: green;

}

The same way, you can use multiple classes on a tag:

<p class=”mystyle mystyle2 boldstyle”>Text </p>

In this example, the paragraph will be formatted according to three separate classes. The possibilities are endless with CSS. Let’s look at “id”‘s :

#myid { color: green}

p#pid { text-align: left}

The first is just a regular ‘id’ that you can apply to basically almost any tag. The second definition can only be used with paragraphs or the <p> tag.

One last thing that you should probably know about CSS, how to make comments. This is similar to PHP:

/* comment goes here */

And that’s it. In my next tutorial, I’ll show you how to do a basic format of your page using CSS. See you next time!

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Reddit
  • Tumblr
  • Twitter
  • email
  • Slashdot
  • StumbleUpon