.someClass {

}

The ID style type always startes with a number sign.

#someID {

}

So, when should I use a class over an ID or an ID over a class? In my opinion IDs are saved for those styles that are more or less for large unchanging items in your site that are at a higher level of importance such as headers, navigational, and footer DIVs. Containing DIVs are are a great place to use IDs also. The IDs act as the sound structure of the CSS, things that you would never want to change, or take great care in changing. Think of them as being part of a frame of a house, the plumbing, or the electrical box. These are things that you do not  want to change if at all possible down the road.

Classes are best suited for content styling that may have to be repeated several times. For example, a paragraphi style would be a good place for a class over an ID. Classes are also great for nesting. Nesting of styles is basically the act of placing a style within a style. Lets say you have a style called Heading1. This style might be a large red header that shows up on the top of pages. You might want to create a heading that is very similar to this style, however has a slightly different color. For example if you wanted to have a heading that was not as prominent yet had the same size and typeface (font). Creating a nested style would let you create a style based on another higher level style without having to write out all of the parameters again.

.heading1 {

font-family: verdana;

Size: 18px;

color: #cc0000;

line-height: 14px;

}

A nested style would look similar to this.

.heading p {

color: #663333;

}

You did not have to replace all of the style, only the color.

So how would you implement this in your code?

<div class="Heading1">Some Heading

<p>A different Colored heading</p>

</div>

Since you have already defined the div as a heading1, anything within the DIV under a paragraph tag will be a different color as stated above.

Anyways, this not only helps to lower the amount of lines in you CSS file, it also helps you create sub styles that are easy to manage.

Templates

The idea of having different classes and IDs that are nested are very helpful in creating templates. You could easily have a main tempalte set up and then several different other template styles that are based on your main template. Whole websites could look completely different if you have several different nested styles set up, based on your original template styles.

For example, let say you create a heading1 and you wanted three different options for users to choose from in your CMS.

.Heading1 {

font-family: Verdana;

font-size: 24px;

color: red;

}

.Heading1 template1

font-family: arial;

font-size: 36px;

color: blue;

}

.Heading1 template2

font-family: Times;

font-size: 36px;

color: Green;

}

You will notice that each of these are pretty different, however they could be the same place within the CSS layout of your template, so when displayed they would look totally different, however have the same structure that would not have to be changed. This is one of the beauties of CSS, the ability to create a style and then have several different options that all based on a higher level.

So, I want to know what YOU think!

Airstream font, free to download and totally retro

Some of the new airstreams area really cool also. They are lightweight, well designed, and easy to pull. With today’s gas prices I would think that people would want aerodynamic trailers to pull all over the country. Anyways, I think you should try this font out for fun. Airstream is free to download. Install it and try it out!

Download Airstream

1. Create a New file in Photoshop that is 20 x 20 pixels wide, RGB.

2. Next, I used the fill tool and fill it with a dark background color.

3.Use the line tool and make a few lines and such. patterns can be tricky, when they repeat you might not get what you expect. You can also create a grid. Make sure the lines are not too contrasting, otherwise the background may look a little busy. This is an easy way to learn how it works with random lines.

4. Once you have finished your pattern, select Edit > Define Pattern

You will be asked to name your pattern.

5. Once you have defined your pattern, all you have to do is apply it to any background. I usually create a back ground for my webpage, however try it with a new file. Create a new file that is 200 x 200 px. For the background layer, make sure to define it as a layer. You can do this by double clicking on it and renaming it. After it is renamed, you need create a layer affect. Do this by selecting Layer > Layer Style > Pattern Overlay.

After selecting Pattern Overlay, you will be prompted to a layer dialog box. Choose the arrow by the pattern and then you will see your pattern in the selectable squares. Select it.

After doing this, your page will have a tile of the pattern you created. This works on any size layer or shape, like a rectangle. Experimenting with patterns is a lot of fun!

As you can see the tiles just repeats itself over an over. There is definitely a science.

Below are 2 few example of cool pattern from Kaliber10000

In this example, we will simply define the height of a div with inline style.

<div class="someDiv" style="height: 400px">

The “style” parameter, will begin the style attribute. After the quote marks, you can use any CSS value here, and as many as you like separated by a semi colon. Below, we will use multiple attributes.

<div style="font-size: 24px; font-weight: bold; color: red;">Some Words You Have Written</div>

As you can see it is very easy to add an inline style, just make sure that you do not make a habit of this, however use it when you need to.

The first type of modal window is what I specifically use to show images. The beauty of a modal window is that you can open an image or a webpage without ever leaving that page or openinig up a pop up window. The modal window can be closed easily by the user and usually it is very light and easy to work with. For the first type of modal window, I would like to promote the Lightbox JS provided by http://huddletogether.com. This is a javascript library, that is open source to the public. It is customizable and works great. I currently use it on my site for some of my images; check out the logo links on the right hand side of this page: http://scottlassiter.com/logos.php. Here you will see that whenever you click on a link it darkens the screen and opens a box the size of your logo or image on the fly. It is very easy to set up and requires intermediate web developing skills to implement.

The second type of modal window I would like to talk about is called “graybox”, you can download it at http://orangoo.com/labs/GreyBox/.  This is a very powerful modal window that provides the ability to open a window to another website. Lets say that you want to promote a certain website, or want to preview a website you have developed or designed. Implement the graybox code on your website and wallah, you can provide a “window” into just about any website. For example, I use this on my website to provide previews of some of the websites that I have developed and designed. Check out “Web Design” on my portfolio page: http://scottlassiter.com/portfolio.php, to see it working in action. Basically, you have to set it so that the window is smaller that the web page you aqre previewing on. In many cases you will have to use the “scroll bars” in the graybox window, however this works great if you just want to show another site as an example and do not necessarily want the user to leave your page, which is key!

Do you have a modal window application that you specifically like or think is easy to work with? Drop a link here or give me a review

The CSS parameter you want to use is called letter-spacing. Yes, it is that simple!

Anyways let begin. Lets say I want to have a caption for my photo that looks cool and well designed. The first photo caption is standard.

Our beautiful lake

Now Check this out!

Our beautiful lake

Doesn’t this look much better?

Anyways, here is the CSS
Take your text and wrap it in a <span> tag. This tag helps you apply a style to the text easily, however this is not the only place to use style. </span>

<span>Our Beautiful Lake</span>

Next add a style and the line spacing (int his example we are using Inline Styling, however the same styleing can be used in an external style sheet):
<span style=”letter-spacing: 5px”>Our Beautiful Lake</span>

The result is:  Our beautiful lake

It’s that easy! Hope this was helpful.

Again, there are many new features that are coming available in CSS3 that will enhance the ability of typographical design without having to create textual images and such. Please return to http://scottlassiter.com/blog in the future to learn more about CSS3 features.

The intention is for you to use the CSS in the header of your document or in a linked Cascading Style Sheet (.css)

First lets start with an image as illustrated below:

I need to crop this image and I want to give it a caption directly on the photograph. For this particular instance I just need to show the front of the vehicle.

First I will start by creating a DIV contain for this:

<div><img src=”http://myserver/mycar.jpg”></div>

Above is a line of code that creates just a simple container. Next we need to create a class for the image for the CSS. You will actually use the class tag within the image tag to call to the CSS. The CSS class beloow will be added to your stylesheet.

.image {
border-width: 1px;
border-color: #ffffff;
border-style: solid;
width:225px;
height:70px;
background-position:50% 95%;
background-repeat:no-repeat;
}

In the CSS code above, I have created an image class with a 1 px border and and an area much small than the image. I have also told the background not to repeat itself.

Above you will see my cropped image with a title at the top in black. To make the image appear you HAVE to put in some kind of text for the image to show.This is what I used for the code:

<div class=”image” style=”background-image:url(http://myserver/mycar.jpg)”><div>Pontiac G6</div></div><br />

Notice that I had to use a little in-line CSS to make the image appear (background-image). This way, you do not have to put the background-image URL in your style sheet, in the case if you want to have several images cropped with a specific size using the .image tag as a reference. Also make sure to have the break behind the last DIV.

Now, how would I make the text in visible in a different position and in a different color? Start by creating a “title” class like we previously created the “image” class.

.title {
font-family: Arial, Gadget, sans-serif;
font-size: 14px;
font-weight: bold;
color:yellow;
position: relative;
top: 25px;
left: 30px;

}

Above you will see that I have positioned the text and have styled it to be a different font, color, and weight. By setting the position to Relative and adjusting the top and left, you can position your text to be anywhere within this DIV container.

Again, this is a case where we created a style with the CSS file so that we could create a “template” of sorts that we could reference again. The other method is to put all of the styling within a “style=” tag within the DIV.