Published in



Finding Zen in the CSS Zen Garden

Photo by Sean Stratton on Unsplash

Not going to lie, I don’t remember learning a whole lot of CSS (Cascading Style Sheets) in the flurry of Ruby and JavaScript at Flatiron School. Maybe the CSS files were available for me to look at in some labs if I wanted to see what was under the hood. In any case, we were given a quick rundown of CSS before jumping into our JavaScript final projects, as well as a quick rundown of bootstrap.

My project was functional but the CSS was definitely lacking. I was able to add background colors and fonts; and kind of move things around but things are not quite where I want them to be. I really struggled with layout and figuring out which selector/element I needed to grab and values I needed to use to achieve the desired effect.

Bootstrap might not have been the wisest move either. I thought it would make things easier for me than to just do CSS from the ground up. Instead, I really struggled to understand the grid system.

So, I’m going to take the time to learn by doing and to examine what these properties and values of CSS are capable of with the CSS Zen Garden.

Basic Terminology

Selector — the HTML element(s) selected to have a CSS Declaration and/or CSS Declaration Block
Class Selector — select all elements with the same class name
=> use a ‘.’ before the class name; .classname
ID Selector — to select only 1 element with a given id (each element should have a unique id)
=> use a ‘#’ before the id name; #idname
Property — name of the qualities that can be styled; ie color, text-align, font
Property Value — words and/or numbers that define the Property
=> ex: for a color property, can list ‘pink’ or #ffc0cb (the hexadecimal code)
CSS Declaration — a property with a value; ex: color: pink
=> use a CSS Declaration with a Selector to apply it to HTML element(s)
CSS Declaration Block — where 1 or more CSS Declarations is associated with a Selector
=> the declarations are wrapped in curly braces { }
=> each declaration within the block MUST be separated by a semicolon (;)

h1 {
color: pink;
font: georgia;


1/ Download the sample files from CSS Zen Garden and name them index.html and index.css. These will be the originals to view the visual examples of what we’re trying to mimic. To open in browser, type in command line ‘open index.html’.

2/ Make a copy of index.css and rename it to test.css (or whatever you’d like).

3/ Create a blank test.html file (I found it easier to have it named similar to the css file to avoid confusion). To open in browser, type in command line ‘open test.html’.

4/ Link the test.css file in the <head> of the test.html file.
<link rel=”stylesheet” href=”test.css”>

5/ Copy each element (or subset of elements) from the master index.html file and paste it appropriately in the test.html file. Refresh the browser to see the new results.

6/ Look at the test.css file and see the properties that correlate to this element. Observe where and how things are placed in the browser.

7/ Google/lookup any properties you’re unfamiliar with. Here’s a good website:

8/ Play with different property values to see the changes in the browser.

First bit of code in test.html
What it looks like in browser when not linked to CSS file
When it’s linked to the CSS file

What I Learned Along The Way

1/ There are a couple ways to include CSS into an HTML file. Here, I’m using an external style sheet file linked to the html file via the <link> element in the head section. It seems to be the best for large amounts of CSS.

2/ Elements can have a class and id as well as a role attribute.
ex: role=“banner”; role=“article”

A role attribute is used for accessibility, device adaptation, server-side processing and complex data description.

From what I can gather, it seems that the role attribute serves as a more exact verbiage to describe the purpose of the HTML element than the alt attribute.

Other examples of role:

More are listed on the W3C website.

In regards to accessibility, if a link is used but it functions more like a button, screen readers can say “button” as opposed to “link”.

Accessible Rich Internet Applications (WAI-ARIA) is mentioned a lot. Seems worthwhile to look into sometime.

3/ I found it interesting that a selector would include the parent and child element. For example…


<header role=”banner”>
<h2>The Beauty of <abbr title=”Cascading Style Sheets”>CSS</abbr> Design</h2>


header h2 {
background: transparent url( no-repeat top left;
margin-top: 58px;margin-bottom: 40px;width: 200px;height: 18px;float: right;text-indent: 100%;white-space: nowrap;overflow: hidden;}

4/ Also, I knew the value of the background could be a color but I did not know it could be an image.

5/ The overflow property indicates what to do if the content “overflows” the element’s “box”.

6/ Another thing I notice here was an “abbr” element within the h2 tag. Never seen this before. It’s the Abbreviation element. It can have a title attribute to describe the abbreviation or acronym.

Hmm… I see the advantage of making abbreviations more readable. In regards to CSS, you can style all abbreviations a certain way throughout the whole page.

abbr {color: green;border-bottom: none:}

What Now?

There are still some questions I have about CSS/HTML and some things I’m struggling with like layout techniques, grids, flexbox and so on.

I successfully recreated the Zen Garden website. Next, I want to customize it with my own layout, colors, fonts, imagery etc.

Zen Garden Recreated



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonelle Noelani Yacapin

Jonelle Noelani Yacapin

Certified Sommelier and Flatiron School Software Engineering Grad