Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


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 and 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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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" "">
<html xmlns="">
<head profile="">

<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=""></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" "">
<html xmlns="">
  <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, then enter 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
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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

660 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