Hello CSS

Who doesn’t like to look good?

CSS is one of the more well-known coding languages associated with the internet, so chances are, even if you’re not a coder, you’ve heard it name-dropped if you’ve been around us. You’ve definitely noticed if a CSS file is missing on a site — have you ever gone to a page and just seen plain, ugly black text on white? Big stupid bullet points and blue links? That is the look and feel of HTML without CSS.

Raw HTML is ugly, mad oogs. CSS is used to take that rawdog ugliness and put it in whatever outfit we want for the Big Date With Your Browser. HTML relies on CSS the same way that we rely on clothes… it’s embarrassing to be caught in public without them. And if you’re going to wear clothes… look good!

Ze Origin of Style

(C)ascading (S)tyle (S)heets, or CSS, have been around almost as long as HTML, it was conceived of by Håkon Wium Lie in 1994 and the first standard was introduced by the W3C in 1996. It allows for the separation of styles from content and structural code, meaning that you can make edits to the rules for a document’s visual presentation with zero destructive impact on structure or content.

Before CSS, if you wanted to “style” an HTML document, you had to manually assign things like font and color, it was very depressing. Consider this archaic nonsense:

HTML

<h1><font size="32px" color="blue">I am the old way. I am depressing.</font></h1>

/* This won't even render correctly in a modern browser, nor should it * /

And let’s say you have to style multiple elements on the page? A few headers and dozens of <p> tags? You have to do that mess on each one. Change the color or adjust the font size? Yup, each one. Even using bulk search-and-replace, it is a massive pain in the butt, and the more you have to edit your tags, the greater the chance for an error that will break your document.

We use rules defined in CSS to avoid this kind of nonsense, let’s do something more like:

CSS

h1 	{	
	font-size:32px;
	color:blue;
}

HTML

<h1>I am the modern method. See me shine.</h1>

As they say in British crime movies: “Same rules apply”, just delivered in a far more flexible means. It doesn’t matter if there is only one <h1> tag or fifty of them, all will share the rules we have defined here in CSS.

...if you don't look good...

CSS is awesome because it simplifies the task of controlling styles on larger sites. The more pages and post sections, the more content blocks, the more areas requiring styles. A website can have thousands and thousands of pages, but the rules for the header are always the same and can always be found in one place.

Let’s say that your company’s website wanted to do something a little more festive for a holiday — orange and black highlights for Halloween or red and green for Christmas. You could create an alternate CSS file with the holiday color scheme and have it rotate in and out with the standard file. The site looks festive and you look ninja.

Breaking the Waves

HTML elements can be visually manipulated and controlled via CSS. This can be done with a reference to certain elements, a certain class or a specific element identified by ID. A single element can inherit many rule sets, and there is a hierarchy of dominance for how these rules apply.

Here’s how different rule sets can layer onto several instances of a single element in varying combinations:

CSS

/* rules apply to all h2 elements */

	h2 			{	
		color: #666;
		font-size:24px;
	}	


/* rules apply to *any* elements with class "subtitle" in document */

	.subtitle		{
		border-bottom:1px dotted #aaa;
	}


/* rules apply to all h2 elements with class "subtitle" in document */

	h2.subtitle	{	
		font-size:18px;
		text-transform:uppercase;
		letter-spacing:0.3em;
	}	


/* rules apply to h2 element with the id "sub" in document */

	h2#sub		{	
		color:red;
	}	


/* rules apply to any element with the id "sub" and the class "subtitle" in document */

	h2#sub.subtitle 		{	
		color:green;
		font-size:32px;
	}

HTML

<h2>I inherit the rules from straight-up h2</h2>

<h2 class="subtitle">I inherit the rules from .subtitle and h2.subtitle</h2>

<h2 id="sub">I inherit the rules from h2#sub</h2>

<h2 id="sub" class="subtitle">I get it all</h2>

/* Important!!! One should only use unique id's in markup, for reused rules we use classes. I am totally cheating in this example. 😀 * /

They are referred to as “cascading” style sheets due to these waves of inheritance, beginning with the most general and growing into the more specific. Root elements and ID’s will trump classes, so if you look at an element like <h1 id="id-name" class="class-name">, the font-size defined for the class .class-name will be over-ruled by font-size defined for <h1> or the ID #id-name. An element will trump an ID (<h1> > #id-name, but h1#id-name will trump both.

This concept of ‘trumping’ only comes into play if there are styles in conflict, if the same rule is being defined in multiple places and applied to the same element. The art and the elegance is in knowing where styles should live and how they should weave together.

In practical terms, we set the universal rules at the <html> or <body> level, things like background color, font face, size and color. There is usually a main content container of some sort, this defines the width of the site, or the maximum width in more modern, responsive builds. The big four after that are generic headers (<h1>–<h5>), generic body copy rules (<p>, <li>), generic link rules (<a>) and generic image rules (<img>).

Beyond that, we’re getting into specifics that have to do with larger structural elements for the page, and before we get into all that, we should look at how you can nest styles inside of styles for more fine-tuning in our definitions.

Stacks on Stacks

One of the really cool things about CSS is that you can drill down through “branches” of the HTML structure to target particular elements. This is one of the keys of how the two languages work together, you can target styles specific to a page’s header (NOT the <head> above the <body>) or footer, the main content area or the sidebar.

Let’s look at an example where we have two <div>‘s with some filler content. Each of these has a class, and we’ll use the class to target child elements.

CSS

div 	{
	display:block;
	margin-bottom:18px;
	padding:18px;
	border:1px solid #ccc;
	color:#999;
}

a 			{	color: red;	}

h3 			{ 	font-size: 24px; 	}

ul 			{	color: #bbb;	}

p, li 		{ 	font-size: 16px; 	}

div.one h3 	{	color: green;	}

.one h3 	{ 	color: black; 	}

.two h3 	{	color: black;	}

.two 		{	border-color: red;	}

.two ul 	{	color: red;		}

.two ul li 	{	color: blue;	}

.two a 		{	color: green;	}

.two p a 	{	color: blue;	}

HTML

<div class="one">

	<h3>Header One</h3>

	<p>I am a paragraph. I sit here with words. I may even have <a href="javascript:alert('hiya');">a link</a>.</p>
	<p>In addition to paragraphs, we like bullet lists two.</p>
	
	<ul>
	
		<li>bullet list item</li>
		<li>bullet list item</li>
		<li>bullet list item</li>
	
	</ul>

</div>

<div class="two">

	<h3><a href="javascript:alert('hiya!')">Header Two, with link</a></h3>

	<p>I am a paragraph. I sit here with words. I may even have <a href="javascript:alert('hiya');">a link</a>.</p>
	<p>In addition to paragraphs, we like bullet lists two.</p>
	
	<ul>
	
		<li>bullet list item</li>
		<li>bullet list item</li>
		<li>bullet list item</li>
	
	</ul>

</div>

There’s a lot happening here, so let’s break it down. The div has some layout rules, padding and a border, and our generic content color. Then we define our generic link, header and body sizes, and bullet list color. Then we start targeting items by their parent div’s class. Both of the headers are defined as black, but display as green. Even though .one h3 appears after div.one h3 in the list, the color rule is trumped because div.one ties the class definition to a specific element — .one is a generic class that could be anything. With .two h3, the color rule is trumped by the one for .two a, and since the <a> is the child of the <h3>, its color rule wins.

Much like in life, the children come to dominate the parents. This is the same reason why the <li> tag under div.two and the <a> tag under div.two p both render as blue, they are being targeted through their parent elements, these rules over-ride the basic definitions for their elements.

The Full Monty

Okay, it’s time for the full meal deal, and this one comes with a biscuit. You can copy and paste this into an new file in a text editor, save it as example.html, and drop that file onto a browser, and it will work as you see it here. This is a complete HTML document, with CSS rules in the <head> section using a <style></style> pair.

HTML

<html>
	<head>
		<title>Holy Crap This Works</title>
		<style>
			* 	{
				margin:0;
				padding:0;
			}
			body 	{
				background:green;
				font-size:100%;
				font-family:sans-serif;
			}
			.container 	{
				display:block;
				max-width:600px;
				margin:0.8em auto;
				padding:20px;
				background:#fff;
			}
			h1, h2 	{
				font-size:1.4em;
			}
			p 	{
				font-size:1em;
			}
			h1, h2, p 	{
				margin-bottom:0.8em;
			}
			h2 	{
				margin-top:1.6em;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1>I am the easiest responsive web page evah</h1>
			<p>Lorem Ipsum Dolor Sit Amet.</p>
			<p>Lorem Ipsum Dolor Sit Amet.</p>
			<h2>Just keep it all flexible yo</h2>
			<p>Lorem Ipsum Dolor Sit Amet.</p>
			<p>Lorem Ipsum Dolor Sit Amet.</p>
		</div>
	</body>
</html>

What we have here is a browser-ready structure for two chunks of content; Two headers, each with two following paragraphs. All rules for presentation are in the document head, and we can add more content knowing that, just as Brick Top taught us, “Same Rules Apply”.

Let’s go down those pieces in the CSS line by line for the breakdown on what these rules are doing in the structure:

CSS

/* remove default margins and padding in the HTML, they look horrible */

* 		{ 	margin:0; padding:0;	}


/* our body background is going to be green, our font size is standardized, */
/* and our font face has been set to browser generic sans serif. */

body 	{ 	background:green; font-size:100%; font-family:sans-serif;	}


/* the item with class "container" gets display set explicitly to block, it has a */
/* declared maximum width of 600 pixels and left and right margins are set to 8 */
/* auto. This will center the item, and it will never expand past 600px wide in the */
/* browser. With a white background and 20px of padding, our content area */
/* will be more legible against the green background. */

.container 	
		{ 	display:block; max-width:600px; margin:0.8em auto; padding:20px; background:#fff;	}


/* Uniform font sizes in the headers */

h1, h2 	{ 	font-size:1.4em;	}


/* Declare font size for copy elements */

p 		{ 	font-size:1em; 		}


/* Uniform following margin for all content items */

h1, h2, p 	
		{ 	margin-bottom:0.8em; 	}


/* Add a bit of space before the second chunk of copy */

h2 		{ 	margin-top:1.6em; 	}

A couple of things to notice here. First, we are only applying rules to .container, not div.container. The difference is, .container is a class that we can apply to any element, div.container is narrowing that class down to something that is only applicable to div elements. So in this case, you could apply the same rules to any other item merely by adding the .container class to them.

Also, notice that we are applying one set of rules to multiple elements, the font size is being applied to both header tags and the following margin is being applied to all content tags. Sometimes, especially with things like element spacing and margins in a document, it helps to add a single rule across multiple items. That way, a single changed value can affect the flow and feel of the entire layout of your document.

Mirror Check

We love CSS because it allows us to get true beauty in the browser. It makes it easier to control swathes of styling over large ranges of code. And the best part is, if you’ve built out your HTML cleanly, you can apply a different set of rules via CSS and have a result that looks like a totally different website.

CSS veterans can see the polishing and precision, so don’t beat yourself up if you find yourself fine-tuning your styles. We all do it. And the real beauty of it is when you find yourself feeling the elements coming into balance. Just like the solid outfit of the example, solid styles don’t need to be intricate, just right for the occasion.

So how do you look?

CSS, Intros

Resources & Tutorials

Best Practices & Examples

Breakfast at Tiffany’s is property of Paramount Pictures.

Image used without permission for editorial purposes only.
Any image will be replaced at request of property owner.

Share on

Hello CSS

Ze Origin of Style

HTML

CSS

HTML

Breaking the Waves

CSS

HTML

Stacks on Stacks

CSS

HTML

The Full Monty

HTML

CSS

Mirror Check

Resources & Tutorials

Best Practices & Examples

Your name:

Your email:

Your phone:

Your Skype ID:

You are a:

Looking for:

Deets:

Your name:

Your email:

Your phone:

Your Skype ID:

This concerns:

Deets:

Good time to talk :

Your name:

Your email:

This concerns:

1st Pick Time/place: