The content for 20.xx is dedicated for CSS.

http://www.killersites.com/Tutorials/CSS_tutorial/cssTutorialPage1.htm

1. Borrowed from KillerSites.com
2. Dicusses typical html tags used in a CSS based web site
3. h1 through h6
4. p
5. ul, ol
6. div
7. href
8. img

http://www.killersites.com/Tutorials/CSS_tutorial/cssTutorialPage2.htm

1. ID selectors explained
2. Navigation pane and Content pane styled
3. border-right and position explained

http://www.killersites.com/Tutorials/CSS_tutorial/cssTutorialPage3.htm

Explanation of the styles that were used.

http://www.csszengarden.com/

http://www.meyerweb.com/eric/css/edge/

A fairly invovled treatment on CSS

http://www.westciv.com/style_master/academy/css_tutorial/

1. Guide
2. Reference
3. Recommended by ZenGarden

http://www.kernelthread.com/miscellaneous/devnagri.html

This is a sample URL that you can click on to see how the end of result of his styling is. This is by no means the best of his pages. Perhaps one of his simplest.

My goal for this page is to emulate the bottom part and the nice purplish color

In the process, I will post here below copies of his style sheets from his web site verbatim. This should work as example style sheets.

I think it is best to learn style sheets by looking at working examples. This usually true in any language be it Java, or c++ or CSS once you have a basic understanding of the concepts. It might be a stretch to take it to the natural languages perhaps.

basic.css

As I analyze this page. I will write more

old.css

As I analyze this page. I will write more

This page is included here to show you how the above quoted css files are included in the html page. As you have noticed I have replaced all less than signs with two (( and all the greated than signs with two )). This is lot more easier than managing html inside html.

http://www.kernelthread.com/about/

http://www.westciv.com/style_master/academy/css_tutorial/selectors/index.html

This is an example page for analyzing and understanding style sheets. Following this entry you will see the entries for

• The style sheet that is used to style this page
• The source code for the page

This page is the source code of that page

Style sheet

.question {font-weight: bold } (solitary class selector)
p.question {font-weight: bold} (regular class selector)
body {font-weight: bold} (element selector)
p#question { font-weight: bold} (ID selector)
ul li strong  {font-weight: bold} (descendent selector)
ul.mylist li strong {font-weight: bold} (descendent selector for a class)
ul#mylist li strong {font-weight: bold} (descendent selector for an ID)
div>p {} (child selector)
a {}
a:link {} (psuedo selector)
a:visited{}
a:hover{}
a:active{}
p:first-letter {} (psuedo selector)
p:first-line {}
h1:before {}
h1:after {}
h1, h2, h3 {} (Group selectors)
p.introduction:active, hover,  focus {} (Dynamic psuedo selector)
p:first-child {}
strong + em {} (adjacent selector)
(some-selector) a[title] (attribute selector)
(some-selector) a[title="somevalue"] (attribute selector)

Use this url

click here

http://www.ich.ucl.ac.uk/gosh_families/ask_dr_jane_collins/tips/toys.htm

Expert advice
Clarity
Folders as topics

CDATA format

<style>

/* css comments */

.someclass
{
 attribute1:value;
 a2:value;

/* More css comments */
 attribute1:value;
 a2:value;

}

/* More css comments */
</style>

http://web.tampabay.rr.com/bmerkey/examples/css-buttons2.html

css buttons
styling check boxes
Scrollable tables
Hovering
...

Desiging right hand gutters

Example of formating a table.

<div class="writing-guide">
<hr style="border:none 0;height:1px;">
<hr style="border:none 0;height:1px;border-top:1px dashed green;">
<hr style="border:none 0;height:1px;">
</div>

This code will produce

css running notes

CSS Samples, Cheat sheet, Quick Guide

Use tables to provide page layouts for master pages on web sites. Although divs with CSS is preferred there are some issues that I am not happy about using CSS

http://digitalmedia.oreilly.com/articles.csp

Pleasing colors
Pleasing fonts
Apple like texture

http://support.microsoft.com/?scid=kb;en-us;258785#kb2

http://futurefreak.co.uk/catalog/information.php?info_id=10

blue pastel colors
rounded corners
Apple like look

http://www.oxygenxml.com/

fonts
backgrounds
divs
rounded corners
promotions
payments

http://www.poetry4kids.com/index.php

Pastel blue backgrounds
Well presented content
Not too busy not too crowded
Pictures to guide

In ie background-color:"blue" is OK. But in mozilla you have to say it without the quotes around the color: background-color:blue. I am not sure why I have used the quotes to begin with. But now I know not to use the quotes.

I was also pleasantly surprised to see this site which is originally styled in ie stood up quite well in mozilla 6 except for the color discrepancy. Nevertheless there seem to be some diffrences in divs and empty spaces. I will post these findings as I uncover them.

http://support.microsoft.com/default.aspx?scid=kb;en-us;199243

Hide/show html divisions
Good for menus
Good for master pages
More content can be shown

http://www.metzener.com/srv/

Search google

css content url :before

firebug for chrome?

<link rel="stylesheet" type="text/css" href="/akc/style/style.css">

Recently I wanted to create a block menu in my html pages. I want this block menu to have a header indicating the category of the menu and a set of menu items. There may be more than one way of doing this exercise. There may also be a better way of doing the same. But here is how I have done it and it seem to work well for now.

http://www.w3schools.com/html/html_colornames.asp

Color names
Actual colors

http://msdn.microsoft.com/letters/default.asp

2001 article
Menus on top or side
Case for side menus
DHTML side menus
Good for master pages

Key sites to look at patterns

http://www.kantega.no/kurs/kursliste/kursinfo.asp?thisId=1017732924

On Collapsing Margins

On Position

Optimizing Chrome

http://pluralsight.com/wiki/default.aspx/Keith.GuideBook.HowToDevelopCodeAsANonAdmin

I have struggling with this for 2 days. I searched far and wide in google and msdn etc. No luck. Hope one of you may have seen this. I am seeing this in ie6 and ie7

What I want

**************

1. A table with a single cell that is say 100px wide, laid out from left to right.

2. I want to put an image in it and set its width to 100px as well

What I expect

******************

I see the image that is shrunk in width to 100px wide.

Instead I see

*******************

1. I do see the image shrunk to 100px

2. But I see the width of the "td" increased to 500px which is the size of the actual image

So what is CSS LESS?

http://www.htmlcenter.com/tutorials/tutorials.cfm/62/CSS/

P { text-transform: uppercase }
P { letter-spacing: 0.1cm }
H1 { word-spacing: 1em }
P { text-shadow: black }
A:link, A:visited, A:active 
{ text-decoration: none|underline|overline|line-through|blink }
P { text-indent: 3em }
P { alignment: center|left|right|justify }

W3C tutorial

Tableless layout HOWTO

http://www.w3.org/2002/03/csslayout-howto

Why tables for layout is stupid:

problems defined, solutions offered

http://www.hotdesign.com/seybold/

CSS techniques:

Look Ma, No Tables.

http://glish.com/css/

Tables My Ass

http://www.htmldog.com/ptg/archives/000049.php

Tables Vs. CSS - A Fight to the Death

http://www.sitepoint.com/article/tables-vs-css?ct=1

You also miss a good session with a HTML validator.

W3C Quality Assurance tutorial

My Web site is standard! And yours?

http://www.w3.org/QA/2002/04/Web-Quality

I was surprised recently to learn that a local private school still uses Netscape 4.7 on their macs. Unmoved by the onslaught of overwhelming ie stats there are still quite a few 4.7 installations out there.

The implication might be that table based styling might be better if the other reasons doesn't rule it out.

Contains the css for

three-column-mp-ver1.css

It is quite tedious and frustrating to get a decent page layout for a site in CSS. I wanted something that has three columns that uses all the space available with out fixed sizes as much as possible.

As it turned out almost after a week I may have something that works as I intended. Here is an example.

You can see the html here. You can use viewsource to see the html

You can see the CSS used for it here. You can use viewsource to see the html

Contains the css for

three-column-mp-ver2.css

It is quite tedious and frustrating to get a decent page layout for a site in CSS. I wanted something that has three columns that uses all the space available with out fixed sizes as much as possible.

As it turned out almost after a week I may have something that works as I intended. Here is an example.

You can see the html here. You can use viewsource to see the html

You can see the CSS used for it here. You can use viewsource to see the html

twitter facebook google icons