Jump to Page: 1 2
Morwen Oronor
Citizen
Worldly Traveler
Registered: 01-2008
Posts: 1912
Karma: 18 (+19/-1)
|
|
Reply | Quote
|
|
A simple explanation of how CSS works
The following two posts are the text of a chapter I wrote for a manual on web-design intended for people who still use HTML for all the design work. It is intended to be merely an introduction to CSS but explains how using CSS makes the design of a website less cumbersome. Lesa please read and comment.
Anyone who has ever used style sheets in a word processing program will understand what CSS does and how using it to automatically change the layout of a website makes a lot of sense.
CSS takes the formatting of the web pages out of the HTML 'content' part and places them all together, standardising them to make every style, colour, content, layout the same wherever the specific style, colour, content and layout is used throughout the site.
To achieve this, it is necessary to create a separate document, and call it style.css. The document reference must then be added to the instructions at the top of each HTML page so that the browser will know where to look for the styling instructions, thus:
<!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" dir="ltr" lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The site name</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
The bold words are the CSS reference. This makes designing a website fairly easy where, instead of having an (x)HTML page that looks like this, with tables defining the layout of the paragraphs:
<BODY>
<tr>
<img src="http://i298.photobucket.com/albums/mm272/Vebidia/picture1-1.jpg" width="735" height="615" alt="">
</tr>
<table width=30%>
<tr>
<td>
<img src="http://picturesource.gif"></td>
<td>
Suspendisse porta purus sit amet felis. Sed sollicitudin placerat ipsum. Etiam euismod, nibh elementum posuere fringilla, nulla elit blandit dolor, ut commodo mi pede vel lectus.
</td>
</tr>
<tr>
<td colspan=2>
Sed eget eros cursus ante imperdiet euismod. Ut eros. Proin purus justo, cursus quis, auctor sed, blandit vel, urna. Phasellus varius laoreet diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
</tr>
</table>
</center>
</BODY>
your (x)HTML page, that will look exactly the same in a browser will look like this:
<div id="content”>
<h1>your webpage name</h1>
<p>Suspendisse porta purus sit amet felis. Sed sollicitudin placerat ipsum. Etiam euismod, nibh elementum posuere fringilla, nulla elit blandit dolor, ut commodo mi pede vel lectus.
</p>
<p>Sed eget eros cursus ante imperdiet euismod. Ut eros. Proin purus justo, cursus quis, auctor sed, blandit vel, urna. Phasellus varius laoreet diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div> <!--end content-->
Last revised by Morwen Oronor, 5/23/2009, 2:28 pm
---
The truth is incontrovertible, malice may attack it, ignorance may deride it, but in the end; there it is.William Spencer Churchill
|
|
5/23/2009, 2:23 pm
|
Link to this post
PM Morwen Oronor
Read Blog
|
Morwen Oronor
Citizen
Worldly Traveler
Registered: 01-2008
Posts: 1912
Karma: 18 (+19/-1)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
document text continued:
As may be seen, this is a far easier way of dealing with large amounts of text on a page for example, but not only that, with the <content> defined in the CSS document, using merely the word 'content' as the definition of how it should look on the site, will ensure that every part of every page in the entire website, and especially if there are lots of pages, will look exactly the same and when one page needs changing, only the actual words that will appear on the screen need to be changed without affecting the layout in any way.
Using HTML or (x)HTML only, may be fine for single-page websites, and it works very well, as may be seen from the lessons contained in this book, but when the site grows and there are 5 (or more) pages, each with different subjects and different layouts, the risk of losing parts of the layout become very high and searching for the problem then requires hours and hours of searching, whereas using a CSS sheet requires merely running the document through one of the testers available on the internet will easily find the problem. (Refer to the end of the chapter for the URLs of websites to test both HTML and CSS).
Now for some specifics:
Say you have a bold heading you want on some pages but not on others, and on the pages where you're going to put it, it has different words.
The solution is to define the way you want the bold text to look and how far you want it from the edge, then on the HTML page, you put the following:
<p class="intro">
You've told it that the next paragraph's first line must use the formatting you've classifed as “intro”.
In your CSS page you define the classification like this:
.intro {font-weight: bold; }
(Note that in CSS, the coding for each definition is contained within 'curly brackets', i.e. {}).
Now every time you open a new paragraph with a bold heading, you use the 'intro' class, it will bold the text contained within <p class=”intro”> and </p>.
Then the next paragraph starts with <p> and ends with </p> to make it a 'normal' paragraph, which will have been defined within the CSS sheet, in the main ‘body’ definition.
To create a sidebar or a list of links on a page, all the various requirements for the sidebar will be contained within the CSS, on the HTML pages, only the links to the CSS and the actual content of the side will appear, thus:
<div id="links">
<ul>
<li id="first"><a href="index.html">Home</a></li>
<li> <a href="next page.html">Next page</a></li>
<li><a href="3rdpage.html">Third page</a></li>
<li><a href="andsoon.html">And So On</a></li>
<li id="last"><a href="contacts.html">Contacts</a></li>
</ul>
As you can see, the item 'links' is defined in CSS so that all that has to appear in the HTML, is the actual text naming the other pages in the site and the links to those pages. No further reference is needed if you keep all the pages in the same folder to avoid unnecessary references. If you have a really huge site, making it necessary to contain parts of the website within folders then refer to the chapter earlier about how to create relative references.
The CSS for the sidebar links will look like this:
#links {padding: 1px 0;float: right; width: 220px; }
And the unordered list, i.e. ul, like this:
ul li a {
display: block;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
border: 5px solid #4e333a;
text-decoration: none;
background:url(button1.jpg) center top no-repeat;
}
It describes a 'block' display, 30 pixels in height, with each line also 30 pixels high (in case there are more than one line), aligned centre with a border and the border colour, no bold or italics and the image to use to decorate the lines of the sidebar.
Using this and linking it in the HTML on each page, as was shown above, also allows for extra lines to be added on different pages, so that each page doesn't have to carry the instructions for how to draw the sidebar 'block'.
Detailed lessons on how to use CSS is beyond the scope of this book, it is necessary to learn the codes step by step along with detailed examples and a test (x)HTML website to relate to. To give an example of a typical style sheet look at the following (taken from the CSS lessons in the site quoted below), also note the comments below each block of coding:
body {
font-size: 12px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000;
background-color: #ccc;
}
This describes the 'body' of the webpage as follows:
The font-size throughout the site must be 12 pixels, using the standard 'sans-serif' font family. These are standard on the internet so that all browsers of any age will be able to read the site.
The font must be in black with a background of light grey.
img { border: 0; }
a:link { color: #ff0000; }
a:visited { color: #ff9999; }
a:hover { color: #000000; }
h2, h3 { color: #777; }
h1 { font-size: 180%; color: #999; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }
All images must have a border of 0 pixels. This is so that if you make a single item stand out with a border, the basic border won't interfere with that image's design.
Below that the colours for the various links, firstly how they will appear on the page, then after they've been visited and how they will change as the cursor hovers over them. There is also provision for second- and third-level heading in case they are required.
Note below that, the three heading types are sized to change the font-size defined in the 'body' definitions.
.intro { font-weight: bold; }
.second { margin-top: 1em; }
}
.highlight {
background-color: #ffff00;
color: #000000;
}
Further on font-sizes: for the paragraphs, coded as:
<p class=”intro”>
in the HTML, the text will be in bold, then:
<p class=”second”>
will be the distance of 2 of the letter 'm' from the top so that in pages other than introduction pages and where the introduction is not used, the 'second' formatting can be used to move the paragraph away from the immediate top of the page.
If the designer wishes to 'highlight' a particular piece of text to make it stand out, then using this code, it will appear as it would if a green highlighter were drawn over the words.
#container {
background: #111;
border: 3px solid #777;
margin: 0 auto;
width: 900px;
}
This is the definition for the actual basic layout of the page, it defines the size of the page, i.e. 900 pixels with an automatic margin, a coloured border and a coloured background.
#links, #header { background: #eee; color: #ddd; }
#links { padding: 1px 0; }
#header { padding: 0.5em 2em 2em 2em; }
#content {
background: #fff;
padding: 1px 10px;
float: right;
width: 700px;
margin-right: 2em;
}
#links { float: left; width: 200px; }
#links-br { clear: both; }
This describes the 'links', whatever the designer wants the actual words to be:
The links have a header with a background and a text-colour, padding takes it in from the border by whatever number is defined, the heading padding is more defined to include top, bottom and both sides and then the content. Float refers to where the links should be placed on the page and the width is how much of the actual page's width must be used for the links, as may be seen, the page is 900 pixels wide and the links will then take up most of that space, moving the test of the content down, if it is placed after the 'links' in the HTML or below the content if the 'links' are placed after the content.
To fit the content and the links in the same line, add all the pixels together to fit into the space allocated in the 'body' definition.
ul, ol {border: 1px solid #ff0000; margin: 1em 0; padding-left: 0 }
li { margin-left: 2.75em; background: #fffeff;}
ul { list-style: none; margin-top: 1em;}
ul li a {
display: block;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
text-decoration: none;
background: #000 url(../images/button1.png) center top no-repeat;
}
ul li a:hover {
background-position: center bottom;
color: #fff
}
All the above defines how unordered and ordered links should look. The default is always a black 'dot' for unordered links and numbers for ordered links, to avoid this, use 'text-decoration: none'.
As may be seen, images shown on the site, i.e. header images, decorations and standard images within the site should be contained with the site to make for faster uploading of the site on older computers.
Use outside storage for images that change or for really large images. You can place a thumbnail of a large image on the site with a link to the photobucket or imageshack site where photos are held. This helps to speed up the site.
As you can see, the images that appear on the site and that are part of the site design, can all be defined in CSS and are then merely referred to in the HTML.
To learn how to actually put this way of styling websites into practice, it is necessary to learn step-by-step.
This is the best site for learning CSS:
http://ifyoucodeittheywill.com/
I thought it a good idea to post this here as a reference and so that any inaccurancies may be pointed out to other people who read it.
Also I want other people who think that learning CSS is difficult to note that three months ago, I didn't have a clue about this and with Lesa's help, was not only able to design a properly working website, Freethinkers, but felt confident enough to be able to write this piece.
Last revised by Morwen Oronor, 5/23/2009, 2:32 pm
---
The truth is incontrovertible, malice may attack it, ignorance may deride it, but in the end; there it is.William Spencer Churchill
|
|
5/23/2009, 2:27 pm
|
Link to this post
PM Morwen Oronor
Read Blog
|
Morwen Oronor
Citizen
Worldly Traveler
Registered: 01-2008
Posts: 1912
Karma: 18 (+19/-1)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
OK reading through that again, there are too many 'as you can see' I need to change that 
---
The truth is incontrovertible, malice may attack it, ignorance may deride it, but in the end; there it is.William Spencer Churchill
|
|
5/23/2009, 2:34 pm
|
Link to this post
PM Morwen Oronor
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Head of Runboard staff
Registered: 11-2005
Province: YouTube/LesignerGirl
Posts: 6857
Karma: 101 (+115/-14)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
I went through it with a fine tooth comb, and here are the inaccuracies/typos/confusing bits/etc I found.
To achieve this, it is necessary to create a separate document, and call it style.css.
This implies that it needs to be named "style.css", but that isn't the case. You can actually name it anything you want, as long as it has a .css extension and the <link> tag points to the file correctly.
I see that you have <BODY> and </BODY> tags in the obsolete method you posted, but not in the updated one, which might confuse a lot of people. Leaving those tags out of both examples might be a good idea, unless you want to give a better example of outdated code, such as:
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0 BGCOLOR="#FFFFCC" TEXT="#000000" LINK="#0000CC" VLINK="#CC00CC" ALINK="#FF0000">
This is what people used to do in the days before CSS, and some people still do that.
Of course, if you put this in your example of outdated code, you should add <body> and </body> tags (in lower-case) for your example of correct code.
...searching for the problem then requires hours and hours of searching...
You might want to say "may require hours and hours", because it might not take some people that long. 
(Note that in CSS, the coding for each definition is contained within 'curly brackets', i.e. {}).
It might be better to say "set of definitions" instead of "definition", otherwise people might think they're supposed to do this:
.intro { font-weight: bold; } { margin... }
To create a sidebar or a list of links on a page, all the various requirements for the sidebar will be contained within the CSS, on the HTML pages, only the links to the CSS and the actual content of the side will appear, thus:
Might be clearer like this:
To create a sidebar or a list of links on a page, all the various requirements for the sidebar will be contained within the CSS. On the HTML pages, only the references to the CSS and the actual content of the side will appear, thus:
It describes a 'block' display, 30 pixels in height, with each line also 30 pixels high (in case there are more than one line),
Defining a line-height of 30px would be bad if you have 2 lines and want the entire link to be 30px tall. If you have 2 lines that are each 30 pixels in height, you would need a 60px tall link to accommodate it.
All images must have a border of 0 pixels. This is so that if you make a single item stand out with a border, the basic border won't interfere with that image's design.
That 2nd sentence makes no sense to me.
By default, images that are used as clickable links will automatically have a border around them. By defining a "0" border, you are removing this default border on all image links throughout the site.
.intro { font-weight: bold; }
.second { margin-top: 1em; }
}
.highlight {
background-color: #ffff00;
color: #000000;
}
The above has one too many curly brackets.
<p class=”second”>
will be the distance of 2 of the letter 'm'
In the above example, the top margin was defined as 1em, not 2.
...using this code, it will appear as it would if a green highlighter were drawn over the words.
#ffff00 will result in a bright yellow.
#links, #header { background: #eee; color: #ddd; }
The links have a header...
#links and #header are two different areas of the page.
...the page is 900 pixels wide and the links will then take up most of that space, moving the test of the content down, if it is placed after the 'links' in the HTML or below the content if the 'links' are placed after the content.
Aside from the typo which I highlighted, I find the rest of this confusing.
As may be seen, images shown on the site, i.e. header images, decorations and standard images within the site should be contained with the site to make for faster uploading of the site on older computers.
It actually has nothing to do with the user's computer, but other things entirely. First, if an image is hosted on the same site and a relative url is used, the request for the image only goes out to that site. But, if an image is hosted on a different site, or even on the same site but a full url is used to call it up (including the http:// and the domain name), then the request leaves the site and has to find it again.
Further, if an image is hosted on a different site and that other site is down, the images won't show up. By keeping the images on the same site, you won't have to worry about people seeing your pages without those images, because if the images are down, that's only because the rest of the site is down along with them.
Use outside storage for images that change or for really large images. You can place a thumbnail of a large image on the site with a link to the photobucket or imageshack site where photos are held. This helps to speed up the site.
This is incorrect. As explained above, this can actually slow down the loading of pages (albeit, it's only noticeable if the image host is slow or down). It can, however, help save on storage space if someone's hosting account doesn't include a lot of storage.
The rest sounds great, and it pleases me that you could write this after only a few months of learning. 
I am also honored that you are not only including my site, but consider it the best for learning CSS. Thank you!
|
|
5/24/2009, 2:46 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Morwen Oronor
Citizen
Worldly Traveler
Registered: 01-2008
Posts: 1912
Karma: 18 (+19/-1)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
Thanks for that Lesa. Yes, I picked up a few of those on re-reading it myself yesterday.
I have to admit that I am a very careless typist, and when I check what I've typed it doesn't help that I also read far too fast so I skim over the typos. 
Thank you so much for helping me with this.
I'll do the corrections and then pass it on to John. I'm much happier about that now.
And as for citing you and your site, it's only fair that you get the acknowledgment you deserve for being a really fine teacher and for knowing your subject.
---
The truth is incontrovertible, malice may attack it, ignorance may deride it, but in the end; there it is.William Spencer Churchill
|
|
5/24/2009, 10:06 pm
|
Link to this post
PM Morwen Oronor
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Head of Runboard staff
Registered: 11-2005
Province: YouTube/LesignerGirl
Posts: 6857
Karma: 101 (+115/-14)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
Aww, thank you, MO.  You're an excellent student and teacher in your own right.
|
|
5/25/2009, 2:58 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
Morwen Oronor
Citizen
Worldly Traveler
Registered: 01-2008
Posts: 1912
Karma: 18 (+19/-1)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
I'm waiting to see what John makes of it.
I told him you'd edited and approved it, now let's see if he'll 'get' it.
---
The truth is incontrovertible, malice may attack it, ignorance may deride it, but in the end; there it is.William Spencer Churchill
|
|
5/25/2009, 5:07 am
|
Link to this post
PM Morwen Oronor
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Head of Runboard staff
Registered: 11-2005
Province: YouTube/LesignerGirl
Posts: 6857
Karma: 101 (+115/-14)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
I'll have to get a copy of the book once it's finished. I've never been referenced in a book before.
|
|
5/25/2009, 3:20 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Morwen Oronor
Citizen
Worldly Traveler
Registered: 01-2008
Posts: 1912
Karma: 18 (+19/-1)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
You'll be so pleased to hear this.
He went to your site yesterday, worked through all the CSS lessons and then added the 'gallery' and 'column' explanations to the chapter.
He's never used CSS before, designed websites using only HTML but now gets what CSS is and how it works.
I told you you're a good teacher.
---
The truth is incontrovertible, malice may attack it, ignorance may deride it, but in the end; there it is.William Spencer Churchill
|
|
5/25/2009, 9:18 pm
|
Link to this post
PM Morwen Oronor
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Head of Runboard staff
Registered: 11-2005
Province: YouTube/LesignerGirl
Posts: 6857
Karma: 101 (+115/-14)
|
|
Reply | Quote
|
|
Re: A simple explanation of how CSS works
Please tell him I'm honored, MO.
Will he be using it word for word and citing me as the author of those sections? I've never been a contributing author of a published book before.
BTW, I posted a followup to that columns tutorial today (well, today in my time zone), and I think it would make sense to include it all as one lesson in the book. If he only includes the one from a few days ago, people will look at the end result and go, "Huh? That's ugly!"
|
|
5/25/2009, 10:32 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Add to this discussion
Jump to Page: 1 2
You are not logged in ( login) –
Board's time is: 2/9/2010, 6:10 pm EDT
|
