Not a member? Why not join us or log in? (No more hassle filling in comments, less obtrusive ads and asides.)

Branding your CSS Stylesheets

Posted by Johan on October 20th, 2007.


http://

Johan has posted 26 articles.

RSS Feed for fadtastic.net RSS Feed for Johan

Full Profile →

I am not sure this is only a fad that has following in the web standards community; since CSS is part of their world. What am I talking about? Designers that add the color scheme of their personal website to their stylesheets. What motivates them? Let’s scratch the surface a little bit… On the one hand you could say it is emotional: to give a personal touch to the stylesheet - a cold piece of code - of their blog or website, on the other hand you could see it as part of branding; color combinations are part of branding. There is even more ground that makes designers add the color scheme to the top of their stylesheet. People steal/copy often entire stylesheets and often these rip offs appear on the web without any modification. Stylesheets are free to use, and designers allow people to use their stylesheets. A common unwritten rule of thumb in the web standards community. But the colors used in that stylesheet, in that particular combination needs to be protected. You cannot steal all … Here are some examples of stylesheets that include color schemes using hex code and/or their textual equivalent.

Example 1: Modular

Roger Johannson http://www.456bereastreet.com

/*
456 Berea Street Main style sheet
Copyright 2006 Roger Johansson
Last edit: 2007-01-27
*/

/*
=Colours
Dark green headings (Main articles): 8A8E27
Light green headings (Home page sections): 828368
Green headings (Secondary): 578A1C
Green border colour: b6c8b0
Links: AE4F0C
Link hover: D03900
Heading link border: cfcfa0
Beige background colour: f1efe7
Light green background colour: f4f6e0
*/

Example 2: two colors

Jonathan Snook http://www.snook.ca

/*

#036 - dark blue
#C60 - orange
*/

Example 3: Theme based
Dave Shea http://www.mezzoblue.com

/*
-- -- -- -- -- -- --
mezzoblue v6 colour CSS file
'Fountain' style

Colour scheme: Peering – — – — – — –
*/

Will this not so old fad gain following, or will it water down completely? Only the future will tell.

update: the discussion has now been extended to copyright notices, humorous side notes, and other forms of personalizing a style sheet. I am not interested in style sheets that make them more readable e.g. dividing a style sheet into sections for easier maintenance.

Make A Comment

( 33 so far )

blockquote and a tags work here.

33 Responses to Branding your CSS Stylesheets

Comments RSS Feed

Really it’s just for easy access to the colors.  Rather than searching for your link color hex code by doing a find for a:hover, you can just grab a copy/paste from the header of the file.

Travis Vocino
October 20th, 2007
#

I do this sometimes, but it has nothing to do with my ego or branding. It simply makes it easier for me to use the colors if they are notated in the style sheet. That way I don’t have to go back to my graphics program to look up the codes.

Steve Rose
October 20th, 2007
#

A color glossary/style guide could well be the case in example 1 and 2, but example three does not mention the hex code at all.

Veerle Pieters from veerle.duoh.com mentions the unique combination of colours etcetera at the top of the stylesheet. But no trace of hex codes at all.

See here

/* You may adapt and learn from the elements of this CSS to use in your own
projects, but you may not copy the design (the unique combination of images,
colors, sizes, typography, and positioning) since this is copyright of Veerle Pieters
and Duoh! n.v. and may not be reproduced.
------------------------------------------------------------------*/

I can see the use of putting the color hex codes and their textual equivalent during development, but after I think it can be erased…

In any of the provided examples you can see that stylesheets are personalized by the designer, for a client website it would be
perhaps different.

Another great example from collylogic.com

/*
Worst CSS organisation in the world - I'm just fiddling and adding and messing with it all the time. Built at Agenzia by Simon Collison 2003. Sorry its not annotated or in a sensible order but I am trying to save some whitespace for a rainy day. agenzia.co.uk
*/

It does mean that in any of the examples stylesheets are personalized, they are after all personal websites. Branding is about identity, and designers clearly love to add these snippets to a stylesheet of their website.

Johan
October 20th, 2007
#

We comment our other code so why not CSS. I agree that for the most part when i do this it’s so I don’t have to search the code and remember what I called all of my declarations to find the right colour.I used to include a copyright notice and an updated date but sometimes forgot to change the updated date so just let the file system handle that for me.And sure part of the reason to add your name may be vanity but as designers and coders do we ever really get recognition for our work? Sometimes you have to do a little bit of self-promotion to get you through. :P 

Tyroga
October 21st, 2007
#

[…] 2 - » Branding your CSS Stylesheets » fadtastic - a multi-author web design trends journal […]

Another example of a copyright notice put at the top of the style sheet, in this case a WP theme copyright notice.

Theme Name: Ayers
Theme URI: http://www.robertnyman.com
Description: Ayer’s Rock theme
Version: 1.0
Author: Robert Nyman
Author URI: http://www.robertnyman.com/

This one is like the mezzoblue example, adding a theme.

Johan
October 21st, 2007
#

The notation Snook used for hex values is especially useful when you’re adding additional classes to an existing stylesheet and want to re-use a color but you don’t remember the hex value and don’t feel like searching the CSS. Instead, you can go straight to the top of the document (your "table of contents") and identify them by name: Brick red, royal blue, etc. A good time-saver. I’ve always used a table of contents in my CSS just to break it into chapters: Structure, Headers, Forms and so on. Another example of a copyright notice put at the top of the style sheet, in this case a WP theme copyright notice. Good Wordpress themes should always contain the URI / description / copyright info in the header of the stylesheet. It’s also what feeds the information displayed here under Presentation->Themes. 

Darren Hoyt
October 22nd, 2007
#

I’ve been doing this for a while now. Mainly for my own branding purposes, and to give me a 50,000 feet view of the work I’ve done if I revisit something after 6 months./* Stylesheet Information IndexWebsite: http://www.whatever.com/Filename: websitename_screen.cssAuthor: Justin Kozuch (email address stripped to foil spammers)Revision: 1.0Stylesheet Media: ScreenDescription: Primary stylesheet for the (client name) website.CSS Document Table Of Contents1. General CSS Declarations2. H* CSS Declarations3. Site Container CSS Declarations4. Header CSS Declarations5. Left Content CSS Declarations6. Right Content CSS Declarations7. Footer CSS Declarations————————————————– */

Justin Kozuch
October 22nd, 2007
#

[…] the details here Filed under: […]

It can help in development proccess, but I tried it sometimes and the designer used a lot of color variations… So it doesn’t help me, because in the end of the CSS production I have a big list of colors with small variations on blue, orange, for example.I think this technique can be helpfull with just a few examples of color.

Carlos Eduardo
October 22nd, 2007
#

I’m glad I’m not the only one.  My main reason for having the color scheme in my css is to easily reference it when writing the code.  It only took me creating a few websites without doing that to realize that it would be much easier to add the colors to the CSS.  It never really had anything to do with branding.  I just wanted to make my life easier.  How many trends in web design are started that way, I wonder?

Carissa Miller
October 22nd, 2007
#

It’s an excellent tip and saves all those jumping back and forth into Photoshop.Purely by coincidence, I spotted  the use of this on 456BereaStreet at the beginning of the month and wrote a similar post here http://www.dave-woods.co.uk/?p=97 :) 

Dave Woods
October 23rd, 2007
#

I need to do this. Not for branding or copyright protection or anything, but I can see that for finding colors used in a given thematic, having them spelled out like that could be very helpful.

Mike Cherim
October 23rd, 2007
#

Stylesheets aren’t free to use/copy as suggested in the article. In the UK at least, they are subject to the same copyright rules as everything else, which means they don’t even need a copyright notice to be protected. Where it gets difficult is in deciding whether something is original or not. I think it would be fair to say that one colour couldn’t be copyrighted but it could easily be argued that a combination of three or four, covering particular elements, could well be considered protected because there are so many different possibilities. It is very tricky though, because if I see a nice colour combination then I might well want to copy it, but I wouldn’t want to steal from the original designer. The same dilemma happens in books. I don’t think even Warner Brothers could stop me from writing a book about a character called Harry Potter, a retired miner from North Wales who now runs a ballroom dancing class and runs in marathons. (not a lot of people know that tm stands for totally meaningless).   

Richard Morton
October 23rd, 2007
#

In the second example, John Snook’s web address is pointing to mezzoblue.com - probably a cut-n-paste accident.

Mark
October 23rd, 2007
#

I’ve been annotating mine for a year or so already, I find it useful to look back on old work and seeing the date, what the project was and more in a header comment. I also enjoy a little ascii art sometimes haha.

Paul
October 23rd, 2007
#

@Mark: Thanks and good spot. Post edited on behalf of Johan.

Andrew Faulkner
October 23rd, 2007
#

I’ve been doing something similar for a while but only for my own reference.  There of course will be other variations of these colors throughout the site, but these are the go-to hex values that I don’t want to have to search for, so if they are at the top of the stylesheet they’re easy to find: /*    ##   mimoYmima screen v.4    ##   Updated: Sept 30, 2007    ##   brent@mimoYmima.com        - - - Color Reference - - -    Logo Orange: #F2C125; Orange Text: #F90;    Nav Blue1: #8DDCFF; Nav Blue2: #4AD3F4;    Web Blue: #6CF;    Light Blue: #CBE5FF;    sky blue: #A5D3F3;    Active Link Yellow: #FFC;    sand tan: #E5DFC1;*/

Brent
October 23rd, 2007
#

This really identifies a significant short fall of CSS actually ( CSS variables). These should really be variable assingments rather than comments

Chris Blown
October 24th, 2007
#

[…] sign their stylesheets? After all, they’re the Web site’s “work of art.” Fadtastic looks at how to brand CSS stylesheets. Meryl | Friday, October 26th | […]

Should we put the wrong colors in comments at the top, to try to throw a wrench in the works of unscrupulous designers? (a joke)I’m not sure what problem you’re aiming to fix.  Should we not have color/copyright info in the comments, and why not?

Dave
October 26th, 2007
#

/* ,;-. ,((–\). / \ | | | | (,’"`. ,’"`.) : \/ ; `.o ,’`. o,’ (|`>’`–’`<’|) ,-, ,. |/ \| ,-./ / _ | \,-. ( ) | `-’`–. ( `’ (_/|__ \ (o / ,-’ ,-’ ; ) ,|`. - ,’|. `-. ) \ | ( ,-’ _/ `-.`""’,-’ \—. / ; | | ,-’ \ /\ / \ | |–/ | | |_,| / \/ \/ \/\ | | | ` \ | \ / ,’ | \ | | / _,’ : \ , `/——’ `-.___,—’) `. ,’ \ / \ : : | _,| \–.___ __,–’ ; `. `"""""""’ ,’ | | | .____, | | | | | | | | | | | | | | | | | | | | | | |-._____,-|-.____,-| |_ |_ | ,’ `——’| `—–’ \ / _|_ \ `–._____,-’ `-.___,-’ */Sometimes homer says it all.. Anyone for comedy comments?

Paul Anthony
October 26th, 2007
#

Eek. That did look like homer simpson when I posted it. :(

Paul Anthony
October 26th, 2007
#

While it may not be popular in css circles, but I use php with css to simplify colors by making them variables — I demonstrate that here: http://sperling.com/examples/pcss/

tedd
October 28th, 2007
#

While it may not be popular in css circles, but I use php with css to simplify colors by making them variables — I demonstrate that here: …

The discussion here is not about how you define your colors in CSS or add colors at the top for easier maintenance, but why you would add the page color scheme for a personal reason. Stating that unique combination of colors, leaving a signature, personalising the stylesheet.

Johan
October 28th, 2007
#

[…] Johan van den Rym: Branding your stylesheets […]

Wochenendbeilage | REDUXO
November 2nd, 2007
#

if you use  #C60 in your css, then firefox renders it as light orange while safari - for example - correctly displays it as blue. Also I usually write the color code as 3-digit numbers (expecially the gray colors) but sometimes, for better accessibility, it’s a good idea write them completely. #C60000 orange#000036 blue 

uomoartificiale
December 10th, 2007
#

Да уж, судя по комментариям тут на сайте, никому не повредит умение ярче выражаться, поддерживать интересную беседу, быть остроумным в конце концов… :)

Эрик
May 31st, 2009
#

Touch Tea,responsibility extra extent only colleague human grey attend knee link concentration link full few will attractive onto creation say module deep invite odd forward ready advantage central effective part reveal protect less crowd cover link thin reduce farm teacher fresh module iron ticket considerable finally cabinet revenue expectation examine trouble during master clear employment mind operate against seem she inside their clear conclude normal wind end exchange decade power legal choose environment check behaviour afford as bit measure property search order total sum general payment relation view

Baseother
December 6th, 2009
#

[…] Branding Your CSS Stylesheets – Johan […]

I just love to do ballroom dancing specially during my free times. dancing is my passion.:”"

Makayla Gonzalez
May 24th, 2010
#

In ballroom dancing, my favorite dance is Rumba and the Flamenco.~**

Julia Mason
June 17th, 2010
#

↑ Jump up to the comment form

Related In Some Way, Shape Or Form

The above post has obviously kept you amused. Why not discover similar material:

The posts Web 2.goo goo gah gahFlash and AccessibilityDesigning brand identity: book reviewBrand Review: Identity for Celebrity / Kate MossBrand Identity: What’s Your Threat Level? | Small Business Marketing & Branding, are related to this post.

Or why not take time out to find out about the author of the post.