"What if? Why not? Challenge the Convention! Let's do some incredible things!" More Quotes
Home
About/Contact
Twitter
Aspire/J2EE
Github
Pro Android 4
Our Android Books
Lookup Meaning
look up
more ..
Stuff I used to do
java.net Blog
At O'Reilly
Articles
Humanities
Humanities Current
Humanities 2007
Telugu related
Shells
Books
Music
Letters
Recipes
Jax Restaurants
Java
J2SE/J2EE/JSP
Portlets
Research
OSCON 2004
Download OSCON 2004 Presentation
OSCON 2003
Magazines
Dotnet
FTP
Industries
Supply Chain
Health
Home Public Library Author Content
CSS Samples, Cheat sheet, Quick Guide
css running notes
twitter facebook google icons
<style> /* css comments */ .someclass { attribute1:value; a2:value; /* More css comments */ attribute1:value; a2:value; } /* More css comments */ </style>
Key sites to look at patterns
CDATA format
On Collapsing Margins
On Position
.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)
So what is CSS LESS?
Optimizing Chrome
firebug for chrome?
Tableless layout HOWTO
http://www.w3.org/2002/03/csslayout-howto
problems defined, solutions offered
http://www.hotdesign.com/seybold/
Look Ma, No Tables.
http://glish.com/css/
http://www.htmldog.com/ptg/archives/000049.php
http://www.sitepoint.com/article/tables-vs-css?ct=1
You also miss a good session with a HTML validator.
My Web site is standard! And yours?
http://www.w3.org/QA/2002/04/Web-Quality
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
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
three-column-mp-ver1.css
Example of formating a table.
Use this url
click here
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 }
<link rel="stylesheet" type="text/css" href="/akc/style/style.css">
Desiging right hand gutters
http://web.tampabay.rr.com/bmerkey/examples/css-buttons2.html
css buttons styling check boxes Scrollable tables Hovering ...
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
The content for 20.xx is dedicated for CSS.
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
http://futurefreak.co.uk/catalog/information.php?info_id=10
blue pastel colors rounded corners Apple like look
http://digitalmedia.oreilly.com/articles.csp
Pleasing colors Pleasing fonts Apple like texture
http://support.microsoft.com/?scid=kb;en-us;258785#kb2
<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
http://www.newatlanta.com/corporate/index.jsp
http://www.w3schools.com/html/html_colornames.asp
Color names Actual colors
http://pluralsight.com/wiki/default.aspx/Keith.GuideBook.HowToDevelopCodeAsANonAdmin
http://www.ich.ucl.ac.uk/gosh_families/ask_dr_jane_collins/tips/toys.htm
Expert advice Clarity Folders as topics
Search google
css content url :before
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
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.kantega.no/kurs/kursliste/kursinfo.asp?thisId=1017732924
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.
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://www.metzener.com/srv/
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.
Style sheet
This page is the source code of that page
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
http://www.kernelthread.com/about/
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.
old.css
As I analyze this page. I will write more
basic.css
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.
http://www.westciv.com/style_master/academy/css_tutorial/
1. Guide 2. Reference 3. Recommended by ZenGarden
http://www.meyerweb.com/eric/css/edge/
A fairly invovled treatment on CSS
http://www.csszengarden.com/
http://www.killersites.com/Tutorials/CSS_tutorial/cssTutorialPage3.htm
Explanation of the styles that were used.
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/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