Let’s have a look at backgrounds. In the previous two tutorials, I’ve covered borders and opacity. In this tutorial, we’ll cover some of the basic CSS3 additions to the background properties. If you have no idea how to deal with backgrounds in CSS, read my tutorial on backgrounds pre-CSS3. CSS3 is gaining momentum in the Web development world and many properties are already supported by most browsers (Firefox, Konqueror, Safari, and Chrome) as well as some minor browser (Opera). If you want to stay on top of the game, you have to learn the new stuff and employ the new techniques you’re presented with.

In this tutorial, I’m going to cover:

• background sizes
• multiple backgrounds
• background origin/clip

I will provide illustrations as to what each property looks like and you can also view my CSS3 testing sample that features this tutorial’s properties (among others). The properties will be compatible with both webkit (Safari and Chrome) and the Mozilla engine. Internet Explorer, unfortunately, does not yet support most CSS3 properties. I’d like to also note that I use a Mozilla Firefox 3.5.2 (which apparently has tons of trouble using ANY of these properties) and Chrome 3.0.195.33 (which seems to render everything perfectly).

First, why do we use this? Well, let’s say you have an image that’s too big or too small and you want to resize it without using photoshop or another tool. There are few reasons why you’d want that. Let’s say you want the same image on one website to be 400×500 px while on another site, you want it to be 200×250 yet you don’t want to create the extra file.

In my example, I have a strangely sized logo that is 474 px by 185 px. Now, I want it to be about 90 px tall, so that’s be 231 width. Here’s what the code would look like:

background:url(background1.png) no-repeat center;
	-webkit-background-size: 231px 90px;
	-moz-background-size: 231px 90px;
	-o-background-size: 231px 90px;
	-khtml-background-size: 231px 90px;
background-size: 231px 90px;

This code should show up properly on the above-mentioned browsers. I’ve had no trouble with Chrome but my Firefox is being stubborn. The result should look something like this:

correctly rendered background

As opposed to this:

incorrectly rendered background

Note that I am creating these images as I go so whenever I add more backgrounds and use other CSS3 properties, my testing site will look differently.

Here’s the concept. Okay, so on my example page, I want the background to have a greyish background with a slight gradient. I’ll make a pixel wide pretty long strip that goes from white to nothingness on top of an actual grey background. On top of all that, I’d love to add some kind of a swirl on the left and a nice swirl in the right corner. Let’s see how that’ll look in code:

.bgr {
background: rgba(115, 115, 115, .8);
background-image:url(gradient.png), url(swirl1.png), url(swirl2.png);
background-position: top left, top left, bottom right;
background-repeat:repeat-x, no-repeat, no-repeat;
background-attachment: fixed;
}

Easy concept. I used the original backbground property and used the new rgba() value for the background. Next I used the background-image property for the images, all separated by commas, don’t forget that. Next I declared the background-position and background-repeat the same way. The background-attachment is for fun.

Now since I’m really lazy and I don’t feel like creating my own swirls in illustrator, I used some wonderful free online brushes. Also, I had a lot of trouble making this work in short-hand (ie. background: url(gradient.png) top left repeat-x, url(swirl1.png) top left no-repeat, and so on). Unfortunately, it only works with Webkit (ie Safari and Chrome) and I haven’t been able to make it work on Firefox. It should work in coming Firefox releases. Check out my testing site for a live example.

Here’s what it should look like:

It looks pretty nice, doesn’t it? I like it. I’ll probably employ it in some future websites too.

This concerns the box theory and adds to the complications of it. This also concerns the background-position property that I used in the previous example. CSS3 Info has a great article that shows all of the different results you can get with clip and origin properties. It’s useful, but not the best. I’ll be using the following image to indicate all the different background origins:

The different values you can use are border-box, padding-box, and content-box. While using this property add the “-moz-” and “-webkit-” prefixes to the properties. Once again, I’m having trouble making it work in firefox. It might work for you, but it didn’t work for me. Here’s the CSS I used:

background: url(swirl3.png) no-repeat bottom right;
background-origin: padding-box;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;

Of course, I used different positions for different divs. I added some extra borders and padding for effect but go ahead and check out my example site. If it doesn’t work, here’s a screenshot:

Here’s the rundown of the properties:

1. border-box
2. padding-box
3. content-box

As you can see, border-box puts the background image into the border, padding-box sits right outside the border (or at the end of the padding), content-box puts the background inside the content area.

Let’s look at background-clip which has two different values, border and padding. Using border will enable the background to be visible ABOVE the border area. Padding box does the same except the background will be visible above the padding area and not the border area.

I’ll use the following swirl to show you how this works:

The first example with the green swirl used the padding while the next one will use the border value. You won’t see much difference in most of the swirls (ie between the green and the red) but when you look on the bottom left red swirl, you will notice that part of the swirl is visible in the dashed border. That is basically all the difference you will see between the border and padding values. Here’s a close-up picture:

Here’s the green swirl:

Once again though, this feature fails in Mozilla. Here’s the CSS for the last DIV on the page (where the advertisement is):

background: url(swirl4.png) no-repeat top right;
 -webkit-background-origin: content-box;
 -moz-background-origin: content-box;
 -moz-background-clip: border;
 -webkit-background-clip: border;
background-clip: border;

Here’s the final website:

Okay, I’ve noticed some REALLY cool stuff on CSS3 online, so I thought to myself, how about I make my own experiment and teach you all about how to use this stuff?

Here are a couple of resources I’m using to learn about CSS3:

• CSS3 Info
• CSS3 Validator
• Intro to CSS3
• W3 Avenue
• Net Tuts Plus tutorial

I’ll start with the topic that everyone is concerned about. BORDERS! Okay, why are borders so important? Well, In the Web 2.0 design standard, it’s all about opacity, rounded corners, shadows, and everything else that’s just super awesome looking. I’ve already explained the rounded corners and opacity previously. So, I’ll skip that part. If you’re this far, you should probably learn the basics about CSS standards of borders and the markup.

Border Color

Okay, perhaps not necessarily “border color” but rather “border gradient” because that’s all border color is going to be used for in the future .
It’s currently supported solely by Mozilla Firefox, which is rather unfortunate for all you IE, Chrome, and Safari users.
What does it do? The property is “-moz-border-*side*-colors: value“, the sides are “top, bottom, left, right”. Well, the usual. The problem here is that you have to set up each side. There is no short hand as far as I’m aware (I’ve already tried a few variations but nothing worked).
Here’s what you have to do:

border: 4px solid;
	-moz-border-top-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-bottom-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-left-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-right-colors: #000099 #0033CC #0066CC #0099CC;

You’ll have to set up the border separately, set the pixel size according to how thick you want the border to be. It’s usually safe to set the pixel width to the number of colors used. Four for each gradient color (#000099 through #0099CC). If you set the width of the border to be thicker than 4px, the last color in the set will be repeated (#0099CC).
If you view my example, you’ll notice how differently each border looks with different widths (3px 7px 10px and 4px in a clockwise manner starting with the top). If you can’t see it, here’s a screenshot:

Screenshot of CSS3 example

That’s it for the border-color

Border Image

Border image is another border property that shows a lot of promise. Basically, it’s a property that allows you to use custom specific images that will go around a specific area. Instead of just using lines (or gradients described above), we can insert images for the border. It’s a really tricky property and there is no real documentation anywhere that explains it thoroughly.
Here’s the property “-*browser*-border-image:” for *browser*, you’ll have to use both “webkit” and “moz”, and even “o” (for opera) and “khtml” (konqueror). “border-image” is a shortcut for “-*browser*-border-*side*-image-”, and *side* works the same way as before.
The second part of our little CSS3 definition is the “value” which is in this order: “url(image.png) slicewidth stretch”, you also have to use the “border-width” property.

#borderedcontent {
 border-width: 10px;
-webkit-border-image: url(border.png) 10 stretch;
-moz-border-image: url(border.png) 10 stretch;

}

Again, check out my example.

As far as I can tell, the whole art of doing this is slicing the images right. If you have an image that is 99×99 pixels, such as the one below:

Now, I used a 33 point cutting, so that every 33 points, the images get cut (in all different ways). Once that is done (creating 33 x 33 pixel squares), the second value defines what happens to that little squares. In this case, each square is actually a single dot. I used this image as the second example on my example page. I set the “stretch” property to “stretch round” which made the top and bottom “round” and the sides “stretch” (by sides, I mean the middle row of squares). I know this is pretty confusing and it is even for me, but soon enough, it’ll make sense to you.

The round property scales the “squares” or “slices” of the original image in a way to incorporate the squares in a repeating fashion but so that it only includes WHOLE slices and not parts.

The repeat property does just that, it repeats the element, unscaled and thus results in incomplete repetitions of some slices.

The stretch property does its usual business, it stretches each part to fill the whole area.

The border-width sets the width of the border and in the case of image-border, it helps scale the slices again to fulfill the whole width of the border. You can also set the width to auto which uses the original width of the image slices as width. I used the “auto width” property on my second example (creates a pretty funky image)

Like I said, the trickiest part of the whole process is creating the slices. Oh, and remember that if you want to create ONLY the border images, you’ll have to create a blank middle and slice that out too.

Refer to the W3 Documentation, which, unlike in other cases, actually provides a comprehensive overview of the property. Check out the different examples and see what you can find out.

There’s also another website that deals with slicing and other methods to use border-image here.

And I found a great example on how to use this property.

Here’s my last example:

go back  to my CSS3 testing page and you’ll see a third example on the bottom. Here, I used the “stretch” property in combination with the right slicing. Here’s how I sliced up the image:

sliced image

And it worked! Somewhat. My border had to be about 30 px which really distorted the image. Oh, also, the slicing length is measure from the edge toward the center. ie, 40px from the right etc. Again, here are the screenshots:

Border examples

Box Shadow

Box Shadow is the last border-like property. I guess we could classify it under backgrounds as well but I’m including it here anyways. The property is EXACTLY like the text-shadow property described in an earlier tutorial except now, it involves a whole area.

Let’s look at the property a bit closer:

h1 {

box-shadow: x-offset y-offset blur color;

}

h1 {
box-shadow: 2px 1px 3px #000;
}

Once again, you’ll have to add the “-*browser*-” part to the property again because it’s not a “standard” property yet. So again -moz-box-shadow and -webkit-box-shadow. In the example, you don’t necessarily have to include the color of the shadow, the default will be black.  If you look at my example, you’ll see that it’s a pretty nice property For all of you who can’t view it, here’s the screenshot (*note the original example uses a green shadow):

Box Shadow

One thing you can do in mozilla firefox, and nowhere else, is an inner shadow by adding inset to your property value:

div {
-moz-box-shadow: inset 1px 3px 2px;
}

That results in the second example on my example page.

Inner Box Shadow

Conclusion

CSS3 is still in works, and as you might have noticed, many of these properties require the “-*browser*-” add-on at the beginning. Once CSS3 becomes a standard, we’ll be able to use all of these freely. Also, I regret to inform you that IE does not have any quick work around yet but apparently the new IE9 should work with CSS3 properties…finally.

I hope you enjoyed my tutorial and I can’t wait to show you some more CSS3 stuff!

Remember that trick to show a sub-menu using CSS in my older tutorial? Well, I had an idea for a project of mine, and with a little help from my dear friend Raphael. Last night, I launched my little website project called “A Night Story” and made some tweaks. Ignore the story, it’s just a concept. If you hover over the word “city” in the text, you’ll see another textbox appear with more information about the word.

The whole concept of the website is to create a story, a swift, easy-to-read story that contains more information than it seems.

Hover effect

So, let me teach you how to create such a hover effect on any word in the text, and on an unlimited amount of words without much work

The HTML

First, we have to create an ideal HTML situation that will be easy to describe with CSS later on. First, pick the word, in my case “city” and then the text.

We’ll have to put the whole thing within a “span” and then create another “span” for the hover text like this:

<span><a href="terms/city.html">city</a><span>the city was large, and dark. People droned on and walked aimlessly through the streets every day. The smog filtered through their lungs. No one could escape the industrialization that overtook and destroyed the greenery that had once been there, the darkness shrouded my moves. </span></span>

If you don’t want to use the <a> tag, then use another tag that you can use as an “anchor”, ie so the browser knows its special, a good one to use could be the tag <b>, which will let people know that the bold text is important and hoverable. Otherwise, you can create ids for all these spans and that’s just too much work. You can try different variations of this formula and see how it works. This is what I did, and it worked out well

The CSS

Let’s focus on the CSS. One thing, I want to do is change the word “city” so that it does not appear…like such a link. Let me show you how I customized the link so that it appears the way it does:

a {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
}

a:link, a:visited
{
color: #0000CC;
text-decoration: none;
}

a:hover
{
background-color: #369;
color: #fff;
}

That creates a nice effect. The underline is gone, the tag has no special padding or a margin. I’ve also took the the liberty to make its background match the rest of the div (not necessary). Next I changed it so that the color does not change once clicked, but the color of the word will still be different than white. Once hovered, the word will change color and background as shown on my test page.

Let’s get down to disappearing! Believe it or not, this is so easy, you’ll be asking yourself why you hadn’t thought of it:

span>span{
display: none;
position: absolute;
width: 300px;
}
span:hover>span {
display: block;
padding: 5px;
background-color: white;
border: 1px solid black;
}

First, I used a strange class: span>span means, the span within another span will follow these properties. The text will not display, the position is absolute (so that it will cover other text once hovered over), and the width is nice 300px. You can change the width attribute, and mess around with the position if you wish to. I probably will in the final version.

Next, span:hover>span is a pseudo weird class. The span:hover class basically is a class that takes effect only when you mouse over the original span. By adding >span, we’ve created something genius. This class is a class that works only once the original span is moused over. Now, we’re using the display:block property to display the nice block of text. I used some padding and added a background color so that the other text won’t interfere. The border is there only for neatness.

And that’s it! With just these few steps you’ve created something that people use javascript for!

Pros:

The pros of using CSS:

1. It is really easy to change the effects
2. You don’t have to learn javascript
3. It works even if the user has javascript disabled
4. It is faster than javascript because it requires no calculation or parsing

Cons:

The Cons of using CSS for this particular effect:

1. less maneuverability
2. less special effects
3. looks too simple for some websites

With some experimenting and patience, you can create really beautiful drop-down textboxes with custom backgrounds. Well, the possibilities are endless!

Again, go check out my testing site for a demo!

Alright, alright. So I skipped all that fuss with horizontal navbars but that stuff is easy so I’ll create a short article on it later.

Let’s start with the <div> tag. It’s what I’ll be covering. Making use of div’s with CSS. You’ll need to know the following before we start the lesson:

• CSS Lesson 2
• CSS Lesson 3
• as well as basic HTML knowledge

If you don’t how to add CSS to your website, check out my CSS Intro tutorial and CSS Lesson 1.

What are “divs”?

A div is basically a section, a chunk of HTML that you can apply the same CSS to. It works similarly to <span> but on larger areas and more complicated HTML. Also, it supports nesting.

A single DIVision can be used, for example, to make a header, another for the navbar. Divs are usually defined using the CSS properties: margin, padding, border, height, width, and float.

So what can you do with Divs? Well, that’s the best part. Using divs, you can create multi column websites, you can make the website aligned in the center, instead to the side. You can create rules for large chunks of stuff including text and pictures.

Divs largely replaced the use of tables for page layout, which is great.

Recognizing Divs

Now, let’s look at how divs should be structured, I’ll be re-making a template I did in PSD a while ago, you can find in Exan’s Corner.

Template

Right as I’m looking at it, I can already distinguish four different sections in the template. The first is the header that contains the words “A Chiropractic Group”. The second section is the nav bar and the third is the content on the right. The fourth would be the footer. But when you’re thinking of divs, you have to think differently. This page will contain at least five different divs, if that. I’d probably cut it up to six or seven different ones. Why? Well let me show you.

NOTE: These are only examples, I am not actually recreating the template above.

Div illustration

Way too confusing, eh? Haha, there are just so many sections. Let me break it down for you and explain why it is this way. Also note that I did not add the “footer” div which would be number 7 on the bottom. It works the same way as the top div.

1. Header – Just a standard div that you’ll put at the beginning of your <div> tag. It will always be on top unless you set another div for absolute position. First thing you want to do while setting this division up is giving it an id or a class like this: <div id=”header”> </div>.  Great thing about divs is that you don’t NEED to put anything in there so let’s set up the rest of the properties.  Second step is to set up the width and height using CSS:

<div id="header"></div>
#header {
width: 100%;
height: 150px;
margin: 0;
background: url(header.png) repeat-x;
}

This is basically how we set up all of the divs. Using the “repeat-x”, we don’t need to slice large portions of the header (thus adding to the size of the images needed to be downloaded) and we create a continuous header that will show up the same on all web-browsers/monitors. You’ll need to separately define the classes and ids for the logo as well as the text inside the header to match the PSD template, you might also have to create another separate div for the logo and one for the text, just in case.

2. Wrapper – I’m sure you’ve encountered that term before. Whenever you need two or more divs to show up next to each other, you need to “wrap” them in another div. In this case, it’ll be the content area, the content footer, and the sidebar that will be wrapped together. With the wrapper, we can also set it up so that the content shows up in the middle using the property “margin: 0 auto;” which will automatically center the content. Here, though, we just need to set up the background and the width of the wrapper using CSS. Once again, assign a class or an id to the div.

<div id="wrapper">
<div id="sidebar"></div>
<div id="contentwrap></div>
</div>
#wrapper {
width: 900px;
height: 1000px;
}

It is also possible to set the height to “auto” but if we’re to do that, let’s do that as the last thing in the process.

3. Sidebar – As you can see, I created a div for the sidebar. Now, if you wanted to create a dynamic sidebar, ie one that changes, and you wish to still use the rounded corners, you will need to include three more divs in the sidebar division. This way, the sidebar itself will serve as another wrapper inside a wrapper.

Sidebar div

You’d have the top div where you would use the first five or six pixels to create the corners, the bottom div for the same purpose. Also, use only PNG because JPEG does not support transparency. The middle would use a repeating background again. Here’s how you’d set it up:

<div id="sidebar">
<div id="sidebartop"></div>
<div id="sidebarmiddle"></div>
<div id="sidebarbottom"></div>
<div class="clear"></div>
</div>

#sidebar {
height: 600px;
width: 200px;
float: left;
}
#sidebartop{
height: 10px;
background: url(topside.png) no-repeat;
width: auto;
}
#sidebarmiddle {
height: auto;
background: url(sidebar.png) repeat-y;
width: auto;
}
#sidebarbottom {
height: 10px;
background: url(bottomside.png) no-repeat;
width: auto;
}

Now you’ve set up the sidebar. Do you get the idea yet? All you do with divs is set up portions of the page. The problem with this is that the sidebar height will be based on the content inside. For template-making purposes, set the height and change the CSS afterward if needed.

TIP: Create a special class called “clear” with these attributes: .clear { clear: both; height: 1px; } and add it at the end of every div that has the property “float”

4. Content Wrap: Here’s another tricky part. You see how the content has two different sections? One above with articles and one below with a pseudo footer? They’re aligned together so that means, we need another wrapper. This one will how 5. Content and 6. Pseudo-footer. The set up is easy.

<div id="contentwrap">
<div id="content"></div>
<div id="psfooter"></div>
<div class="clear"></div>
</div>

#contentwrap {
width: 700px;
height: auto;
float:left;
}
#content {
width: 698px;
height: auto;
}
#psfooter {
width: 698px;
height: auto;
}

7. The Footer – This is the easiest part and probably the most common on all websites.

<div id="footer"></div>

#footer {
height: 20px;
width: auto;
margin: 0 auto;
text-align: center;
}

That’s it! This is how you create a website out of a PSD template, basically. And this is how you use divs. It’s all about setting up the height, width, padding, margins. Really, there is no magic to it.

Altogether, here’s the basic layout in divs:

<body>
<div id="header"></div>

<div id="wrapper">

 <div id="sidebar">
  <div id="sidebartop"></div>
  <div id="sidebarmiddle"></div>
  <div id="sidebarbottom"></div>
  <div class="clear"></div>
 </div>

 <div id="contentwrap">
  <div id="content"></div>
  <div id="psfooter"></div>
  <div class="clear"></div>
 </div>

</div>

<div id="footer"></div>

</body>

Using the CSS, you can define the rest of the properties as shown at the beginning (ie. width, height, float, margins, background, border etc).

In my next tutorial, I’ll be covering the correct way to slice a PSD template for HTML/CSS use. Remember to use the same measurements in photoshop as in CSS and HTML!

Overview

A <div> or division, is a section of a webpage that shares the same properties. They’re easily recognizable, there is a div for a sidebar, for the content, the header, and the footer.

If you want multiple divs next to each other, create a “wrapper” div that will group the multiple divs together. Next, make the divs “float:left” to ensure they’ll be next to each other. After every “float”ing div, employ the “clear” div with the properties “clear:both; height: 1px”.

If you want to have rounded corners on your webpage and still retain a variable height of the division, create three separate divs nested in the original. One for the top, one for the middle, and one for the bottom. The top and bottom will contain the part of the background with the rounded corners. USE PNG!

<div>s may look confusing at first but once you start working with them, you’ll appreciate the options they provide you with.

See you next time!

• CSS Vertical Navigation

  • The List
  • The CSS
  • Sub-Menu

Finally! Let’s check out vertical navigation. This tutorial will cover different tips and tricks on creating the vertical navigation bar. You can read my article on Color Theory and about Color Scheme Designer for more info on picking colors for your navbar. Most navbars, as I’ve heard, depend on javascript for the more hardcore effects but I’ll show you how to create some dazzling, amazing navbars WITHOUT the knowledge of javascript. Which is great, because I don’t know javascript at all.

The List

First we need to set up the navigation using lists and divs with unique id’s we’ll use in the CSS part. This is what it should look like:

<div id=”navdiv”>
<ul id=”navlist”>
<li><a href=”link1.html”>link one</a></li>
<li><a href=”link2.html”>link two</a></li>
<li><a href=”link3.html”>link three</a></li>
</ul>
</div>

Here we set up a container “div” to which you can apply numerous properties. But anyways, we have a nice list set up. Here’s what the same navbar would look like if you wanted a sub-menu to appear:

<div id=”navcontainer”>
<ul id=”navlist”>
<li><a href=”link1.html”>link one</a>

<ul id=”subnavlist”><li><a href=”link1a.html”>link one a</a></li>

<li><a href=”link1b.html”>link one b</a></li>

</ul>

</li>
…..
</ul>
</div>

The whole process can be done without id’s but if you want to implement this in your website, it may cause some confusion.

The CSS

#navdiv {

160px;

}

Result so far:

List

Let’s talk about the navlist and set up the appropriate margins then:

#navlist {

margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;

}

Result so far:

List 2

I’ve just basically reset some of the margin and padding values used as a default (it’s always good to include a general reset sheet at the beginning of the CSS file). I’ve also removed the bullet points from the side so that it’s an unordered list without any markings. I’ve set up the font-family (again, a reset) and put a border around our navigation.

Next, we’ll set up a couple values for the “a” element, that is all the hyperlinks involved will follow the style:

#navlist a
{
display: block;
padding: 3px;
background-color: #FFFFFF;
}

Result so far:

List 3

We’ve made it so that not only the WORDS of the hyperlinks will serve as a link but the whole block inside the division will be the hyperlink. It’s a sort of a nice effect. Check the final version to see what I mean.The padding of 3px is essential so that the navbar won’t be clumped together.

Next, we’ll tackle the a:link and a:visited:

#navlist a:link, #navlist a:visited
{
color: #0000CC;
text-decoration: none;
}

Result so far:

List 4

We used these two pseudo classes and look where it’s gotten us. The links are no longer underlined (a success!) and they will also not change color once clicked which, I think, is highly desirable in a navbar. One more effect to go and then we’ll move onto the sub-menu:

#navlist a:hover
{
background-color: #369;
color: #fff;

}

Result so far:

Here’s a nifty effect. When you hover over the link, not only will it show up as a block (defined above) but it will also change color of the background as well as the text. If you delete the sub-menus from the list, you’ll get a nice clean navigation. If you keep the sub-menu items, you’ll get the result above.

Sub-Menu

Sub-menus, yay! Currently, only one sub-menu is supported which sucks but then again, who uses more than one sub-menu? Not me, that’s for sure. Let’s focus though. Here’s initial code concerning sub-menus:

#navlist li>ul{
display: none;
position: absolute;
width: 100px;
margin-top: -1.6em;
margin-left: 157px;

}

Result so far:

List 6

First of all, this is how your navigation bar will look like without sub-menus. Second, this is what it will look like when the sub-menus are not shown.

Ah, so here we go. By using li>ul, we’re only defining lists listed under other lists, now that’s a mouthful. The “display: none” makes the sub-menu invisible for the moment. The position is absolute so when placing this on your website, make sure to change the values accordingly. The only part that will need changing is probably “margin-left”. If you set a different width for the original list, you’ll have to adjust for that. Let’s look at why we need the “margin-top” in the negatives. This is what a simple list looks like:

• one
  • one A
  • one B
• two

See what happened? The nested list has moved down and right. What we want though, is to have the list right NEXT to its parent list item like this:

• one
  • one A
  • one B
• two

The usual value is about -1.4em for margin-top to get the lists lined up but you’ll have to experiment if you added any padding, margins, and such. Like in the list we’re making, I had to adjust by putting -1.6 em. For margin-left, The value here is 40px.

Let’s make the sub-menu appear:

#navlist li:hover>ul {
display: block;
}

And that’s it. We’re finished, this last piece will make the sub-menu appear when the original list is hovered over. There are many ways to re-make this navigation bar to make it prettier but these are the basics. Try experimenting with borders, padding, backgrounds, and such and see what you get.

Final result:

Final List

Here’s the final code:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=’text/css’>
/* NAVIGATION */
#navcontainer {
width: 160px;
padding: 100px;
}

#navlist
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;

}

#navlist a
{
display: block;
padding: 3px;
background-color: #FFFFFF;
}

#navlist a:link, #navlist a:visited
{
color: #0000CC;
text-decoration: none;
}

#navlist a:hover
{
background-color: #369;
color: #fff;

}

#navlist li>ul{
display: none;
position: absolute;
width: 100px;

margin-top: -1.6em;
margin-left: 158px;

}

#navlist li:hover>ul {
display: block;
}

</style>
</head>

<body>
<div id=”navcontainer”><ul id=”navlist”>
<li><a href=”link1.html”>link one</a>
<ul id=”navlist”><li><a href=”link1a.html”>link one A </a></li>
<li><a href=”linkoneb.html”>link one B </a></li>
</ul>
<li><a href=”link2.html”>link two</a></li>
<li><a href=”link3.html”>link three</a></li>
</ul>
</div>
</body>

• Lists

  1. HTML
  2. CSS

Lists are an important part of CSS, they are used to primarily make navbars. I’ll cover some basics with you and how to set up your list. In my NEXT tutorial, I’ll show you how to make VERTICAL navbars. I know, I know, you’re asking, “Why are you splitting it up?” Well, mostly because I’ll have to cover vertical and horizontal navigation separately. There are tips and tricks to both, and although some apply to both, many do not. I’m starting out with lists all alone because it’s easier that way. When you need to review an item in CSS, you can switch between the different lessons and it won’t be all jumbled up.  I’ve found that numerous tutorials online do not explain this area thoroughly enough so I hope it will help you out.

• Lists (HTML)

Lists are important in PHP, and especially to navbars so I plan to spend some time discussing the HTML as well. There are two basic types of lists: an ordered list that starts with the tag <ol> and an unordered list <ul>. The idea is that you enclose a list in these tags and then write out each item with the tags <li> surrounding them. Here is what it should look like:

<ul>

<li>first item</li>

<li>second item</li>

</ul>

• first item
• second item

Substitute <ol> for <ul> and you’ll get a numbered list:

1. first item
2. second item

There are also definition lists but you won’t need to know these to create navbars, at least not with me, but here is how they work. You start out with a <dl> tag to tell the browser you’re making a definition list. Then you list a definition term <dt> followed by the defintion description <dd> like this:

<dl>

<dt>cow</dt>

<dd>an animal</dd>

<dt>dog</dt>

<dd>another animal</dd>

</dl>

cow

an animal

dog

another animal

One more thing, you can embed multiple lists by starting another list inside a list. Let me show you:

<ul>

<li>first item

<ul>

<li>item a</li>

<li>item b</li>

</ul>

</li>

<li>second item</li>

</ul>

• first item
  • item a
  • item b
• second item

And that’s it for the HTML part. Simple, huh? Well remember it. All you need to really remember is how to start an unordered list with <ul> and that each item in the list has to be enclosed within the <li> tag.

• Lists (CSS)

The above was just to make sure you know how to do all of that basic stuff. Let’s move onto the basic CSS when it comes to lists. Now, you may wonder, what basics? Well, to create a navbar, you need to know everything from the previous lessons, especially all that stuff about borders and padding. There are SOME properties only inherent to lists, and that’s what I’ll deal with here.

Let’s start with the unordered list. You see those bullet points on the left of the item? Let’s change them to something else:

ul.circle {list-style-type: circle}

• circle

ul.square {list-style-type: square}

• square

ul.disc {list-style-type: disc}

• disc

ul.none {list-style-type: none}

• none

For the ordered list, you can use the same as above except in the CSS you’d change “ul” to “ol”. You can also use the following:

ol.armenian {list-style-type: armenian}

1. armenian

ol.decimal {list-style-type: decimal}

1. decimal

ol.leadingzero {list-style-type: decimal-leading-zero}

1. decimal-leading-zero

ol.georgian {list-style-type: georgian}

1. georgian

ol.loweralpha {list-style-type: lower-alpha}

1. lower-alpha

ol.upperalpha {list-style-type: upper-alpha}

1. upper-alpha

ol.lowergreek {list-style-type: lower-greek}

1. lower-greek

ol.lowerlatin {list-style-type: lower-latin}

1. lower-latin

ol.upperlatin {list-style-type: upper-latin}

1. upper-latin

ol.lowerroman {list-style-type: lower-roman}

1. lower-roman

ol.upperroman {list-style-type: upper-roman}

1. upper-roman

List-style-position is the next property,  its values are “inside” and “outside”. The default is set to “outside” and it determines the indent of the list. If you want the indent to be counted from the beginning of the text, it’s “outside”. If you want the text to start from the bulletpoint, use inside.

<ul style=”list-style-position: inside”>

• text

<ul style=”list-style-position: outside”>

• text

Let’s say you want an image to replace the bulletpoint, you set up a special “arrow” or whatever to replace it. You can do that using list-style-image and the following formula:

ul { list-style-image: url(‘image.png’) }

Replace image.png with the right address. Unfortunately, this style is not supported by all browsers so I’ll use a little trick mentioned at W3Schools:

ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(‘arrow.png’);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}

All you do there is remove the lis-style-type and added a background image to the <li> tag that will be used as the bullet point. Finally, let’s look at the shorthand:

ul {

list-style: none outside url(arrow.png);

}

The order of properties is: type, position, image.

That’s it for lists! Yeah, nothing exciting, I know but it’s essential to know these things before moving on to navigation bars.

Here’s what we’ll be dealing with in my next tutorial by putting all the previous tutorial information together:

NAvBar picture

Click on the picture and it’ll take you to an example vertical navbar

So, here we are, another CSS lesson. What do I plan to teach you today? Well, a couple of things, in my last Lesson, I discussed padding and borders among other things. Those are all part of what is called the “Box Model.” I’ll finish up discussing that theory with outline and margin. After that, we’ll look at lists and tables, probably in the next tutorial. So here’s what you’ll learn today:

• margin
• outline
• tables

Margin

Margin is the outermost part of the “Box.” It’s right beyond the border and there is nothing beyond it in the model. It works almost just like padding except it’s OUTSIDE of the border and it is always transparent. I hope you read my last article because setting up a margin works the same way as setting up any other part of the box.

margin: 10px

This will create a 10 pixel margin all around your border. If no border is present, then around your content. You can set the margins separately for each side:

margin-left: 10px

margin-right: 5px

margin-bottom: 15px

margin-top: 20px

Read my about padding to learn about the shorthand. I’ll just summarize the above as an example:

margin: 20px 5px 15px 10px

Also, you can set the margin to “auto” which will trigger the browser’s default setting.

Outline

Outline works similar to the border but it is outside of the border and inside of the margin. It’s always a line, but you can adjust the thickness. Actually, it’s JUST like the border. Just look:

outline-color: blue;

outline-style: dotted;

outline-width: thick;

Color is self-explanatory. As for style, you can use “none”, “dotted”, “dashed”, “solid”, “double”, “groove”, “ridge”, “inset”, and “outset”. There is no “hidden”, mind that. If you want to see how each of these look, go to CSS: Lesson 2 article and check the borders. The link is somewhere above for it. For outline-width, you can use “thin”, “medium”, “thick”, or an actual numerical value (10px, 50%, 2em). Here, the difference is, you cannot set these properties for each individual side of the outline. Here is an example:

p.outline {
outline: blue dashed thin

}

Example text

Tables

Let’s move onto tables. Make sure you know the HTML code for tables well. Let’s review anyways. Here’s how you make a simple table with two headers, two rows, and two columns

<table border=”1″>

<caption>My Simple Table</caption>

<tr>

<th> Numbers </th>

<th>Letters </th>

</tr>

<tr>

<td> 1</td>

<td>A </td>

</tr>

<tr>

<td>2</td>

<td>B </td>

</tr>

</table>

My Simple Table

Numbers	Letters
1	A
2	B

Here’s the basic structure, you start the <table>, you can define the <th> which is headings or the <caption>.  Then, first <tr> for row, <td>for the columns. Close the tag after each term, etc. Read up on it, it’s easy stuff.

Let’s move onto the CSS. The first property to look at is table-layout which has two values “fixed”, and “auto”.

Let’s look at the difference:

Fixed table

Numbers	Letters
100000000000000	A
200000000000000	B

Auto table

Numbers	Letters
100000000000000	A
200000000000000	B

I had to add width=”100%” to the table tag to REALLY show you the difference. As you can see, the “auto” makes the table adjust so that it compensates for the difference of content in the table. Here’s a neat property called empty-cells which can make the empty cells either “hide” or “show”. Unfortunately, the default CSS settings in WordPress won’t allow me to show you that. Just try it out in wordpad. Next property is called border-collapse with the values “separate” and “collapse”. Here’s the difference:

Separate

one

two

Collapse

one

two

That was fun, there’s also border-spacing with a numerical value (23px, 3em, etc) wherein you specify how far the borders are. After that, there’s only caption-side which determines where the caption will be. It has two values “top” and “bottom”. Let’s look at a table with a caption on the bottom. WordPress, once again, doesn’t seem to want to show border spacing. I’m not sure why, but that’s alright. I used <table style=”caption-side:bottom; border-spacing: 20xp” border=”1″> , as you can see in the example below, the border-spacing did not work (even when I set the border-collapse to separate):

Caption

one	two	three
four	five	six
seven	eight	nine

Anyways, that’s it again. I hope you enjoyed reading the tutorial. In my next tutorial, we’ll tackle lists, which is a very important part of CSS because using lists, you can create amazing nav bars. I’ll show you all of that.

Also, as per usual, the header of the article:

<table style=”border-collapse: collapse; table-layout: auto; margin: 20px 30px 40px; outline:ridge thin; caption-side:bottom” border=”0″><caption>
<h1 style=”font-size: 50px”>CSS</h1>
</caption>
<tbody>
<tr>
<td width=”100%”>
<h2 style=”font-size: 25px”>Lesson</h2>
</td>
<td width=”100%”>
<h2 style=”font-size: 25px”>3</h2>
</td>
</tr>
</tbody></table>

I also set a 40px top margin on the paragraph below it.

CSS Lesson 2

In lesson 1, I talked about backgrounds and text. Let’s move on, I’ll start out by expanding on the text manipulation with fonts and continue by the introduction of  what I call “general formatting.” General formatting includes the definition of padding, borders, margins, and outlines. At the end of the lesson, you should know how to create the above banner and more

Here’s an overview of what you’ll learn in this lesson:

• Fonts
• Padding
• Border

Fonts

We’ve already learned that there are multiple ways to manipulate the text in your HTML document through CSS. You can add text-decoration, align the text (text-align), change the line-height, word-spacing, and a lot of other stuff. Now let’s look at the font.

The general idea with Fonts is to use CSS to specify a group of fonts you’d like to use in HTML. If the browser does not support the first font, it will fall back on the next available font, and so on. There are three different general groups of fonts. There is “Serif”, “Sans-Serif”, and “Mono-Space”. Serif is the group of fonts with those little lines at the end of characters. Here is how you write it:

p.sans {font-family:Arial, Helvetica, sans-serif}

Sans-serif

p.serif {font-family:”Times New Roman”, Times, serif}

Serif

p.monospace {font-family:”Courier New”, Courier, monospace}

monospace

Let’s continue. When you use fonts that have multiple words, use quotations as shown above. You can mix and match different fonts but try to stick to fonts that look similar. Here are some basic properties:

<p style=”font-size: 1.5em; font-variant: small-caps; font-weight: 200″>

hello

</p>

Font-size is self-explanatory, you can use “pt” for points, “px” for pixels, percent, and “em” which is a CSS unit of measurement, usually equaled to about 16px. It’s a unit of measurement that depends on the browser, the default browser size would be 1em, so if you want one and a half that size you’d use 1.5em. Font-variant only controls if the text has “small caps” or if it’s going to be “normal”. Font-weight specifies the font weight, obviously, or the boldness of the font. You can use values such as “bold, “bolder”, “lighter”, “normal”, and then go by “100″, “200″ etc.

Let’s look at Font-style. Font-style has the values “normal”, “italic”, and “oblique” (don’t use this one).

Finally, let’s look at Font itself, under the property font, you can declare all the different values at once.

body { font: bolder small-caps italic 2.4em/3em Arial, Helvetica, Sans-serif }
This is the modified text

As you can see, you can modify a lot using just the “font” property. There are some additional font values such as “caption”, “icon”, “status-bar”, “small-caption”, “message-box”, and “menu”. All of these modify the font to correspond with the font usage. “Message-box” for example, uses the font that’s used by form/dialog boxes. “Caption” is used by buttons, drop down menus etc.

Padding

For every content area, like a box, there are four different sections. There is the content, the padding, the border, and margin in that order from the middle to the outside of the box. We’ll start with padding first, which is the area directly around the content. It “clears” the area around the content, let’s say text, for the background and under elements.

Let’s try to define some padding:

<p style=”padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; background: black; color: white”>

Padded text

Well that didn’t work out as I planned, it seems as if WordPress has its own formatting that I cannot bypass. Here is a better example you can play around with by W3Schools. Let’s learn the short-hand. To express the above, you could have written it as the following:

<p style=”padding: 10px 10px 15px 15px”>

or

<p style=”padding: 10px 15px”>

You have to express all the values otherwise, your CSS will be interpreted wrongly. Let’s say you have four different values:

a, b, c, and d

where a is the top, b is the right, c is the bottom, and d is the left (clockwise):

padding: a b c d

Let’s say “b” and “d” are equal:

padding: a bd c

“bd” would be a single value. In this example, the following is short-hand: “top”, “left and right”, “bottom”. If you input only two values such as “ac bd” then it’s: “top and bottom”, “left and right”. A single value “abcd” would apply to all padding. Oh and when I say “abcd”, I don’t mean the multiplication but rather that it applies to all values. For example, if a=15px, and so does b, c, and d. You’d have to only write:

padding: 15px

You can use any other lenght-specifying measurements such as em and %.

Border

Let’s look at Borders, the next area around content. We specified the padding already which is affected by the background element of the content area. The border can have its own style and its own background and color.

Let’s start with border-style:

p.bordernone {border-style: none}

p.borderdotted {border-style: dotted}

p.bordersolid {border-style: solid}

p.borderdouble {border-style: double}

p.bordergroove {border-style:groove}

p.borderridge {border-style: ridge}

p.borderinset {border-style: inset}

p.borderoutset {border-style: outset}

p.borderhidden {border-style: hidden}

These are all the borders available for your own use. As you can see, I coded the code so that the code itself is an example. If you want to use the above for your own purposes, look in the source and type in “border-style” into the search bar. You can change the width of the border line with border-width. Which, in addition to normal measurements, also accepts the values “thin”, “medium”, and “thick”. Another property you can define is border-color.

Now, let’s say you want the width, color, AND the style different for each side of the border? Here’s how you do it:

p.complicatedborder {

border-top-style: solid;

border-top-width: 5px;

border-top-color: black;

border-right-style: dotted;

border-right-width: 10px;

border-right-color: white;

etc….

}

I’m not going to write it all out, but you get the idea. Where it says “top” or “right”, substitute it with “bottom” or “left” and you can apply it to the bottom or left sides. It works the same for all of the sides. Here’s the short-hand:

p.lesscomplicatedborder{

border-left: 15px groove blue;

border-bottom: 7px double red;

}

The shorthand is used the following way: “border-(side): width style color;” You can use this method on all sides by declaring “border: width style color” and not including the side tidbit. One last thing, let’s say you need to only define the border styles but are too lazy and will instead resort to shorthand?

p.borderstyles {

border: dotted solid hidden inset;

}

This part works the same as the shorthand for padding. If you have four values they’ll apply to : top right bottom left, respectively. Three values: top right/left bottom. Two values: top/bottom left/right. One value: top/bottom/left/right.
That’s it! In my next tutorial, I’ll address outlines and margins.

As always, here is the code for the header:

<h1 style=”font-size: 30px; font-weight: bolder; text-align: center; padding: 10px; background: grey; color: white; border: thick outset grey; text-shadow:0px 1.4px 3px black”>CSS Lesson 2</h1>

CSS Lesson1

1. Ways to implement CSS
2. CSS in DreamWeaver
3. Backgrounds in CSS
4. Text in CSS

Ways to implement CSS

There are three different ways to use styles:

1. Using an External Style Sheet: You do this by creating a .css file. This file has the lowest priority when it comes to style use UNLESS you reference it in the <head> AFTER you use the internal style sheets. You can reference the file this way: <link href=”style.css” rel=”stylesheet” type=”text/css” />
2. Internal Style Sheet is another method of using styles. This style will only apply to the html document it’s in. It has the second highest priority but only when the external style sheet is referenced before it. This style sheet is in the <head> tag and you can use it by defining styles between these two tags: <style type=”text/css”> </style>
3. In-line Styles are of the highest priority and will override any other styles.  Here’s an example: <p style=”color: #000000″>.

CSS in DreamWeaver

CSS is made unbelievably easy in DreamWeaver. Once you start typing something about a style, let’s say you type <style type=”text/css”> and you type “p { text”, you’ll get a list of properties to choose from:

Once you hit enter, you’ll be presented with another set of options for the value of the property:

You’ve also the option to use the CSS dock on the right. If you can’t see it, go to Window>>CSS Styles and the dock should appear. As you can see, I already have a couple styles defined in my document: <p> and <body>. I’ve selected “p” and you can see that there is one property defined and that is “color” and that color is white.  If you selected the <body> tag, you’d see something similar. You can add properties with the “Add Property” button which will bring up a list of properties and then a list of values as above.

The three buttons on the bottom left will let you change the view of the properties:

1. Category view will show you all the available properties in different categories with values (if any) in the right column

2. Alphabetical view serves to show you the list of available properties in an alphabetical order

3. Set Property view is the view that I have set in the picture.

The bottom right icons are all self-explanatory if you just hover over them. The first let’s you add a style sheet that will show up on top (see that style.css with a plus next to it?), the second button is for a new CSS rule, the third is to edit style and the fourth button erases a style.

Backgrounds in CSS

Let’s get started with some properties. Traditionally, you could use <body bgcolor=”white”> or <body background=”image.jpg”> for the background but you can also use CSS for this and not only that, but you can define a background color or a background image for <h1> tags and for <p> tags:

body { background-image: url(‘link.jpg’)}

p { background-color: white}

Instead of the word “white, color can also be specified using the hex designated value: #FFFFFF or the RGB color: rgb(0,0,0). Here are three more background properties that are quite interesting:

body {

background-position: bottom;

background-repeat: repeat-x;

background-attachment: scroll;

}

The first property can be set for any given position (left, right, top etc) and supports more complicated positions (top left, top right), you can even use pixels (10px 34px) and percent (32% 23%). Repeat can have the following values: repeat-x, repeat-y, repeat, and no-repeat. Repeat-x repeats horizontally while repeat-y repeats vertically. “Repeat” will repeat the image non-stop in every way while “no-repeat” will keep the image from repeating ever. For the last property has two values: fixed or scroll. “Fixed” will keep the background moving as you scroll, ie the image will seem to scroll down with you. “Scroll” will keep the image where it is so that when you’re scrolling down, you’re scrolling down the image as well. It’s hard to explain so let me show you an example, go to my twitter page and try scrolling down. That’s “fixed” attachment.

Text in CSS

There are many properties you can assign to the text in many different ways. Text can be defined under the <body> tag, the <h#> tag (# = 1, 2, 3 etc), the <p> tag, and others. Let’s start with text-alignment. I’ll use the class system which works like this:

p.nameofclass {text-align: justify}

<p class=”nameofclass”> hello </p>

In this example, the class name “nameofclass” can only be used with the <p> tag. The text-align: justify will tell the browser to space out the letters and the words to fill up the entire line, much like in magazines. Other text-align attributes:

p.left {text-align: left}

p.right {text-align: right}

p.center {text-align:center}

You can align the text: left, right, or at the center as well. The class names are not mandatory. Next, let’s do text-decoration.

h1.strikethrough {text-decoration: line-through}

h2.lineabove {text-decoration: overline}

h3.lineunder {text-decoration: underline}

There is also another decoration called “blink” but it’s not supported in Chrome, IE, nor Safari. It makes the text blink in and out of existence.

There are actually a lot of different properties that are text-related. There is “color“, that’s self-explanatory. There is “line-height” which specifies the amount of space between consecutive lines. There is also “direction” with the values of either “ltr” or “rtl” which specifies if the text will go left to right or right to left. You can specify the amount of space between words with “word-spacing” with that comes “letter-spacing” with a similar function but this one defines space between letters.

Here is an interesting text property: text-shadow. Here is what you can define it as:

h2.shadow {text-shadow: 2px 3px 4px white}

h2 example

As you can see, it’s quite a fun property. The values are pretty easy to define. The first “text-shadow” value is the x-coordinate offset, the second value is the y-coordinate offset, the third value is the amount of blur, and the fourth value is the color of the shadow.

You can also make a “text-indent” which will make an indent at the beginning of your paragraph. There is a neat property called “text-transform” which has the values: uppercase, lowercase, and capitalize. Self-explanatory, I think. It’ll make all of your text in uppercase, lower case, or it will capitalize everything in your text (or the specified class or tag). Finally, there is a “white-space” property that has the values: pre and nowrap. “Pre” will wrap your text according to how you have it in your code ie if you put a line break (not <br> but just pressed enter) in your code, it will show it. The default will read the whole paragraph and the browser will word-wrap it once the line reaches a certain limit (the end of the page or of its container). “Nowrap” will defy that wrapping and the text will go on and on in width.

I hope you enjoyed my tutorial, I’ll have more to come soon. Here is a tip: for most properties that require a number value (letter-spacing etc) you can use several methods to define the value. I like to use pixels, but you can usually also use % and other methods.

Oh and here’s the code for the CSS:Lesson1 header above:

<h1 style=”text-align:center; text-shadow: 0px .5px 2px black; color: black; font-size: 26pt; text-decoration:underline; letter-spacing:14px;”>CSS Lesson1</h1>

When I figure out how to make the font less pixelated, I’ll tell you

Thank you for reading!

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!