CSS

From Wikipedia Cascading Style Sheets:

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.[2]

Syntax

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.^[3]

In CSS, selectors are used to declare which part of the markup a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, to elements specified by attribute, or to elements depending on how they are placed relative to, or nested within, others in the document tree.

Pseudo-classes are used in CSS selectors to permit formatting based on information that is outside the document tree. An often-used example of a pseudo-class is :hover, which identifies content only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. A pseudo-class classifies document elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as :first-line or :first-letter.^[4]

Selectors may be combined in many ways, especially in CSS 2.1, to achieve great specificity and flexibility.^[5]

Here is an example using the above rules:

selector [, selector2, ...] [:pseudo-class] {
 property: value;
 [property2: value2;
 ...]
}
/* comment */

 

NEWS CONTENTS

• 20060928 : Example pd stylesheet from a Google letter ( Sep 28, 2006 )
• 20060925 : Text-transform: uppercase -- can render title in upppercase ( Sep 25, 2006 )
• 20060909 : My 50 favorite design resources ( My 50 favorite design resources, Sep 9, 2006 )
• 20060909 : CSS tips and tricks at The Blog Herald ( CSS tips and tricks at The Blog Herald, Sep 9, 2006 )

Old News ;-)

[Sep 28, 2006] Example pd stylesheet from a Google letter

<STYLE>
BODY {
	FONT-FAMILY: arial,sans-serif
}
TD {
	FONT-FAMILY: arial,sans-serif
}
FONT {
	FONT-FAMILY: arial,sans-serif
}
P {
	FONT-FAMILY: arial,sans-serif
}
A {
	FONT-FAMILY: arial,sans-serif
}
</STYLE>

[Sep 25, 2006] Text-transform: uppercase -- can render title in upppercase

<style>
<!--
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
-->
</style>

[Sep 9, 2006] My 50 favorite design resources/CSS Galleries

Sometimes it can be hard to come up with design inspiration. CSS galleries are a great place to get design inspiration and they can also be leveraged as a great source of traffic. If you can get your design on these galleries it can drive thousands of visitors to your website.

Unmatchedstyle
cssBeauty
cssvault
Stylegala
CSS Drive
css thesis
Styleboost
CSSElite
CSS Import
Web Creme
CSS Mania
DesignShack

Comments

...I generally go to the CSS Zen Garden every once in a while just to check out what people have been doing recently...

...can i suggest the marvelous http://cssplay.co.uk ...

...Don't forget dafont.com, they have almost 7000 fonts, most of them free ...

[Sep 9, 2006] CSS tips and tricks at The Blog Herald See comments section for amendments and corrections.

Sep 8 at 9:18 pm by Ben Bleikamp -

Welcome visitors from Digg. The Blog Herald is one of the largest sites covering the blogosphere - and has been so for more than four years.

You can subscribe to our feed and visit our archives for more stories.

I've been writing CSS for about 2 years now and I still feel like every time I open up a blank file and begin writing CSS for a new design I learn something new.

For those of you that are new to CSS or experts always looking for a new trick, here are some of things I do on a regular basis to keep my code organized (kind of).

1. Size text without using pixels: rather strange idea. Why pixels are bad ?

If you're wondering how some designers get font sizes to work using em as a unit rather than px, it's easy. There is a trick that was written about a while ago (maybe on ALA) that resets the font sizes for the entire site so that 1.0em is the same as 10px.

body { font-size: 62.5% }


Simply throw the font-size: 62.5% bit into your body styling and you're done. Now you can use ems to sizes your fonts rather than pixels.

So your paragraph styles might look something like this:

p { font-size: 1.2em; line-height: 1.5em; }

You might be wondering why it matters how you size fonts? Bulletproof design. Any major site needs to be able to withstand a user enlarging text (old people use the web too!), and setting absolute sizes is not good practice.

2. Make your code easy to read

When I was looking at some of the CSS coded by Rundle I noticed that he separated his heading tags nicely. It looked something like this:

h1 {}
h1#logo { font-size: 2em; color: #000; }
h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }


Quickly scanning the CSS for the different heading tags is a breeze if you use this technique. It is also helpful if you're sharing code or working on a large site where you are using the same heading tags (say, h2) in multiple places since you'll be able to style each one independently and not worry about child classes inheriting attributes from the parent class.

I also use similar techniques for paragraph tags, anchor tags, and any other tag that requires multiple classes to look correct in every instance.

3. Separate code into blocks

This might be common sense to some of you but sometimes I look at CSS and it's not broken down into "sections." It's easy to do an it makes working with code weeks, months, or years later much easier. You'll have an easier time finding classes and elements that you need to change.

This is how I usuall break down my site:

/* Structure */

This is where I'd put the primary site structure divs and classes.

/* Typography */

This is where I would list things like paragraphs, headings, and other miscellaneous font styles such as small and strong tags.

/* Links */

This one is simple - all the styling for anchor tags.

/* Lists, images, etc. */

This is where I would style images, lists, and any other elements that didn't fit into the rest of the section. If I have an unordered list for the navigation I might setup a new section for navigation and setup all the styles for the navigation, including the list and link styles, in this section - it makes editing the navigation much easier.

4. Stop using so many divs! [that's really good recommendation - <div> abuse is simply rampant]

This has been echoed by a lot of coders and standards nuts, and while I don't think there is anything wrong with using a lot of block level elements, I laugh a little when I see someone style their article headlines using a div rather than a heading tag. Some people even style their bylines using a div! Try using the small tag or the a span for goodness sake.

5. Style everything at once: [Might be problematic, see comments "You can but watch out" and about 5]

I noticed that I was typing "margin: 0; padding: 0;" in just about every element. I remembered seeing someone use "*" to style everything on a page at once. I decided it didn't make much sense to define margin and padding over and over when I always gave them the same parameters.

It's easy to do:

* { margin: 0; padding: 0; }


Now you only have to define margin and padding on elements where you actually want some.

Know of any other tips or tricks? Let me know :)

Comments

====

The default size of text in browsers is 16px and 62.5% of 16px is 10px. By bringing the default size down to a managable whole number like 10 (instead of 16) you can now easily do font-sizes in em units without busting out your calculator. 15px is 1.5em, 12px is 1.2em and so on. Without dropping the default size to 10px (62.5% of default) to start you'd be stuck doing multiples of 16 which isn't fun.

===

Kinda good tips, but if you will I have a few caveats to add to them (which I've picked up in my 5+ years of css):

1) While non-pixel based font sizing is definitely the way to write your css, there is one (IE) caveat. If you set the font-size of the body below 100%, IE has a problem with text-zooming. The work-around is to set your body to 100% explicitly and 62,5% on your div-container (or similar div).

3) Yep. I noticed that Douglass Bowman puts an extra line of ==== underneath the section title, tit really improves legibility. So you'd get:

/* Structure
======== */

4) Absobloodylutely!

5) You *can* but watch out:

Everything really does mean everything. This means that you have to explicitly set padding&margin for everything, as you can't depend on browser defaults anymore. I have found this to be more hassle than it's worth.

A better alternative would be to simply list the block elements you want pad&marginless like so:
div, form, etc {pad:marg:}

There are ready-made stylesheets which do this for you, ready to be included. (But as I don't use them, I don't have any links to them unfortunately)

====

- Please don't define the same tag/class/id/etc. multiple tmes under different sections. If you're very familiar with the CSS file in question, it's probably really useful. But if someone else is trying to update a file you've written, it can become extraordinarily confusing when you think you've "found" the style definition you want to edit, and not realize you're not seeing the whole definition. This cost me about two hours of work just last night, as I was working on a new blog template based off of an existing one.

- Include a "Table of Contents" area in comments at the top to give someone new to the file an idea of how the styles are grouped

====

believe the following link is the first time I saw mention of the margin/padding reset at the beginning of a css file. Just fyi, so if this is where you read it originally, i'm sure he'd appreciate the props from a credit link:
http://leftjustified.net/journal/2004/10/19/global-ws-reset/

===

if you do that you loose the "natural spacing" that all elements have in the browser. That means that two paragraphs following each other won't have the natural spacing that the user might expect so you'll have to manually add this yourself.

If you're working on large'ish site you as a CSS designer can't predict all the kind of HTML use there will be on future pages. Sooner or later someone will try to edit a page but all padding has gone away. I've seen this many times and I hate it.

Don't f**k around too much with the way browsers work. If you break the conventions of spacing in what always matters the most, content, you'll end up annoying the readers because it feels unfamiliar.

My 2c

===

As long as you wanna make textsizing easy, why not do this?
body { font-size: 6.25% }

Then 12px text = 12em. (At least I think so, Im tired)

CSS specification-browser support page General Syntax

Both Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0 support layers created using the DIV and SPAN tags. Only Navigator supports layers created with the LAYER and ILAYER tags. Earlier versions of both browsers will display the contents of a layer, but will not position them.

In Dreamweaver, the term layer refers to any element that can be positioned at exact coordinates on the page. Positioning properties include left and top (x and y coordinates, respectively), z-index (also called the stacking order), and visibility. Positioned elements can be defined with the DIV, SPAN, LAYER, and ILAYER tags in Dreamweaver. See Layer preferences.

At 12:47 PM 08/10/97 -0800, [email protected] wrote: > > I read that the Netscape LAYER tag was turned down by W3C for > inclusion in HTML v4. This seems unfortunate as it was a very > powerful tool for information presentation. See <http://www.w3.org/TR/WD-html40/intro/intro.html#h-2.3.1> for why the LAYER element does not belong in HTML. > From what I can see there > is no other way to do the sorts of thing I want in HTML This is correct. Presentation is best specified in a style sheet, not in HTML. The Positioning extensions of Cascading Style Sheets provide the functionality of Netscape's LAYER element, with the added bonus of support from Microsoft (in addition to Netscape). See <http://www.w3.org/TR/WD- positioning> for more on CSS Positioning.

• DevEdge Online Codestock - JavaScript -- very important document
• Description of the LAYER tag
• WDVL Cross-Browser Dynamic HTML Resources
• Basic DHTML for Netscape Navigator
• Transitioning from LAYER, document.layers[], and document.all to W3C Standards
• Renza HTML help <LAYER>
• Layer
• Cascading Style Sheets- Positioning with CSS2 Tutorial
• New Communicator 4 Style Properties
• O'Reilly Network- Extending the Mozilla Editor
• CH9.html
• Full Contents Javascript book -- copy on the Web

All of the more than 400 examples in the book have an associated BBEdit HTML Sample file on the CD-ROM in the folder named DHTML-JS_BOOK-Main_Files. Each of these files starts with the word "Sample" and are intended to be run on the Netscape Navigator/Communicator browser. You can also check out the source code for copying/pasting or alteration in any text editor. If you work on a Macintosh, you might want to get the BBEdit text editor from Bare Bones Software, which is specifically designed to work with HTML and other types of coding.

Netscape's homepage on the web is:

http://home.netscape.com/

Netscape's "DevEdge" (Developer Edge) on the web is:

http://developer.netscape.com/index_home.html?cp=hom07cnde

Netscape's "DevEdge - Library" on the web is:

http://developer.netscape.com/docs/manuals/index.html

Bare Bones Software's homepage on the web is:

http://www.bbedit.com/

The CD-ROM also contains a wealth of additional information of a technical nature on a variety of subjects including HTML 4.0 white papers, Netscape's final HTML 4.0 Guide, JavaScript 1.2 and 1.3 References and Guides.

See the last two pages of the book, after the Index, for more information about the contents of the CD-ROM.

Recommended Links

70 Expert Ideas For Better CSS Coding CSS

Cascading Style Sheets - Wikipedia, the free encyclopedia

Etc

Society

Groupthink : Two Party System as Polyarchy : Corruption of Regulators : Bureaucracies : Understanding Micromanagers and Control Freaks : Toxic Managers :   Harvard Mafia : Diplomatic Communication : Surviving a Bad Performance Review : Insufficient Retirement Funds as Immanent Problem of Neoliberal Regime : PseudoScience : Who Rules America : Neoliberalism  : The Iron Law of Oligarchy : Libertarian Philosophy

Quotes

War and Peace : Skeptical Finance : John Kenneth Galbraith :Talleyrand : Oscar Wilde : Otto Von Bismarck : Keynes : George Carlin : Skeptics : Propaganda  : SE quotes : Language Design and Programming Quotes : Random IT-related quotes :  Somerset Maugham : Marcus Aurelius : Kurt Vonnegut : Eric Hoffer : Winston Churchill : Napoleon Bonaparte : Ambrose Bierce :  Bernard Shaw : Mark Twain Quotes

Bulletin:

Vol 25, No.12 (December, 2013) Rational Fools vs. Efficient Crooks The efficient markets hypothesis : Political Skeptic Bulletin, 2013 : Unemployment Bulletin, 2010 :  Vol 23, No.10 (October, 2011) An observation about corporate security departments : Slightly Skeptical Euromaydan Chronicles, June 2014 : Greenspan legacy bulletin, 2008 : Vol 25, No.10 (October, 2013) Cryptolocker Trojan (Win32/Crilock.A) : Vol 25, No.08 (August, 2013) Cloud providers as intelligence collection hubs : Financial Humor Bulletin, 2010 : Inequality Bulletin, 2009 : Financial Humor Bulletin, 2008 : Copyleft Problems Bulletin, 2004 : Financial Humor Bulletin, 2011 : Energy Bulletin, 2010 : Malware Protection Bulletin, 2010 : Vol 26, No.1 (January, 2013) Object-Oriented Cult : Political Skeptic Bulletin, 2011 : Vol 23, No.11 (November, 2011) Softpanorama classification of sysadmin horror stories : Vol 25, No.05 (May, 2013) Corporate bullshit as a communication method  : Vol 25, No.06 (June, 2013) A Note on the Relationship of Brooks Law and Conway Law

History:

Fifty glorious years (1950-2000): the triumph of the US computer engineering : Donald Knuth : TAoCP and its Influence of Computer Science : Richard Stallman : Linus Torvalds  : Larry Wall  : John K. Ousterhout : CTSS : Multix OS Unix History : Unix shell history : VI editor : History of pipes concept : Solaris : MS DOS :  Programming Languages History : PL/1 : Simula 67 : C : History of GCC development :  Scripting Languages : Perl history   : OS History : Mail : DNS : SSH : CPU Instruction Sets : SPARC systems 1987-2006 : Norton Commander : Norton Utilities : Norton Ghost : Frontpage history : Malware Defense History : GNU Screen : OSS early history

Classic books:

The Peter Principle : Parkinson Law : 1984 : The Mythical Man-Month :  How to Solve It by George Polya : The Art of Computer Programming : The Elements of Programming Style : The Unix Hater’s Handbook : The Jargon file : The True Believer : Programming Pearls : The Good Soldier Svejk : The Power Elite

Most popular humor pages:

Manifest of the Softpanorama IT Slacker Society : Ten Commandments of the IT Slackers Society : Computer Humor Collection : BSD Logo Story : The Cuckoo's Egg : IT Slang : C++ Humor : ARE YOU A BBS ADDICT? : The Perl Purity Test : Object oriented programmers of all nations : Financial Humor : Financial Humor Bulletin, 2008 : Financial Humor Bulletin, 2010 : The Most Comprehensive Collection of Editor-related Humor : Programming Language Humor : Goldman Sachs related humor : Greenspan humor : C Humor : Scripting Humor : Real Programmers Humor : Web Humor : GPL-related Humor : OFM Humor : Politically Incorrect Humor : IDS Humor : "Linux Sucks" Humor : Russian Musical Humor : Best Russian Programmer Humor : Microsoft plans to buy Catholic Church : Richard Stallman Related Humor : Admin Humor : Perl-related Humor : Linus Torvalds Related humor : PseudoScience Related Humor : Networking Humor : Shell Humor : Financial Humor Bulletin, 2011 : Financial Humor Bulletin, 2012 : Financial Humor Bulletin, 2013 : Java Humor : Software Engineering Humor : Sun Solaris Related Humor : Education Humor : IBM Humor : Assembler-related Humor : VIM Humor : Computer Viruses Humor : Bright tomorrow is rescheduled to a day after tomorrow : Classic Computer Humor

The Last but not Least Technology is dominated by two types of people: those who understand what they do not manage and those who manage what they do not understand ~Archibald Putt. Ph.D

The statements, views and opinions presented on this web page are those of the author (or referenced source) and are not endorsed by, nor do they necessarily reflect, the opinions of the Softpanorama society. We do not warrant the correctness of the information provided or its fitness for any purpose. The site uses AdSense so you need to be aware of Google privacy policy. You you do not want to be tracked by Google please disable Javascript for this site. This site is perfectly usable without Javascript.

Last modified: March 12, 2019