CSS

0) CSS Samples, Cheat sheet, Quick Guide (27-May-14)

CSS Samples, Cheat sheet, Quick Guide

1) css running notes (22-Jul-13)

css running notes

2) twitter facebook google icons (20-Jul-13)

twitter facebook google icons

3) Comments in css (13-Jul-13)

<style>

/* css comments */

.someclass
{
 attribute1:value;
 a2:value;

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

}

/* More css comments */
</style>

4) Key sites to look at patterns (12-Jul-13)

Key sites to look at patterns

5) CDATA format (10-Jul-13)

CDATA format

6) On Collapsing Margins (28-Jun-13)

On Collapsing Margins

7) On Position (28-Jun-13)

On Position

8) A quick refresher on CSS selectors (8-Mar-13)

.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)

9) So what is CSS LESS? (11-Jun-12)

So what is CSS LESS?

10) Optimizing Chrome (21-May-12)

Optimizing Chrome

11) firebug for chrome? (18-Apr-12)

firebug for chrome?

12) Suggested Basic reading for CSS (29-Dec-07)

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

13) Problem with fixed width table with an image in it (29-Dec-07)

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

14) three-column-mp-ver2.html (28-Dec-07)

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

15) three-column-mp-ver2.css (28-Dec-07)

Contains the css for

three-column-mp-ver2.css

16) three-column-mp-ver1.html (28-Dec-07)

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

17) three-column-mp-ver1.css (28-Dec-07)

Contains the css for

three-column-mp-ver1.css

18) CSS example table formating (27-Dec-07)

Example of formating a table.

19) A sample master page (27-Dec-07)

Use this url

click here

20) Styling text through CSS (22-Dec-07)

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 }

21) how to include a style sheet in an html page (6-Jul-06)

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

22) css designing right hand gutters div (23-Jun-06)

Desiging right hand gutters

23) Cool css utilities (12-May-06)

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

css buttons
styling check boxes
Scrollable tables
Hovering
...

24) CSS Styling a table for page lay outs (15-Nov-05)

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

25) 20.00 CSS Related content (29-Jul-05)

The content for 20.xx is dedicated for CSS.

26) css: Another nice product based site (5-Jun-05)

http://www.oxygenxml.com/

fonts
backgrounds
divs
rounded corners
promotions
payments

27) css: nice layout for children sites (3-Jun-05)

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

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

28) css: Another example site (29-May-05)

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

blue pastel colors
rounded corners
Apple like look

29) css: A lesson in styles from O'Reilly photography site (20-Feb-05)

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

Pleasing colors
Pleasing fonts
Apple like texture

30) css: An example in styling from microsoft support site (11-Feb-05)

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

31) CSS for creating writing guides for children (11-Oct-04)

<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

32) css: New atlanta communications (1-Oct-04)

33) html: color names (26-Aug-04)

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

Color names
Actual colors

34) Possible formatting for code segments (9-Aug-04)

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

35) An example site for master pages (2-Aug-04)

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

Expert advice
Clarity
Folders as topics

36) Find more about before and after psuedo tags (21-Jun-04)

Search google

css content url :before

37) Ideas in web navigation - MSDN (12-Jun-04)

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

38) Dynamically Display and Hide HTML Elements Using Style Sheet Properties: from MSDN (12-Jun-04)

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

39) Nice light blue background (8-Jun-04)

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

40) There are a bunch of people that still use Netscape 4.7 (18-Feb-04)

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.

41) Differences in specifying color in ie and mozilla (18-Feb-04)

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.

42) Few more cross references for CSS (12-Feb-04)

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

43) How to style a simple block menu in HTML using CSS (23-Jan-04)

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.

44) 20.44 Westciv reference for selectors source page (12-Jan-04)

Style sheet

45) 20.42 Westciv reference for selectors source page (12-Jan-04)

This page is the source code of that page

46) 20.40 Westciv reference for selectors. (12-Jan-04)

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

47) 20.28 Here are Amit's words about using CSS on his site (10-Jan-04)

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

48) 20.26 HTML source code where the above css files are used (10-Jan-04)

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.

49) 20.24 ui/old.css (10-Jan-04)

old.css

As I analyze this page. I will write more

50) 20.22 ui/basic.css (10-Jan-04)

basic.css

As I analyze this page. I will write more

51) 20.20 An effort to emulates Amit Singh's website (10-Jan-04)

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.

52) 20.15 The complete CSS guide (12-Dec-03)

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

1. Guide
2. Reference
3. Recommended by ZenGarden

53) 20.14 Eric Meyers edge (12-Dec-03)

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

A fairly invovled treatment on CSS

54) 20.13 ZenGarden referenced by KillerSites (12-Dec-03)

http://www.csszengarden.com/

55) 20.12 CSS Tutorial 3 (12-Dec-03)

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

Explanation of the styles that were used.

56) 20.11 CSS Tutorial 2 : CSS explained (12-Dec-03)

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

57) 20.10 CSS Tutorial 1 (12-Dec-03)

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