Go Premium for a chance to win a PS4. Enter to Win


Learning CSS & XHTML From Website Examples

Posted on 2011-03-07
Medium Priority
Last Modified: 2012-05-11

I am very new to webdesign and have spent the past month catching up to speed on jQuery, CSS5 basics, and HTML. I'm a traditional vb developer and am attempting to learn the basics of web design so that I have a better understanding of what our designers are doing and how I can best incorporate our B.I. code into their design, etc.

Their suggestion to me was to find websites that I like the design and look of, and inspect their code to "learn" how they designed them.

I've been looking at mint.com and zendesk.com as I like the centered content, minimalistic design. After looking through their code over and over again - I honestly have not gotten anywhere. It seems most of the actual code is in style files.

Do you have any recommendations, whether it is books or another learning method, to be able to look at sites like the above and understand how / what they have done?

As an aside, I am using Google Chrome and "Inspect Element".

Thank you,
Question by:w00tw00t111
LVL 30

Expert Comment

ID: 35057851
Most modern designs separate the content from the layout. The HTML provides the content and markup while the CSS applies the styling.  This is the most intelligent and semantic ways to code a website.  In addition to that, Javascript libraries such as Jquery, MooTools, Scriptalicious, etc. help with interactivity and sometimes HTML/CSS as well.  

I've always felt that the best way to learn is to do it yourself.  Start out with a simple web page and play with it.  Like below. Change some of the CSS to see the different results you get.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	#container {
		margin:0px auto;
		padding:5px;/*padding is inside of the container */
	#container p {
	#container #inside {
		border:1px solid #000;


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div id="container">
       <p> This should be centered content</p>
	   <div id="inside">
			This should have a black border
	   </div><!--end inside -->
</div><!--end container -->

Open in new window


Expert Comment

ID: 35057852
If you want to look at the style sheets that are held in separate files then you can find them by looking at the source.  In IE, and most other browsers, right-click the page and select 'view Source' (or similar).  You've then got the raw HTML.  Look in the <head></head> section for <link .../> tags in there you can see the path to the CSS files.  e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <title>Welcome to My Site</title>
  <link href='/CSS/BodyRightBar.css' rel='stylesheet' type='text/css' media='all' />
  <link href='/CSS/Common.css' rel='stylesheet' type='text/css' media='all' />
  <link href='/CSS/Styles.css' rel='stylesheet' type='text/css' media='all' />

Open in new window

You can then use the href value to navigate to the style sheet and load it with your browser.  For Example, if the above code was from the index page of http://www.mysite.net, then enter http://www.mysite.net/CSS/Common.css in the address bar to see the common stylesheet.  This should load it up as a plain-text file or ask you to save it.

(As an aside, if you base your CSS on other sites' code, it would be polite to credit them on your site.  Also, check that the site isn't copyrighted.  If it is, you should ask permission for re-use.)

Accepted Solution

ChuckDeezel earned 2000 total points
ID: 35058162
The thing with using examples is that anything done in separate files (CSS) and things done using server side scripting will be near impossible to extract the code. This is for the obvious reason that the code is executed on the server side or referenced via an outside file in the case of CSS.

I would say a good CSS style based book would be be the best place to start for styling advice.

Also check out this "top 20" site. I haven't used it personally, but at brief glance it looks decent:

Expert Comment

ID: 35058300
You will get a lot of good, well organized information at http://www.w3schools.com/.
Also, to view client side code (javascript, CSS) you can File -> Save As and choose Web Page complete and the files will be saved to the folder you selected.
Hope this helps.
LVL 16

Expert Comment

ID: 35334730
After using the <table> tag for web page layouts since 2003 (that's the way it was done before CSS and the <div> tag took over)
I started learning page layouts with the <div> tag.
The <div> tag can be very confusing and has a lot options/properties/etc as compared to a <table> layout page.
I miss using the <table> tag.
I really need to sit down and examine and practice more with the <div> tag.
Then you have compatibility issues with IE6 and IE7, and possibly IE9 now.

The main tag you need to master is the <div> tag. Just practice with it as much as possible
and understand it's main properties and features.

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question