Archive for the ‘CSS Tutorials and Tricks’ Category

Creating A CSS Speech Bubble

You’d be surprised how many things you can do with some relatively simple CSS. Even more surprising are the applications of some of the CSS pseudo classes, in particular :before and :after. These pseudo classes might seem foreign because they aren’t very commonly used, but in reality they are quite simple. They are used to add content (before or after, duh!) the class they are applied to. They essentially inject an element that you can then apply additional CSS to. So the speech bubble example below is created using just a div and both pseudo classes.

“This could be a quotation from a customer or use it in an HTML cartoon you've created.

The possibilities are endless!”

Here’s the HTML:

<div class="bubble">
<p>"This could be a quotation from a customer or use it in an HTML cartoon you've created.<br /><br />The possibilities are endless!"</p>
</div>

The CSS is pretty simple, which is good to go along with a very simple piece of HTML. The :after pseudo class creates the blue point, and the :before class creates a smaller white point that makes the blue just look like an outline. The points are actually made using two thick borders on only two sides of a block element that actually has no width or height. It was hard for me to grasp how borders create a filled element when I first saw this, but if you just play with the border widths, you’ll get the hang of it.

Here’s the CSS:

div.bubble {
  display: block;
  margin: 0 auto 40px auto;
  width: 250px;
  background-color: White;
  border: solid 6px #143463;
  border-radius: 20px;
  text-align: center;
  position: relative;
}
div.bubble p {
  margin: 10px;
  font-size: 11px;
  color: #143463;
}
div.bubble:before, div.bubble:after {
  border-color: White transparent transparent transparent;
  border-style: solid;
  border-width: 20px 0px 0px 40px;
  content: &quot;&quot;;
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  z-index: 5;
  bottom: -20px;
  left: 150px;
}
div.bubble:after {
  border-color: #143463 transparent transparent transparent;
  border-style: solid;
  border-width: 24px 0px 0px 48px;
  content: &quot;&quot;;
  z-index: 4;
  bottom: -30px;
  left: 148px;
}

And that’s it! In my next post, I’ll discuss how to use this speech bubble concept to create a JQuery Tooltip. Any questions? Ask away!

SEO Friendly Two Column Layout

SEO Friendly Two Column LayoutMost website owners, for obvious reasons, want their websites to be highly trafficked. When I build a site for a client, I always make an effort to keep search engine optimization (SEO) in mind so I can help them grow their traffic/clientele/customer base. There are thousands of companies out there claiming they know the secret to landing you at the top of Google search results, but when it comes down to it, there is no one answer… there are a lot. One such item to try for your site is keeping the relevant content of your pages at the top of your HTML code. Sometimes this can be difficult for people working on websites that have a multiple column layout with something like navigation or ads on the left and the main relevant content on the right. Now some might say there are simple solutions to this problem involving using float left and right CSS properties for your respective divs that contain each column, but there are some layouts that require a more sophisticated solution, that is much less prone to break regardless of the actual content.

When implementing this for a website I was working on, I stumbled upon a genius post by Matthew James Taylor who has a series on multi-column liquid layouts that are all cross-browser compatible and SEO friendly in the sense that I speak of above. I adapted it a little bit to account for some specific 10px margins and a specific navigation width of 300px, which you can also adjust. The requirements are quite simple to implement, and here’s how to do it:

The HTML:

<div class="mainWrap">
  <div class="mainSubWrap">
    <div class="mainContentWrap">
      <div class="mainContentSubWrap"><!--All your main content goes in here--></div>
    </div>
    <div class="navContentWrap"><!--Nav content goes in here--></div>
  </div>
</div>

The CSS:

.mainWrap {
  position: relative;
  clear: both;
  float: left;
  width: 100%;
  overflow: hidden;
  margin: 10px 0px;
}
div.mainSubWrap {
  float: left;
  width: 200%;
  position: relative;
  left: 290px;
}
div.mainContentWrap {
  float: right;
  width: 50%;
  position: relative;
  right: 290px;
}
div.mainContentSubWrap {
  margin: 0px 10px 0px 310px;
  position: relative;
  right: 100%;
}
div.navContentWrap {
  float: left;
  width: 290px;
  position: relative;
  right: 290px;
}

Basically you end up using relative positioning to move the navigation box over to the left of the main content box, and visa versa, yielding the main content appearing on the right side of your screen, but appearing first in your code. The benefit to this over a simple float is the ability to assign background colors that you want to fill to the bottom of the screen regardless of whether or not the background colored div is the largest in height. It is also pretty much a sure bet that it won’t break across browsers.

Definitely give it a shot, and if you have any questions, don’t hesitate to ask!

CSS – IE6 Bugs and Hacks: Part Deux

IE6, has for quite some time, been the bane of my existence. It has a deluge of bugs, but it also has some easy fixes for it. Below I have a small list of some of those bugs which don’t have easy and simple solutions but that you should still be aware of.

1. PNG transparency fix link bug:
In my last IE6 bugs and hacks post, I wrote about the common PNG transparency issue. The common javascript fix that is used for this actually causes a problem if you use png images inside of a link. I use this a lot for custom-made rollover buttons (which I implement using a great CSS trick). If a PNG image with transparency is placed inside of an <a> tag with the javascript fix enabled, then IE6 won’t recognize it as a link. Luckily, this actually has a fix! Simply add a "position: relative;" to the image CSS definition and you are good to go!

2. Absence of min-height/min-width:
IE6 does not understand min-height or min-width style definitions for objects. These definitions are often very helpful with dynamic content. There is sadly no fix for this problem. Luckily, this usually won’t cause big problems with your layout. The best you can do is try to avoid the need to use these definitions and you should be fine.

3. :hover only works on a tags with an href
Unfortunately, IE6 decided that the pseudo-class :hover wasn’t useful enough for anything other than links. Obviously, that isn’t always the case. You may want to use it for divs, spans, paragraphs, or any number of other objects. There is no fix for this problem, you’ll just have to live with your hover not working in IE6 and below.

4. Divs won’t maintain a small defined height

This is a really strange one. It seems that if you define a div with a height of anywhere below about 10 pixels, IE6 will force it to 10px (or whatever it magically seems to have selected). This is most likely because it is making room for overflow. There are three fixes that I’ve heard of:

  • Apply a “font-size: 0px;” to the div (which can be a problem if you have copy in the div).
  • Apply a “line-height: 0px;” to the div (which can also be a problem for the same reason above).
  • Apply a “overflow: hidden;” to the div which should remove the overflow problem.

Now that all of that is over, Internet Explorer 8 has just been released post Beta. This couldn’t be more frustrating for me seeing as right now there are 3 active version of IE out there. Last time I checked IE has about 50% of the browser market, and within that, IE6 had about 20%, IE7 about 70%, and IE8 the remaining 10%. Slowly this will all shift, but it’ll be at least another year before I’d even consider not testing in IE6 anymore. Sadly that means for at least a year I’ll be testing three frickin versions of Internet Explorer. FRICK! Good luck to you all :).

CSS: Problems with Float

The float property in CSS is a blessing if you ask me. I use it almost exclusively for layout, with occasional tables or absolute/relative positioning. The float property leaves your layout incredibly fluid so that you can change it very easily. However, there are some difficulties that are easy to run into when using the float property.

What float essentially does is force block level elements to not actually take up space in the document. Only floating elements will move around other floating elements, but you might find that sometimes your elements overlap or float around another when you just don’t want it. This happens very commonly when you define the height of an object such as a div, and float elements inside of it which actually will exceed the height of that div. Some browsers will not expand the containing div automatically. Other times, you might have a div floating left, and another immediately after that, but you don’t want them next to each other horizontally. For all of these problems, there is one simple and easy solution:

The “clear: both” property: Think of the clear property as a horizontal line that forces everything written after it in markup to appear below it (within the containing div). The most common implementation I’ve ever seen is a div solely created to contain this property. I’ve seen this all over the web, and I use it all the time, without any hesitation. Make a CSS declaration like this:

div.clear{
   clear: both;
}

And the HTML:

<div class="clear"></div>

Putting this div below another other set of divs will essentially create a forced break between everything written above it in the HTML, and everything written below it. This is limited to the containing div though. I personally can only think of a single situation when you wouldn’t want it limited to the containing div (if you wanted to force a two column layout to be the same height, but you just can’t do that). So yeah, stick to this… you won’t regret it!

CSS Positioning and Layout

CSS has two primary benefits. One is the ability to easily edit the look and feel (the theme if you will) of your website by changing very little code. This is evidenced by a quick visit to the CSS Zen Garden which has the same HTML code, but uses different style sheets to make it all look completely different. The second is positioning and layout which allows to easy move different pieces on a page because it doesn’t ascribe to the rigidity of tables.

However, CSS layout can get a little confusing when you are just starting out. So this article will discuss the different attributes you can assign to tag objects and when each of them is appropriate.

Position:
The position property has 4 possible values of static, absolute, relative, and fixed. Static is essentially the default that lets an element just fall wherever it falls. You’ll only find yourself defining an element as have a static position if you need to correct for a previous assignment of something else other than static. The fixed value will put an element at an exact location within the browser regardless of scrolling or screen size. The fixed value is always used in conjunction with the top, right, bottom, and left properties which will be discussed after positioning.

The remaining two properties are the more common definitions, and are also always used in conjunction with the top, right, bottom, and left properties. Absolute positioning is used when you want an element to exist at an “absolute” location within the page. The only difference between absolute and fixed is that fixed ignores scrolling, whereas absolute does not. So if I wanted the logo of the website I’m designing to always be located exactly 10 pixels from the top of the window, and 30 pixels from the left (and if I scrolled down the page it would go out of view), then I’d use the following CSS:

img#logo{
   position: absolute;
   top: 10px;
   left: 30px;
}

I personally think that absolute positioning is a bad idea because it leaves you with something almost as rigid as a table. To move something around you have to constantly adjust pixel positions, and use z-index in case objects overlap. This can sometimes be useful so you don’t have to layer things using background images with multiple divs, but in general, I personally choose to avoid it. Then there is the relative value. Relative positioning is exactly what it sounds like, it positions an element relative to where it should be located. So if an element naturally falls at a certain location, and you give it a “top: 10px;” and “right: 30px;” then it will appear 10 pixels further down, and 30 pixels left of that certain location. This is also occassionally useful, but I personally prefer another option… floating. This I’ll discuss soon.

Top, Right, Bottom, Left:
These four properties are used when a position of fixed, absolute, or relative has been assigned to the same element (such as a div or an img). These positions can be set using pixels or any other length measurement that CSS accepts, as well as %. They can also have negative values which is helpful to push things around when you need to. Again, I however personally prefer floating my elements.

Float:
If you ask me, the float property is the absolute best characteristic of CSS, and it blows position out of the water. Why do I love it so much? Well, I’ll admit that it can be finicky, but once you get used to how it works, it is absolutely fantastic for building very fluid designs that you can easily change. Float only has three options, left, right, or none. None is the default value. If you add a “float: left;” to your definition then that element will move as far to the left as it can, meaning within its own parent element. Giving is a “float: right;” will do the same thing but obviously to the right instead. Check out the example below of two divs, one floating left, and one floating right:

The HTML:

<div style="float: left; width: 150px; border: solid 3px #444444; padding: 5px;">
  This div will float left
</div>
<div style="float: right; width: 150px; border: solid 3px #444444; padding: 5px;">
  This div will float right
</div>

And the outcome:

This div will float left
This div will float right

So now that you see how the float works, you might be able to see why it can be so helpful. Imagine just having to change two words in your CSS file, and those two divs would switch locations. Now the reason it can get finicky is because of space issues. An element will float within its parent element as high up as it possibly can. So that means if I increased the width of those sample divs to more than half the allotted space, then the second div would be forced below the first (but still on the right side). You can apply float to a whole lot of elements, but primarily you’ll probably be using it with div, img, and p.

More notably, float is used to make text wrap around other elements such as an image. This is incredibly common and incredibly useful. Just apply a float to the image right before the paragraph and the paragraph text will wrap around it. You’ll probably also want to apply a margin so that the text doesn’t touch the image though.

Well, good luck with your positioning escapades. Let me know if you have any problems.

CSS – Sticky Footer

Sticky Footer ExplanationAlmost all websites out there have what is called a footer, or a block at the bottom of the page with quick links. For example, my website has a footer at the bottom of the page if you scroll down with links to major sections of my site. When I was looking into implementing this on my site, I ran into some problems. On some pages, the content didn’t fill the whole screen (which also varies with different screen resolutions, so the footer would be in the middle of the screen. Obviously, on pages where the content went past the bottom of the screen, this wouldn’t be a problem because the footer would be pushed to the bottom. So clearly, I needed a footer that would “stick” to the bottom of the screen if the content wouldn’t push it, but if there was enough content, then it would be below the screen bottom. I searched and searched for solutions, and I found one which I adapted just a little bit into my own implementation (in thanks, here is a link to his site, ryanfait.com.

Ryan’s solution was fantastic. However, I did still have some problems with it, probably because of my wrapper div that I used to center my content. So below, I have implemented my fix which I have tested in Firefox 2 and 3, Internet Explorer 6 and 7, Safari, Opera, and Chrome. The footer sticks to the bottom of the screen when content doesn’t push it that far, but goes to the bottom of the page when content goes below the fold. Below is the CSS and HTML for the footer with a wrapper as well. The sticky footer combined with a wrapper allow you to account for pretty much any screen resolution) too, which is fantastic! However, there is just one downside to this sticky footer, you absolutely MUST know the height of your footer. Luckily, there are not many cases where you’d be putting dynamic content into your footer.

First, the CSS:

html{
   height: 100%;
}
body{
   height: 100%;
}
div.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   /*The -100px mentioned above needs to be the exact height of the footer.*/
}
div.footer{
   height: 100px;
   clear: both;
   position: relative;
}
div.nudge{
   height: 100px;
   clear: both;
}

And now the HTML:

<html>
  <body>
    <div class="wrapper">
      Your main content goes in here
      <div class="nudge"></div>
      <!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
    </div>
    <div class="footer">
      Your footer content goes in here
    </div>
  </body>
</html>

To see a working example of this footer, obviously you can look on this page (because I have one implemented here), or you can check out this example page that I made.

So yeah, it works pretty simply, though I must stress that every line of that CSS is important. You must declare a 100% height for the two parent elements of html and body (and if you have any other tags between those and the wrapper div, then you need a 100% on that as well). This forces the browser to use the whole screen. The three separate height declarations for the wrapper div are each individually important, including the !important addition. "!important" is a statement which makes that lines declaration take precedence over declarations that come after it. This however does not apply in IE, but that’s okay, because we want it that way for this Sticky Footer. Then most important is how the margins work. By putting a negative margin of the footer’s height on the wrapper, we allow whatever comes after the wrapper to overlap with it. The nudge div creates empty space inside the main wrapper so that when the footer overlaps exactly with the wrapper, nothing is blocked out. If you theoretically wanted a margin between the wrapper and the footer then make your negative margin on the wrapper 100px, your footer div would be 70, and give the footer a 30px margin on top. The nudge div would also still be 100px again to make space for the footer and its margin.

As a last suggestion, I usually put another div inside the wrapper div and the footer div, give them both a width of 990px and make them float left. The float with the full width will make sure that nothing (such as padding or a margin) manages to creep outside the edge of the wrapper or footer div. This is a safety precaution, but one that I highly suggest. If you notice a problem when you try to implement the sticky footer, this is the first thing that I would suggest.

Update: A common problem that I’ve seen people run into when implementing this sticky footer is having trouble making your wrapper div take up a defined amount of space in the browser’s eyes. Floating (as discussed above), or the CSS display property help the browser know how big a div physically is. If the browser can’t figure that out, then the footer won’t align to the bottom correctly. Either add a float to a div immediately inside the wrapper, or add "display: inline-block;" as a style definition to the wrapper div.

Got any questions? Need help troubleshooting? Critiques are welcomed too! Post a comment.

CSS – IE6 Bugs and Hacks

In a few previous posts, I’ve mentioned the all too scary issue of cross browser compatibility. In particular, Internet Explorer seems to always come up, and even more specifically, Internet Explorer 6 (or IE6). There are dozens of bugs that arise with IE6 because of how the browser reads HTML and CSS. I’ve found the best solution when you encounter a problem with how IE6 renders your code, google it. But, to make things easier for some of you, here is a compilation of some of the most serious problems that I have encountered with IE6, and if their is a good hack or fix for it, I’ll tell you about that too.

1. Padding discrepancy:
IE6 and below calculate the width and height of sizable objects differently than other browsers. This issue is easy to demonstrate with the following example of a div’s css:

div.example{
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

Normally, this div should be rendered as actually having a width and height of 114px (100px defined width + padding-left of 5px + padding-right of 5px + border-left of 2px + border-right of 2px). Though this might seem counter-intuitive, it actually makes sense when you consider wanting to define space for copy or images, but still have padding with a background color (for example). IE6 and below makes the mistake of still defining the width and height of the div as 100 each, meaning the actual usable space inside the padding and border is now down to only 86 pixels.

There are two fixes to this. One is avoid using padding, and use margin instead (which is not included in the same way that padding and border are) when working with objects with defined width or heights. This is what I tend to do, because it doesn’t require using a hack. However, this is not always possible, especially when you are working with divs that have background colors and text inside. So, the best hack I’ve discovered so far is actually the underscore. Yeah, that’s right, _ does wonders when put immediately before a CSS style definition because every browser except IE6 ignores that line. So what you’d want to fix the above problem is the following CSS:

div.example{
   width: 100px;
   _width: 114px;
   height: 100px;
   _height: 114px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

IE6 will read the first width definition, but then correct it with the second, whereas other browsers will simply skip over the second definition, leaving you with uniform renderings for the div!

2. PNG transparency:
To bring you up to speed, PNGs are far superior to GIFs in every way but one: IE6 displays PNGs with transparency incorrectly. Obviously, there are two fixes yet again. One is avoid using PNGs with transparency and use GIFs when transparency is necessary. I personally do not want to do that because the transparency on PNGs is much better than GIFs (GIF transparency can look rasterized in comparison). The other solution is some handy dandy javascript. There are a lot of these out there. You can check out this one or just google “png fix”. The only issue with these fixes is they often cause problems with background positioning for images. Sadly, you’ll have to live with that bug if you want to fix the first bug…

3. Double margin with floated objects:
Let’s say you have a div that you float to the left for positioning. Then you give it a margin on the right and bottom to give it some space before the next object begins. IE6 has a bug where it will actually double the right margin because the object is being floated. This is incredibly annoying and 100% a bug (as opposed to a discrepancy in how the browser will render something). To fix this evil little bug, add a display: inline style definition inside the floating object. That won’t work 100% of the time, so if it doesn’t work, then use an _margin: definition with half the margin that you defined. For example:

div.example{
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   display: inline; /*This will usually do it and is much easier to apply*/
   _margin-right: 5px; /*This ALWAYS works, but is more tedious and technically not valid*/
}

As discussed above, the underscore is only read by IE6 and below but will be ignored by other browsers. This should be used when display: inline will actually mess with your layout, or if for whatever reason it does not work properly.

4. Inability to center divs using auto margins
Centering a div is easy unless you are using IE6. Normally, a div with a defined width and a left and right margin setting of “auto”, will automatically center within it’s parent element. However, IE6 doesn’t like that. To fix it, add a simple “text-align: center;” definition to your html and body tags. This of course will center all of your copy, so add a “text-align: left;” to all of your other tags that might contain copy (p, div, h1, h2, h3, a, etc).

Got other bugs? Got other questions? Got other fixes? Post a comment! Also, check out the second installment of IE6 bugs!

CSS – Controlling Copy aka Text

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. In the last post, Setting Up Your First External CSS File, I discussed generic tags you should define right away in your main CSS file. This time around, for you beginners out there, I’m going to write specifically about all the different options you have for controlling the look of text in your website (or as you should call it, “copy”).

When writing your CSS files, you should always define your standard tags (as discussed in Setting Up Your First External CSS File). Included in that list are your copy tags. Copy tags include anything that can define the style of your copy. Most notably is the <p> tag. You also have <a> for links and <h1>, <h2>, <h3>, et cetera for headers. You also may want to consider defining the generic style for copy in your <body> tag and because of cross browser compatibility issues with Internet Explorer 6, your <div> tags. You see, if you define what you want all your copy to look like in your body tag, say font-size, font-family, color, et cetera, then IE6 will not apply this to your copy if any other tags interfere with it. So when you define your generic tag styles, it would be a safe move to define your copy style in your body, div, and p tag, and if you want to be even safer, your html tag as well!

So here are your options for defining the look of your copy in your CSS file (as always, w3schools is a great source for all of this):

  • font-family: times, georgia, serif;
    you can list one font name, multiple with commas, or a generic name
  • font-size: 14px;
    you can use px, em, %, or a size such as small
  • font-style: normal;
    normal, italic, or oblique
  • font-variant: normal;
    normal or small-caps
  • font-weight: normal;
    normal, bold, or a scale from 100-900
  • color: #444444;
    color name or color hex code preceded by the pound sign
  • line-height: 16px;
    using a pixel size larger than your font-size will yield extra space between lines. This definition is actually a great hack for centering text vertically in a div. If your div is 100 pixels high and you have one line of text in it, set the line-height to 100px!
  • text-align: left;
    left, center, right, or justify

That is really the basics of what you need to know for your copy. You may also include background-color as something, especially if you want white text. But basically, there you have it, the best ways to control your copy!

You know, the best tool I’ve ever found for any web developer, beginner or not, is a firefox add-on called Web Developer. It allows you to do so many things, but right now, I am touting it because it allows you to edit the CSS of ANY website you are looking at! It is a great way to learn the ropes because you see changes instantly and accurately. Try it out! Until then, try to keep your copy clean.

Setting Up Your First External CSS File

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. This time around, I’ll chat about setting up an external CSS file and giving it some basic definitions that you should always include in your main CSS file.

So first, let’s explain how to make an external CSS file. The purpose in doing this is to keep all your CSS in a separate place from your HTML. But why is that important? Well, for one, it will speed up the load time of your page for your users. Probably infinitely more important is that it is much more likely that most of the CSS you write for one of your documents will apply to another one. Why repeat it in the head of every page if you can just write it once? That way, when you need to make changes, it’ll be much easier.

Alright, so here is how you make a reference to an external CSS file. In your head section, put the following line of code:

<link href="main.css" rel="stylesheet" type="text/css" />

You can replace main.css with whatever you want to name your CSS document. Main is a good idea if you plan on having multiple CSS files (for large sites). For smaller sites, you probably only need one (for example, my website, www.davidjrush.com, has only one external CSS file (actually, technically it has two, one for the blog, and one for the rest).

You can make your new CSS file (for now, we’ll just assume you are calling it main.css) in a text writer. Change the file extension from .txt to .css just like you would change .txt to .html for an HTML file. Inside the document, you don’t need any tags, in fact, you shouldn’t have any! All you should write in this document is the style that you would have put in the head (but without the <style> tag).

Now I’ll discuss some basics of what you should have in every main CSS file you ever write for a website. There are somewhere around 80 tags for HTML, but only about 30 of them are commonly used. Of these 30 you should think about defining these basic tags: body, div, img, table, p, ul, a, and a:hover. The reasoning behind this is safety safety safety! Different browsers have different default settings for some of these tags. So the smart move is to give them all uniform settings from the start.

You may want to start your main CSS document with the following:

/*--this is a comment, you can put anything inside the star and slash--*/
body{
   margin: 0px;
   padding: 0px;
}
div{
   margin: 0px;
   padding: 0px;
}
img{
   border: 0px;
   margin: 0px;
   padding: 0px;
}
table{
   margin: 0px;
   padding: 0px;
}
p{
   margin: 15px;
   padding: 0px;
}
ul{
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 35px;
   padding: 0px;
   list-style-image: url('image location');
   line-height: 20px; (gives spacing between list items)
}
a{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
}
a:hover{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}
a:visited{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}

Anything in red is just a comment to help you out. The first several definitions really just look at margin and padding. This is where cross browser compatibility comes into play. For example, Internet Explorer and Firefox have different default settings for margin on p tags. This will cause pages to render differently. It always seems like a safe bet to define your margin and padding for most anything. In an upcoming post, I’ll discuss defining your copy/text (which will include more specific information on p tags, a tags, and other similar issues.

You’ll notice in the links section, there is a definition for an a tag, an a tag being hovered on by the mouse, and an a tag that has been visited by the user. The latter two are called “pseudo-classes”. There are others, and they can be applied to tags other than the a tag, just so you know.

If you have any questions about this starter file, post a comment, or send me an email. Stay tuned for further CSS related posts.

CSS – Back to Basics

So, trying to get into the world of CSS eh? Well trust me, you’ll never regret this decision. CSS, or cascading style sheets, are the absolute best way of laying out your site while still providing an easy ability to completely change the look of your site with little work. So here is the lowdown on CSS:

CSS is a simple addition to any HTML file that you have. HTML tells the browser what to display with tags (<p>, <h1>, <a>, etc.). CSS, tells the browser what that content should look like by describing it with “style”. For a great rundown/tutorial of CSS, try w3 schools… and always, when in doubt, google it!

So let’s just give a basic example HTML file with some very simple CSS. This document shows you the style tag where you can put all of your CSS (this goes in the head tag). There are three ways of identifying what tags in your HTML get what styling, tags, classes, and IDs. Use a tag definition if you want all of one type of tag (such as a p tag) to be the same. Use a class if you’ll be using that same style for multiple items (i.e. if you want all the links in your header to look the same then use a class). Use an ID if you only plan on having one item with that style (a specific link needs to look different to have emphasis so it has different style). So this example is as simple as it gets. It shows you how to define the style of a paragraph tag, then change a group of paragraph tags using a class, and then uses an ID to make a specific instance of that paragraph tag.

The CSS and HTML

<html>
 <head>
  <style type="text/css">
    p {
      font-size: 13px;
      font-weight: bold;
      color: #000000;
    }
    .red {
      color: #A60000;
    }
    #blue {
      color: #1240AB;
    }
  </style>
 </head>
 <body>
  <p>This is a bolded, black, size 13 paragraph</p>
  <p>This is another paragraph with the same style</p>
  <p class="red">This is styled red using a class</p>
  <p class="red">This is another red paragraph</p>
  <p id="blue">This is styled blue using an ID</p>
 </body>
</html>

The Outcome:

This is a bolded, black, size 13 paragraph

This is another paragraph with the same style

This is styled red using a class

This is another red paragraph

This is styled blue using an ID

So you’ll notice in the inside the style tag there are three definitions: one for the p tag, one for any tag with a class of redText, and one for a tag with an ID of blueText. You use a period before the name for a class, and a # before the name for an ID. Don’t mix them up or your browser won’t read them.

Safe CSS practice will encourage you to put a p in front of your .redText or #blueText definitions. This tells the browser that that specific definition for redText and blueText only applies to p tags. Then if you gave a class of redText to a link, it would not follow that styling. Sometimes however, you want to apply the same styling to different types of tags. In that case, it is alright to leave it out. Basically, use your best judgment. If you are working with a huge website, then you will have a lot of CSS, so be specific and purposeful in your naming of classes and IDs (and probably use the tag name before your definition (i.e. use p.redText instead of just .redText). If you are working with a smaller site, then you can be a little more lenient in your CSS naming efforts.

Coming up, external CSS files with a step up in CSS.

Questions? Post a comment!