Archive for design
Introduction to CSS Web Design
Posted by: | Comments
Adding a Cascading Style Sheet to your current web site layout and save you time and make your web site look a lot more professional in the process. Cascading Style Sheets, or sometimes called CSS, is a style sheet language used to describe how a web page should be formatted.
For example, if you wanted to make some text on a web page look bold, you might use this snippet of HTML code:
<strong>this will be some bold text!</strong>
Which seems simple enough. However, what if you want to chance the color, font, and how this text is shown in that spot across all your web pages? Well then your HTML in your pages become a rambling mess. That is where Cascading Style Sheets come in handy.
Cascading Style Sheets allow you to, in a much more organized way, sort out how your web site design looks in a totally separate file, or chunk of code in between the head tags. For example, let say you wanted the title of your page to be bold, green, and a different font style than the rest of the page. In your HTML code, you would use something like this:
<p class=”mycooltitle”>this is my page title</p>
That tells the browser that everything within this paragraph or <p></p> tags will follow the design setup class I have defined as “mycooltitle”. Now, in between the head tags (<head> </head>) I want you to add this:
<style type=”text/css”>
.mycooltitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #336633;
}
</style>
This CSS code tells the web browser to apply these design settings to the class marked, “mycooltitle”. It does three things. It says it will use the Verdana font, the font will be bolded, and it will be colored green (#336633 is the HTML color code for a shade of green).
That is how you apply Cascading Style Sheets to your web design and layout of your own web pages. One major benefits of using CSS is that it helps to separate your web site code with your design. This way, you can change one aspect very easily in the CSS file (when or if you start to master external style sheets). I will save that lesson for another day.
Mitchelaneous Redesigned (Need More Mitch?)
Posted by: | CommentsNow I do not plug my other projects very often, however I think this is an important enough update to share with the rest of my fans (even my wonderful podcast subscribers)! I just finished up with a brand new redesign of my layout over at Mitchelaneous.com – and I would love your feedback on it.
What is Mitchelaneous? It is my personal blog, with tutorials helping with tech tips, web development and geeky entertainment. Pretty much everything else I want to post about is posted here, that does not fit under the web hosting category of WebHostingShow.com and the Mozilla category or FirefoxFacts.com.
Here are a few of the popular posts to check out too:
- Best of the Free Zombie Flash Games
- Free Mega Man Desktop Icons
- Garfield Without Garfield is Funnier
- 9 WordPress Alternatives
- Get More from Google Calendar
As you can see, I go all over the place with this blog. For the most part though, I try to keep the madness focused on helping you get more out of what you want to do, and provide you with the best advice I can on a number of different topics. From wallpaper downloads, to free custom desktop icons, to the best of the video game world. There is something for everybody’s inner-geek to enjoy.
How can you subscribe for free?
You can also get updates via e-mail of new posts, or from your favorite feed reader:
Subscribe in a Reader! | Subscribe to Mitchelaneous by E-mail
You can also just copy and paste this into your feed reader of choice too:
http://feeds.feedburner.com/mitchelaneous
Go check it out at Mitchelaneous.com and let me know what you think!
Add me on Twitter! Come follow my daily antics, links, tips and more @mitchkeeler on Twitter!© Mitch Keeler 2010 | Check out my firefox help site and my tech blog too!
Take Better Web Site Screenshots
Posted by: | Comments
Need to take a screen shot of a web site to show off to somebody? By far, one of my favorite programs to take screenshots is WebShot. It is almost the perfect screenshot and web page thumbnail generator utility. How do you use it? You put the web site address you want to get the capture of in the URL text box, and then hit the button labeled, “Start”.
Diving deeper into the download you can also set it up to capture multiple URLs, a specific size image, edit the default browser sizes and more. For most people the free version should get the job done – however if you want even more features you might look into getting the personal or server edition.
To pick it up, or get more help on how to use it – go visit WebSiteScreenshots.com.
Add me on Twitter! Come follow my daily antics, links, tips and more @mitchkeeler on Twitter!© Mitch Keeler 2009 | Check out my firefox help site and my tech blog too!






