Lightspeed Template Bootcamp Series (Lesson 2)

Adrian SamuelAdrian Samuel Moderator, Lightspeed Staff Posts: 569 moderator
edited May 2018 in Tips, Tricks & How-to’s
Lesson 2- Cascading Style Sheets (CSS)

Plainly said, CSS makes the web attractive and accessible. Both things are essential for an engaged customer base.

CSS is made up of selectors and declarations. A selector is a way of identifying specific HTML elements in order to control its styling

A CSS declaration is made up of a property and a value.

An example of this can be seen below:




In the above the selector is h1. So we’ve specified that all the

tags in the document should have a particular property and value associated with it.
In this instance “color” is the property and “red” is the value. The colour of red and should be aligned to the center of the element it is contained in.

Let’s add some more styling to make our table look more attractive

The result is this:


1. I’ve assigned the table a width of 100% so it spans the entirety of the container (width: 100%)
2. I then placed a small one pixel border around the table, the table head and the table data elements to give it a cellular feel (border: 1px solid black)
3. I then collapsed the joint-borders to give a cleaner feel to the table (border-collapse: collapse)
4. I then Aligned the elements of the table data and table head to the center (text-align: center)
5. I then added 10 pixels worth of spacing to the table-head and table data tags (padding: 10px)

CSS can be deceptively simple at first but it promises to present some unique challenges…especially when your canvas is the browser screen

If you want to see the structure of the HTML document as well as seeing what styling is applied to it you want to open up your browser’s Web Developer Inspector



I’m using the Mozilla Firefox browser, let me show you how to find it:



Below shows me what happens when I select and hover over the element on the page:



You can learn more about CSS from Mozilla’s documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS

Instead of simply selecting the HTML element, you can also assign them classes and IDs.
A class is a name you assign to a group of elements to style it in a similar way. An ID is something you assign to an element to style it uniquely

Writing styles can help you make your CSS styles re-usable and clean

An example of how to write classes and IDs can be found below

Extra Tip:
Instead of simply selecting the HTML element, you can also assign them classes and IDs.
A class is a name you assign to a group of elements to style it in a similar way. An ID is something you assign to an element to style it uniquely

Writing styles can help you make your CSS styles re-usable and clean

An example of how to write classes and IDs can be found below:



We note classes are specified in the HTML document with a “.” and IDs are selected in the document with a “#”.
The table isn’t pretty, but it is used to show how we can uniquely style certain HTML elements and not others. This gives us complete control over the layout of the page.

Next Lesson

Previous Lesson


Post edited by Adrian Samuel on

Adrian Samuel

API Integrations Consultant - Strategic Solutions

Lightspeed HQ

Sign In or Register to comment.