Now CSS

Six Design Tools to Make Your Life Easier

Derald — Thu, 11 Jun 2009 13:34:41 +0000

Some times as designers, we don’t think about using tools to make our job easier. Either it is pride, or we are just don’t think about it, but we can benefit from tools. Here are some tools that will make your designer life a lot easier.

Postable

Have you ever had to replace <g; with it’s HTML alternative. You most likely had to go look for the code to make the change, and then have to make the change multiple times in your code. Well with Postable, the nightmare of doing that is over. Postable will take convert all of those “non-HTML” characters into their HTML version.

TypeChart

TypeChart has a list of different styles of fonts, and different attributes applied to those fonts. You can get an idea of how a combination of text and attributes will look at just a glance. This takes the hassle out of guessing what fonts and attributes you want to have in your design.

Em Calculator

Cameron Moll (http://www.cameronmoll.com/archives/001266.html) stated in his presentation entitled “Essential Web Skills” at Webmaster Jam Session that a great designers treats text as part of the UI. Ems can allow designers to use text as a UI element, since that is what the measurement was designed for. Most designers will instead use pixel measurements to control text. This could be from habit, laziness, or because it is just simpler. Em Calculator takes the pain out of converting text from px to em, and does it very easily.

Vertical Rhythm Calculator

Vertical Rhythm Calculator does the same job that Em Calculator does, except it is a desktop based calculator. This calculator is designed to work with Adobe Air.

Grid Designer

Grid Designer gives you the basic CSS to generate an number of columns into a design. The tool even allows you to control other aspects in the design such as the size of headers, and paragraphs.

CSS Optimiser

One of the things that every web developer should think about is how to optimize the code for the sites they are working on. It doesn’t matter if you are working with Java or HTML, optimizing your code can enhance your user’s experience. Before most people got broadband into their house, optimizing code was one of the big issues that developers tried to over come. Even though more people are getting faster internet connections, doesn’t mean developers should get lazy. CSS Optimiser reduces the size of your CSS code to allow it to be transfered quicker, and reduce the code’s footprint on your web server.

How to create rollovers in CSS without JavaScript?

admin — Thu, 07 May 2009 20:44:11 +0000

CSS coding allows developers to write web friendly code for their clients. Its best to stray away from the old methods of HTML with rollover images using JavaScript as that never produces clean optimized code. The old style OnMouseOut and OnMouseOver functions in JavaScript should be discarded in favor of a clean CSS look and feel.

CSS rollovers are quite easy to implement as they use only CSS and your HTML knowledge. Where images are concerned, it’s best to keep in mind that you should only use them for the top-level navigation part of your menus. Use text in CSS for the menu items with CSS powering the rollover effect and you will notice a much faster loading page. So use this tutorial only for the top-level menu bar to compliment a side menu; I can also cover CSS drop-downs in another tutorial.

To avoid pages that are slow to open, CSS does replace JavaScript as the better choice. Using just one image is better than a JavaScript file that preloads images for different states – that slows the page loading time.

Let’s look at a CSS rollover. You can edit it as needed in your web editor. The image for the example can be downloaded here. Note the design, the button is drawn twice. This is due to the CSS code and how it will manage the rollover. The CSS below displaces the image position in order to show the second half of the image as the rollover image. This way, you only need one image for the effect. Ensure that the size of one of the buttons (half the image width) matches the values in the a.mouseover CSS code below.

How to create rollovers in CSS without JavaScript?

/* Note the use of text on the hyperlink in case of a non-CSS compliant page */
Buy Now!

The CSS rollover style button above uses overlay text for the image being used. The tag allows the text to be displayed if CSS is not supported.

Always find a CSS solution and your code will be sharper, cleaner and result in faster loading pages.

Internet Explorer 8: What’s Changed

Derald — Mon, 13 Apr 2009 20:47:27 +0000

It has been close to a month since Microsoft released Internet Explorer 8, and there hasn’t been too much news about the browser. For Microsoft, this could be a good thing if you live by the saying “No news is good news”, but it can also be a bad thing for the large company. A Google search with the key words Internet Explorer 8 comes back with more Microsoft sites, including MSDN, then any other third party site. People at Microsoft may start to worry, since they haven’t been effective in letting the world know the changes they have made to the latest release. One of the really big changes with IE 8, or Microsoft in general, is that they are really starting to comply with standards. Dean Hachamovitch, who is the manager of the IE team, indicated at MIX09 that the IE team is committed to industry standards. In Dec of 2007 everyone got a glimpse of this commitment when Microsoft announced that a beta version of IE 8 passed the Acid 2 test. One of the larger standards that the IE Team is proud of meeting the standards for CSS 2.1.

In order to meet the CSS 2.1 standards Microsoft had to drop some proprietary CSS features. One of those features was CSS Expressions. If you don’t know what CSS Expressions are, they are a way to “script” in CSS. An example would be if you wanted a darker background at night, you could use CSS Expressions to change the background color based on the time of day. CSS Expressions used Javascript to handle the scripting side of the feature. Microsoft stated that they removed this feature because they wanted to comply with standards, improve performance, and to improve security. Seems like Microsoft is starting to change, and actually listen to their customers. If you have used expressions in the past, there is a way with IE 8 to make for sure that expressions is still work, until you fix the CSS code and replace it with DHTML. To force the browser to use Quirk Mode, aka compatibility mode, you must add in the header of the document. To see the different modes that you can force IE 8 to use review this (http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx) MSDN article.

Microsoft has also changed the way that filters are used in IE 8. MSDN’s blog (http://blogs.msdn.com/ie/archive/2009/02/19/the-css-corner-using-filters-in-ie8.aspx) stated that in the past to use filters, the designer would have to use filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50;. This attribute doesn’t comply with CSS 2.1 standards because the colon (:) is not used properly as a delimiter. The CSS 2.1 standard does provide browser developers the ability to use their own CSS standards as long as they are formated properly. In stead of removing the filters the IE team chose to handle how each filter is called and handled. With IE 8, to use the same filter the developer will have to use -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”;.

From what Microsoft has expressed and spoken about with IE8, the future of web development looks even brighter. Not having to worry about creating a work around just for IE users will mean more time for developers to code their site. Developers can also use CSS code which they have been wanting to use for a while but couldn’t because there wasn’t a work around for the IE.

Coding Etiquette: Five ways to improve your code

Derald — Tue, 17 Mar 2009 12:50:19 +0000

You may have heard the saying, “Cleanliness is next to Godliness.”. This is a term that every programmer should learn and obey when creating code. When you create clean code it will help you troubleshoot any issues you may have with your code in the future. Here are five practices you should follow when writing code.

1. Line Breaks

This should be something that seems obvious for most designers but it should still be mentioned. When you put everything on one line, it becomes harder to read, and if you have to change any of the code in the future it takes longer. In CSS, it is nice to have a new line break after every attribute, this allows the designer and future designers to understand quickly where the attribute ends. Designers should get in the habit of pressing the Enter key for a page break after every semi-colon in their code. Having line breaks in your code also makes the code look more professional.

2. Tab Indentions/Single Indentions

This is a debate that designers have all the time, should you tab indent or use a single space indention? What ever you choose to use, be consistent with it. Don’t use tab indention for one attribute, then a single indention on the next. Like line breaks, being consistent with your indentions makes your code easier to read, troubleshoot, and look professional.

3. Clean Comments
Comments are great in coding. They can save a lot of time and stress when trying to find out what the original designer was trying to do. If the comments are not written cleanly, then comments can become useless. Comments should be as descriptive as possible and should be short and to the point. When writing comments, make them sound natural as if you are explaining the code to another designers. A comment like “An IE workaround” can be useful, but “An IE workaround for the :before pseudo element” is a lot better. Be consistent in how you comment also. If you using one line comments your entire code, then switch to multiline comments for no apparent reason, it can throw off the person reading the comments.

4. Consistent and Descriptive Classes and IDs

In programming, one of the first things you are taught are to be descriptive when naming a variable. A class or ID with a descriptive name can assist in helping understand what the designer is trying to do. A class named odd isn’t very descriptive. Does odd mean an odd number, or something odd is happening that should not be happing. Where as odd_row will let you know that the row is odd, and if you have an even_row class, then it is a little safer to assume that the classes effect something that alternates between even and odd numbers. Being consistent with variable names helps your code be clean also. If you had classes that started with a capital letter, then in the HTML tags you call them with a lowercase letter it can become confusing. CSS and HTML are not case sensitive, but it helps if you remember to keep an eye on upper and lower case characters. Perfection is in the details, and making for sure you are consistent with variable names is just one more detail to remember.

5. Nesting

Nesting is the idea of putting similar code together so that it can be read easier. In CSS, you may want to nest attributes based on their class and ids. It is a lot easier to understand what a designer is trying to do when the designer puts all the attributes for a class called clean_code together. It also makes it easier to change one attribute that effects that class then searching through all the lines of code. When you use nesting with indentions and line breaks, this can make a big difference in how easy your code is to read.

Where to put your CSS Code?

Derald — Tue, 03 Feb 2009 16:52:54 +0000

There are three ways to call for a CSS attribute. Using classes, you can put the code either in a separate document, or in style tags in your header. You can also put the CSS attributes directly in the HTML elements. We will talk about which you should use and how they should be used.

First, lets think about what a good programmer will do, at least in theory. A good programmer will want clean, easy to read code. That programmer will also want to have code that can be changed very quickly and effectively. Keep these ideas in mind when you are coding, because they will help you determine the best way to play your CSS code. Most of the time it is a personal preference, but there are some rules that you may want to follow.

The first rule you may want to follow starts with the separate CSS file. Any common class or element you may use across multiple pages put in this file. That is the main reason to link to a CSS file. If you want to style every th element on every page you create the same, put the th element’s CSS code in a separate file. That way if you want to change your th element’s font size, you can do it across all of your pages by editing one file. This is a strong point in CSS and makes your code effective and easy to change.

Place CSS code in your header, only if the class you are using will only be called on one page, or you want to change the style of an element on onlyone page. This will make your CSS file smaller, and less code you have to look through just to change the one class or element that is used only one one of your sites pages. If you know that you are changing a class called myClass, and that is only use on your index page. Then you know exactly where to look. There are some downfalls to this rule. If someone else comes to edit your code, they will most likely look in the CSS file, instead of the index file. Thus it maybe a little confusing.

The last option is to put the CSS directly in the element with the style attribute. Only use this option if you are wanting to change that element alone. You may have a th element that you want to be 50% of the tables width, instead of the normal 20%, but you want to keep the same font, border, and background color attributes. That is where you will put the style in the element. It you are changing more then one or two attributes, you may want to look at creating a class for the element, then either put that class in the header, or the separate style sheet. More then one or two attributes will start to make your element look longer, and messier. Only use this option if you have to, and there isn’t another way to get the effect that you want.

There some rules that you should keep in mind when styling code. Just remember that these coding rules or most coding rules will not apply in all situations. There are scenarios that may require that you put the CSS attributes directly in the element, rather then in the header or style sheet. One example that comes to mind is working with the display attribute toggle if an element is shown or hidden on your page. That is something you want in your element, not in a class or a style sheet. If you remember the KISS method (Keep is Simple Silly), where you put your CSS attributes should come to you naturally and easy.

Expanding Tree Menu

Derald — Mon, 10 Nov 2008 13:40:47 +0000

There are some sites have a tree structure menu. If you have used Windows at any time you may be familiar to this system. It use to be the default menu at the left when browsing files, and is the system that is used in the Registry Editor. We are going to use JavaScript and some CSS to create a similar effect.

For this tutorial we are going to work backwards then what we normally do. Let’s start by looking at the HTML we will be using since it is really simple, at least for now.

Home

Main Menu

Page 1

Page 2

Second Menu

Page 1

Page 2

So far the HTML is just an unordered list with three entries. Two of these entries have a sub-list. This will be the base of our menu.

Now lets take a look at the JavaScript. We are going to look at it in one big chunk but don’t worry about it. I will explain everything.

So now that we have that over with, we can calm down a little because once I explain it, you will understand it a little better. The JavaScript has only one function. That function’s purpose is to toggle, hence the name, our menu selection. The first thing we do is assign a variable that is assigned to document.getElementById(id). The id will be passed to the function later on, just think of it as a place holder for right now. If you don’t know, the document.getElementById is object oriented programming. This is telling the Javascript that we want to select or use the element in the HTML (document) based on the id assigned to it. The next thing we come to in the JavaScript is and if else statement. The if else statement is checking to find the value of a CSS attribute. In this case the display attribute. To do this with JavaScript we added style.display to the toggle_block variable. You could use the long hand by typing in document.getElementById(id).style.display, but as you can see we use the document.getElementById(id) multiple times in the if else statement. This is why we made that a variable, it makes the code easier to read, and quicker to create. So if the if else statement detects that the element has the display attribute set to display, when this code is ran it sets the value to none, and vise versa. This will either show or hide the element, and you thought that setting the display attribute to none was only useful in forms. Well this is a way to make it useful.

Now that we have the JavaScript, explained. We have to make some changes to our HTML. The changes are very small, they are actually something that should be natural to all designers. We will be adding some classes and ids to our ul elements, and adding some JavaScript events to our main list. Here are the changes.

Okay, lets look at what we have done starting with the ids, and classes first. You see that we have the ul elements classes and ids. The classes are for the CSS we will be creating soon, and the ids will allow us to choose the element that the JavaScript effects. We added a class called menu to our main ul element. This is because it is our main menu. For all the other ul elements we added a class called sub-menu, and ids that start with sub-menu followed by a number. This number is based on how many sub-menus we have. If we added a third sub-menu, it will be submenu3, a forth would be submenu4, and so on.

In the main li elements that have a sub-menu we added a JavaScript event handler. There are multiple JavaScript event handlers, the one we are using is called onclick. To activate this event, you click on the element. Now this is where the JavaScript that we created actually works. We are telling the event handler that when it is clicked to pass the id to the toggle function. This is when the JavaScript checks the display attribute and changes it’s status.

If we were to just put the code together like it is right now, the code would not work when the page was first loaded. The reason is because our sub-menus are not hidden to start with. That is where our style sheet becomes important. We will also need to add something to the main menu in order for the user to know that there are sub-menus. We can do this with a + sign, but we don’t want to add a plus sign to any menu that doesn’t have a sub-menu. To do these two things we will create to classes. Here is the CSS code.

The CSS is very simple for this example. If you wanted to make each sub-menu a different color to make it stand out a little, you can add that to the style sheet.

This code can be used for more then just a menu. Another way you can use this code is for a table of contents. Each sub-menu can have it’s own sub-menus. Adding the second level of sub-menus is very easy and allows the code to be scalable if needed. By using the code for a frequently asked questions page, it is really effective also. Each of the main menus can be a question or topic. Then each sub-menu can either be the answer or a question. If the sub-menus are questions a second level sub-menu can be added for answers. You can see the code in action here It shows examples of all three ways you can use the script as mentioned in this tutorial.

JavaScript Countdown

Derald — Fri, 15 Aug 2008 13:47:04 +0000

Ever have some text that you wanted a person to read before they submitted content to your site. Most of the time, the people just scroll to the bottom of the page and click the submit button. In the Web 2.0, people have added additional code to make sure that the person has read the text. I am for sure most of you have seen the sites where you have to scroll an entire div block in order to have a button enabled that you can then click to say you agree to something. In this tutorial we will do a similar delay, but this will be a delay that you have more control over than the user. To create the delay we are going to use JavaScript. If you don’t know JavaScript try to follow along, and hopefully you will learn something about JavaScript before the end of the tutorial. First, think of the least amount of time you want the delay to occur, in the tutorial we are going to use about 15 seconds. Let’s call this variable tminus.

var tminus = 15;

Now to actually create the countdown, we will need to is create a function that can be loop and take the value away from the tminus variable. Let’s call this function countdown, since that is what it will be doing.

function countdown(){
}

Now that we have our function, let’s actually make it do something. Let’s have the function subtract 0.1 from value of tminus.

function countdown(){
tminus = tminus - 0.1;
}

Now, everytime the function is ran, it will reduce 0.1 from the value of tminus. The only issue with this, is that we can’t stop the timer at 0.0. To fix this issue we need to create an if statement that will tell the timer to stop when tminus gets to 0.1. You maybe asking why 0.1, well if we tell the timer to stop when tminus gets to 0.0, the function will execute one extra time, thus making the countdown go to 0.09, which we don’t want to happen.

function countdown(){
if (tminus >= 0.1){
tminus = tminus - 0.1;
}

If you were to run the code just as it is now, Javascript will make the value of tminus become something like 14.7000000003. Also if the number is a whole integer, like 14, then everything after the decimal point will not be displayed. We can fix both of these issues with a little code.

function countdown(){
if (tminus >= 0.1){
tminus = tminus - 0.1;
tminus = Math.round(tminus*100)/100
if (!(Math.round(tminus*100) % 100)){
tminus = tminus + “.0″;
}
}

That is a lot of code to digest at once, so lets go over it line by line. The first line that we added was the tminus = Math.round(tminus*100)/100. If you don’t know JavaScript that well it may have throw you off, but let’s break it down. JavaScript has a built in functions, a group of those functions are designed just for the use with numbers. Everyone on those functions start with Math followed by .function name. In this case, we are using the .round() function. The Math.round() function, rounds up to the nearest whole number. Since we are just needing the hundredth place after the decimal, we then multiple the value of tminus by 100, round to the nearest whole digit, then divide by 100. By dividing by 100, we get only the hundredth place. To deal with the issue of zeros now showing up in the hundredth spot, we create a small if statement. This statement can be confusing if you don’t know JavaScript. The purpose of this if statement is to check to see if there are any reminders, and if there are not any reminders to add .0 to the end of tminus. The percent (%) sign is called the modulus in JavaScript. What is does is returns only the reminder in a division problem. So two divided by 2 will return a zero, where as three divided by two would return 5. So what we are doing is rounding to the nearest hundredth place, like we did to get only the hundredth place, then checking to see if it can be divided by 100. By using the not (!) operator, we are telling the JavaScript that if there is a remainder, do not do the following. This could also be written like the following, either way the statement is checking for the value.

if ((Math.round(tminus*100) % 100)==0)

When tminus value is zero we need to change the value of the button to Submit. To do that we will need to add an else statement to our function.

By adding the else statement, we are changing the value of tminus to something completely different if it is less then or equal to 0.1. In this case, we are changing the value to the word I Agree, since we want to user click the button if they agree to the rules. There are just a few more things we have to add to the script to toggle the button, and to change the value of the button while the user is waiting.

if (tminus != “I Agree”){
document.countdown_form.countdown.disabled = true;
}else{
document.countdown_form.countdown.disabled = false;
}

This part of the code, will still be inside the function. It will allow us to check the value of tminus, and if tminus does not match the string (I Agree), then the element named countdown in the countdown_forum will be disabled. Once the value of tminus is set to I Agree, then the button will be enabled. Now for the part, of the code that makes the count down actually work.

document.getElementById(”countdown”).value=tminus;
setTimeout(”countdown();”, 100);

These two lines will go at the end of our code. The first line, just tells the JavaScript to update the value of the element that has the id countdown with the value of tminus. The next line uses another built in function of JavaScript. The setTimeout function is designed to perform something in a given time. In this case, we are telling setTimeout to run the countdown() function, every 100 milliseconds. Now we will need to create the HTML to display the JavaScript output, and one more line of JavaScript to start the countdown function. Here is that code.

This code should be familiar if you know HTML. It is just a form with the button, we have given the button an id, and a class to apply any CSS that we would like to apply to it. We have also disabled the button with the disable option. The JavaScript part of the code is just telling the browser to run the JavaScript code. You can see the code above in action here.

What Browser Should I Code For?

Derald — Wed, 06 Aug 2008 17:07:02 +0000

Due to the growth of the web there are many different browser on the market, and many different ways for users to connect to your website. During the internet boom in the 90’s, you would see websites all the time that would say Best viewed in Internet Explorer 4 at 800 x 600 resolution. In today’s standard this would not be considered professional, and for the most part is not accepted by the community in general. So how do you choose what browser to code for?

First, you should use tools that will allow you to monitor the traffic that comes to your site. You can use the log files that your web server creates, or other gui based web tools like the popular AWStats. This will give you a target for what browser you should attempt to try to code for. If you have a large number of Firefox users, then target that group. This will allow your site to operate smoother, and make a better experience for the user.

Make for sure your code is using industry standards. Internet Explore has it’s own set of CSS filters and transitions. Try to stay away from those type of browser specific features. Yes, the fade transition between pages may seem like a great idea, but if you spend an hour getting it just right, but half your users can’t see it then there is no real good reason to waste that time. Use tools such as the W3C’s HTML or CSS Validators, to make for sure your code within standards. Even then you have to remember that not all browsers support all of the standards.

Keep your site’s layout simple. Use the acronym KISS or Keep It Simple Stupid. When adding features on your site, check to make for sure that most browsers support the code for that feature. Internet Explorer does not support the psuedo element after, because of this try to use it sparingly. Also, check for other coding ideas that create the same effect. If you want a rollover, and you are using CSS but it is not working in one browser, then try using JavaScript to create the same effect. This can eliminate headaches that come from trying to find a work around, when the work around is to use a different language.

Test your code in multiple browsers. If you know that 75% of your site’s visitors are using FireFox, Opera, Internet Explorer, and Safari, then install those browsers and test your code. If possible try the same browsers on multiple operating systems. It doesn’t hurt to see your site from a different “angle”. This may even inspire you to a better layout.

Because of the diversity of the internet, designers can not code for just one browser. Like all things, we have to adapt to our environment. That environment is an internet with multiple browsers. So what browser should you code for, all of them.

Custom Buttons

Derald — Tue, 24 Jun 2008 12:46:37 +0000

The default buttons in today’s browser are plain. Mostly just a shade of gray, and do not fit with the color scheme of most sites. With the use of the HTML button tag and some CSS, you customize your buttons for your site.

If you look at a default button, you will see that there are three things that make the button it’s unique look.

As you see those three things are the gray background color, and the left and bottom borders. The other thing that a button will have is when clicked it the borders will change. We will also need to also use CSS to control this “effect” with the pseudo class :action. In the pseudo class we can change the top and left borders to match those of the bottom and right borders. Let’s start to create the CSS for a button that fits the color scheme of Now CSS.

First we will need to think of a color that we can use for the background. A color that will fit the site’s theme nicely is a light gray (#F4F4F4). If you look at the default button, you can see that all sides of the button have a border, the top and left border of the button are very close to the shade that the background color is. Since the color we are using already is very light we will use the same color for these borders. The bottom and right borders we will use black (#FFFFFF). For the color of the text we will use a shade of green (#94CB2D) which is also used in the menu bar. Here is the CSS code that we need to create the button with this color scheme.

button{ color: #94CB2D; background: #F4F4F4; border-top: 3px solid #F4F4F4; border-left: 3px solid #F4F4F4; border-bottom: 3px outset #FFFFFF; border-right: 3px outset #FFFFFF; }

You may have noticed that we have used different styles of borders for the top and left, then the bottom and right. The outset style we used for the bottom and right allows those borders to like similar to the default button. You can use a solid border if you choose. You also see that we define the top and left border even though the user will not really see those borders, since they are the same color as the background. The reason for doing this is because if we don’t add the borders, when the pseudo-class :action is enabled, the button will not look as if it is moving on the page.

The pseudo-class part of the CSS will be very similar. The only thing that is going to change are the borders’ styles. The bottom and right borders will now need to be the same color as the background, and the top and left borders will become black. Along with the color changes, the border styles will also change. Both the bottom and right borders will change to solid, while the other two borders’ style will be inset.

button:active{ color: #94CB2D; background: #F4F4F4; border-top: 3px inset #FFFFFF; border-left: 3px inset #FFFFFF; border-bottom: 3px solid #F4F4F4; border-right: 3px solid #F4F4F4; }

By adding these few lines to your CSS you can create buttons that will fit into the theme of your site. This will also make your site have a more professional look, and your users will most likely like the change. Remember, don’t make too much of a change, because your button will still need to look similar to the default button for a user to know that it can be clicked.

First Letter

Derald — Wed, 18 Jun 2008 17:04:49 +0000

One of the most over looked attributes in CSS is the :first-letter attribute. With this attribute you can add a lot of style to your site, with very little code. If you wanted to make your pages have theme similar to books in the Dark Ages, this attribute is perfect for that.

The :first-letter attribute, allows you to change the attributes of the first letter in a HTML element. You can change thing such as the margin, padding, font properties and many more. W3Schools.com list the following as the attributes you can change using :first-letter.

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear

As you can see that gives you a lot of control on how you want to make your first letter appear. You can use the font-properties to make the first letter larger then the rest of the text, and if you add a decorative background to the first letter, you could even make your own Dark Age book style to your page.

Here is an example code that will change the first letter to a green color, and increase the size by 250% on any paragraph elements.

p:first-letter{
 color:#8cb939;
 font-size: 250%;
 }