Making beautiful business applications

brackets and coffee – a discussion about encapsulation and syntax for CSS, Javascript and HTML

As discussed in my previous posts, having a good foundation for understanding the layout language HTML, we are now able to move on to actions and styling – CSS and Jacascript. Before we do, here is a short summary of what we have learnt:

  • HTML is a layout language – it’s about the placement of your coffee in the cup
  • For all layout related things, we need an opening and closing tag – The coffeecup needs to know where to start and when to end
  • Tags are nested – like cups inside of one another
  • There are layout tags, typography (font related tags), and some others we have not covered (they are a bit advanced)

so, now I think it important to talk about encapsulation and brackets. When I talk about encapsulation, I refer not to the coding principle as much as to the idea of grouping things from a syntactical level.

Defining syntax in normal language:


Think of syntax as grammar. If your grammar is weird, people might think you are insane or illiterate. Your computer will break as well if you do not speak its grammar! So here is some terminology things: When you speak to the computer in code, it has a language syntax/grammar. The interpreter (sometimes referred to as the compiler) tries to make sense from what you are saying. If it cannot understand what you are saying, it probably will throw a syntax error

What I mean by that, is that we use certain things (brackets) for grouping and splitting the code in a way to help up understand what is going on. Under the hood the computer translates this into 0’s and 1’s. But we don’t have to know how or anything. This is called syntactic sugar.

In language we use full-stops to group our information in sentences. Sometimes we even use new lines for new paragraphs! In coffee we use cups to limit the flow of the coffee, and sometimes a lid that limits the place where the coffee flows out of. Most languages has ways in its syntax to limit statements (sentences). Most of the layout languages (of which HTML is one and XAML is another) and styling has a start and closing thing.

As discussed previously, HTML has opening and closing brackets. This tells the compiler when to start and when to end  – it’s like the coffee machine that knows when to start and stop pouring milk. CSS has a much shorted way – it uses mini brackets, called curly braces. Javascript has a few, as it is able to do loads more



We have come across these brackets before, haven’t we…? These brackets are for HTML, XAML and XML. These are called tags. Here is an example:

The coffee is what the tag is called. The slash “/” tells the compiler that this is the closing thing. If you dont add the slash in, it thinks you are creating another coffee!

<coffee> </coffee>

Squirly brackets/braces are used in CSS and Javascript. They are used to encapsulate (group) a set of data.

In CSS (the styling language of the web) these are used to tell the compiler starting and ending locations of the styles for the specific element (called a rule). Look at the below code –  we have two rules that are encapsulated each with their own styles

color: brown;


color: white;


Square brackets are used in more codey languages than layout and styling languages. This is used to show a list/group of something. In uber codey language this is called an array. You are able to add and take things out of an array. I could have a list of all my coffee ingredients. A best use case in cofee would be something like this:


var coffee = ["milk", "instant coffee", "hot water", "sugar"];

The brackets tells the compiler that this is the start and the end of an array. the semi colon is like the fullstop. It tells the compiler that this line is now complete. It’s like a sentence [where i have some stuff, but the fullstop ultimately – yes, altumately – closes the sentence off].


Rounded corners will be done in the next post, as you need to know a bit of background in understanding this. :)


So, in a nutshell – brackets are there for opening and closing things for the computer. It tells them where to start and when to stop understanding things.


Leave a Reply

Your email address will not be published. Required fields are marked *