I’ve noticed some hundred tweets on CSS3, every day. Check out the CSS3 Watcher for random updates. They actually mention really awesome and useful tutorials. So now, let’s look at some basic features that actually work cross-browser (with some tweaks). You can check some of the usage on two version of one of my projects: the alpha, which utilizes rounded corners, and the beta, which utilizes a lot of opacity features.

I’ll show you some fun features as well as ways to get around them.

Rounded Corners

Creating rounded corners has always been a challenge. People have used several methods to accomplish this. One was by creating corner images to over-lap the background and make the square part of the corner transparent. I won’t explain that method, I don’t use it. But let’s look at the CSS3 write up:

border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

The short-hand property works very well here. It’s explained in my CSS Lesson 2. But let’s go over this in detail:

border-radius is the proper property mark-up in CSS3. There are variations to accommodate each corner of the object:

border-top-right-radius:
border-top-left-radius:
border-bottom-right-radius:
border-bottom-left-radius:

There, you can specify the exact curvature of each corner. You can do that in pixels, em, and other such length measurements. The larger the measurement, the more curved the corner will be.
Now, we all know that most browser today do not support pure CSS3 mark-up. There are two specific properties you can use.
For Mozilla, use these:

-moz-border-radius:
-moz-border-topleft:
-moz-border-topright:
-moz-border-bottomleft:
-moz-border-bottomright:

Yay! These work just as well and the same way as the original CSS3 markup.
For Safari and Chrome, use the following properties:

-webkit-border-radius:
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius:

But that’s about it. Unfortunately, none of these apply to Internet Explorer, (as was expected), so when you view my testing sites (links are at the beginning of this article), you won’t see anything different.

Input box

Here’s an input box modified by CSS3. Now to get the input box to look like this is a real problem without CSS but let me show you how you can bypass this CSS method on normal fields of text and html. Let me show you what I mean.

The “Div” Method

template diagram

Here’s a simple template diagram. The code for this would be as following:

<div id="container">
   <div id="topcontent"></div>
   <div id="content">
       <div id="clear"></div>
   </div>
   <div id="rightbar">
       <div id="clear"></div>
   </div>
   <div id="bottomcontent">
   </div>
</div>

Read my intro to divs to understand this structure better. But first, let me show you what I’m up to. Now, we know that most internet browsers these days support .PNG files, right? and .PNG files support transparency, yay! Instead of creating a mega background as I did in the case of one of my websites, we can simply take the top snippet of the background. Let me show you:

background diagram

You simply crop out the bottom and top into separate files. Make them as small as possible (height wise), let’s say ten pixels at most. Save them and insert them into the divs like this:

#topcontent {
height: 10px;
background: url(top.png);
width: 100%;
}

Do the same for the bottom content and you’re done! It’s really this easy and it saves a lot of space. You may have to create another div just for the content and right sidebar, but that all depends on what you’re doing with the site.
I hope that helped! Let’s move on to opacity!

Opacity

Opacity, yay! Or as you could call it, transparency. It’s a great CSS3 feature that I absolutely love because there is so much you can do with it. For me, it’s a great design feature because now, I don’t have to mess with new images. (I’ll show you the image method afterward). So let’s go for it. Here is the basic mark-up:

/* IE */
  filter:alpha(opacity=80);
/* CSS3 standard */
  opacity:0.8;

The CSS3 standard works on all browsers besides IE, which, luckily, has a simple work-around. The CSS3 standard works on the principle where “1″ is completely visible and “0″ is completely invisible. Anything in between is the opacity setting. The IE standard, works the same way except this time “100″ is the full opacity and “0″ is the complete transparency.
Unfortunately, this property has limitations. If used on my standard Div model, on the “container”, then not only will the background have a set transparency, but everything within the container will as well, including text, images, and everything else. I’ve tried to use the “!important” mark-up but that does not work either. Also, when another transparency is set, for example, a transparent “content” div, it will only subtract from the “container” transparency. Thus, when the “container” is set to 80 in IE, and .8 in standard, then the “content” will start with an 80/.8 transparency. So when you set a transparency of 80/.8 to the “content” it will be 80% of the original 80%. I know, confusing, but it makes sense in the end

Image Method

Okay, so let’s say you don’t want to put with this CSS3 crap, or you want only the background to be transparent. The method is simpler than you think. Create a 1 pixel x 1 pixel .PNG image, whatever color you want it, and set the transparency in the image, and save it. Then use this piece of CSS:

#container {
background: url (transparentimage.png) repeat;
}

The image will repeat indefinitely and create a transparent background. If you have an actual picture as a background, set the transparency same way.

So, this was it! I hope you enjoyed my tutorial. Spread the word ^.^

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>

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!