How do I write my css classes with div tags?
Posted by jerothe in 
I am constantly looking for css shorthands when it comes to writing my stylesheets. I tend to try to plan to make my stylesheets formatted with the best logical sense, portability across a site, and in a condensed, concise manner. Because I layout my website in CSS, doesn’t mean I design them any less complex, and that is why I believe that my style sheets push the range of 10-12 kb. The ideal size would actually be somewhere between 7-8 kb. With that in mind, that is why I like techniques like this all the more.
I read about this before, but didn’t really grasp it. To review, the Margin property. There is;
- margin-top
- margin-right
- margin-bottom
- margin-left
Instead of writing out each of these margin properties individually, we can give them a shorthand like so;
margin: 10px 0 0 0;
Notice, I don’t give 0 a measurement because 0 is still 0 no matter what measurement you use. A little shorthand trick. But, each of those measurements
listed goes in the following order; margin: (top) (right) (bottom) (left)
Let’s make our Margin shorthand even smaller.
To rewrite our example above;
margin: 10px 0 0 0;
I can actually condense the (left) and (right) margin because they are the same measurement. Our margin property would now look like this;
margin: 10px 0 0;
What the directly above example says is, margin-top = 10px, margin-left and margin-right = 0, and margin-bottom = 0. That is the order. This shorthand is specifically for instances when you have a different margin-top and margin-bottom property.
Shortcuts for making header tag markup.
Just like bolding text by a simple key shortcut combo, you can also markup your text as a header with a simple keypress.
Here is my header;
Monkeys eat too many bananas from freezer.
Step 1: In Dreamweaver, go to Code View
Step 2: Highlight your text
Step 3: For a header 1 tag press Ctrl + 1. It is the same shortcut all the way up to your header 6 tags. Just press Ctrl, and the number and that is your shortcut for marking up headers in your copy.
Is there a program that will change uppercase letters to lowercase letters?
This was the question that I barely realized that I uttered outloud at work today. I had copied some text off a website that was all in capital letters and in my layout I needed some more space, so I decided to change them to all lowercase except for the first letter.
My co-worker told me that Illustrator could change uppercase letters to lowercase or vice versa. Intrigued, I tried it. It works awesome, and it is so simple. Let’s do it.
Step 1: Open Illustrator, Duh.
Step 2 
aste, or type some text into the program that is in all capitals. (Ctrl + V or Edit > Paste)
Step 3: Click on the bounding box for the text, and go to your menus at the top. For this example of the first letter of the words staying capitalized, choose Type > Change Case > Title Case.
This should give you the result you need. This is a really awesome feature, changing text to sentence format, uppercase, lowercase, or in this case Title Case in just seconds. What a simple trick and a time saver. Thank you Adobe Illustrator.
Why do I want to write class independant of my selectors?
This isn’t a rule you apply to every element, instead it is based on situation. As you get in depth into CSS, it is very useful to have certain classes only able to be applied to certain elements. But for your main block level containers, the containers that hold all your HTML page content from words to images, I prefer to leave them independant for one reason only, testing.
When I am trying to root out a problem, that generally stems back to some clearing issue, I will add my “border” style that I talked about
setting up in last month’s article solely for testing. If you are going through, testing your site, by adding a double class, trying to find the boundaries of the container and how they are acting with a border around it like so;
<div class=”wrapper border”>
You can’t have a double class applied to a selector specific class. Wow. That was a mouthful. Basically, by saying;
div.wrapper
If you apply any other class to that div element, it no longer will be valid and won’t display correctly. This is what I those two styles might look like;
.wrapper{
margin:0 auto;
width:760px;
text-align:center;
}
.border{
border:1px solid #000;
}
When I setup my class above, basically what I am doing is defining my main wrapper class, and telling it, “Hey, also add a border around it
to this specific instance.”
How do I write my css classes with div tags?
This is a general title that I hope will bring users in who are just trying to find information. But more specifically, I wanted to address a style of formatting vs. an advantage in formatting when it comes to writing your CSS website.
Stemming from last month’s entry, since I began learning about the intricate but rewarding in’s and out’s of CSS, I have been researching sites that have use it. As often as I notice that there are many sites that use “ID” selectors to define a class for block level div element, I have also found that this format is used for the class definition in the CSS file;
div#wrapper
or
div.wrapper{}
Ignore the ID for now (the first example), instead what I wanted to argue, was that there is a reason that you would not want to format your styles in this manner;
div.(classname)
This formatting is known as a selector specific class. What this means without the jargon, is that you are only allowed to have this class name, in the above example wrapper, on a div element. In your html page, you would only be able to add that class in this fashion;
<div class=”wrapper”>
You would not be able to add that class to any other structural HTML element and have it work correctly, for example these two wouldn’t work;
<p class=”wrapper”>
<li class=”wrapper”>
I hope that was clear
Sometimes it is hard to explain this at such a rudimentary level, there is so much knowledge you have to assume for one person to even understand this article. But that is why I no longer use selector specific classes on my main block level elements, rather using it where appropriate on a cases by case basis.
How do I write my class so that it isn't selector specific?
Just like any other style. I will assume that you know a little something about this if you are already here and reading this entry. If we got back to our stylesheet, you would retype;
div.wrapper{}
Instead to look like this;
.wrapper{}
This way, you can apply this style to any element you want, including the paragraph(p) and list(li) element tags I used in the above example.
Firefox 1.0.5 came out today
Real quick. Firefox 1.0.5 came out today. Nothing of real note for me, since I am just the “pretty” guy in making things look nice, I don’t have to worry too much in terms of knowing exactly what some of these security flaws are that they keep patching. All that I know, is there is a new release, like a drone, I upgrade, and I am more secure from malicious software or other scamming techniques that could harm me or my computer.
Go to Mozilla’s homepage to download your copy now.
New version of Google Desktop, Search your files at the speed of light.
New an improved, Google Desktop now caches more file types.
Not a new program, Google Desktop came out late last year. Being a geek, I downloaded it and tried it out.
Made by Google, you know that it is a good product, simple, and easy to use with a purpose in mind, to make your life easier. Unlike Windows search, Google Desktop search leads the way in the need to find files quicker and more accurately. With the prices of hard drive space bottoming out, and the costs of bandwidth becoming more affordable, people have more files today than every before. That also means there is that much more to organize and potentially lose.
Slow and clumsy, or at least we know that now that Google Desktop is here, Windows search can search a drive, a folder, whatever you need. But with Gigabytes of files, this could take forever. And you are just trying to figure out if you still have something, just to get an idea, maybe not to search out something specific, and you would like an answer quickly.
Look under the hood to see how the magic works!
This is how Google Desktop works. Like Google online, Google Desktop will cache all of the files on your hard drive for you to search. When you are away, watching the boob toob, Google quietly searches and indexes your whole hard drive worth of files. So, when you type in a file you need, the results pop up instantly! That’s less than one second.
Now, I haven’t had a use for this feature, because I am by nature, very type A about my computer files. I need to access them, and I have a strategy with a good memory that doesn’t often necessitate searching for something. But every once in awhile I do. Tonight I actually tested to see what kind of results I would get for some image files I knew I had of my wife, doing some reference poses for one of my online contests.
Not even needing to be online, I opened a browser, and entered in Google address in the address bar. If online, there is a line entitled “Desktop” that will switch you to a screen that will only search your computer.
I searched for “Sarah Rothe .jpg”. I searched for her name, and I wanted an image file with a .jpg extension. Up popped some 57 pages of results for me to go through.
The pitfall is your own organization
Now although this is a great tool, it does remind you how proper naming and organization is important. It also told me that I don’t clear my cache enough. I got a ton of results from cached webpages, most of them email. It made me go through, rename some files, delete some, and of course, clear my cache in the browser I don’t use as often. (I need it to help me with my memory in other browsers for webpages.)
Conclusion
Google Desktop is something that everyone should try if you have even once lost a file, and can’t even remember what it is called. Google with return results with the path name, with all of the parts searchable. From the folder names, to file names, to even the text in the documents. Desktop previously only cached emails, Microsoft Documents, and web files. Below you will see a more complete list of what types of files will be it’s index, even video, music, and of course, images files.
If I used this more, I would give it a higher rating. For someone who is busy and not organized, this would be a life and time saver.
Coolness Rating
Google Desktop
