Learning CSS & XHTML From Website Examples

Posted on 2011-03-07
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 500 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

627 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