The WATB Beginners Guide to CSS

7 min read
Watb Team
Lines of CSS code

CSS is the language that allows us to style the web, without it the internet would be very different. Rather than a programming language, CSS is what is correctly known as a “style sheet language”. This means it is a descriptive language that dictates to a computer how a structured document should be styled.

In this post, we thought it’d be great to explain a few basic concepts of CSS, how it works and how we use it at WATB.

Basic CSS Structure

So how does CSS work? It’s actually refreshingly simple in terms of syntax compared to programming languages, or even HTML. CSS generally looks something like this:

h2 {
font-weight:normal;
font-size:38px;
}

h3 {
text-transform:uppercase;
font-weight:bold;
font-size:14px;
margin:0 0 2rem;
}

What does all this mean? Let’s break it down.

The first thing you will read is the term “h2”. This is what is commonly known as an Element. Elements are written in HTML as Tags, and are used to give a page structure. They tell the web browser which text is a title, or a paragraph. They also give semantic meaning to a web page, essentially they are what allow browsers to interpret the information correctly.

When an element is written in CSS, it is known as a Selector. This is because sometimes selectors are not HTML Elements, so there is a need for a different term.

In HTML, the h2 would be written like this:

<h2>Some title goes here</h2>

It’s important to understand that when the h2 is surrounded by angled brackets, this is colloquially known as a tag. Browsers read the tags and then parse them as elements, these elements are then associated with your CSS. This is why we do not write the angled brackets in CSS.

The second thing you will notice is a curly bracket. You’ll also notice that after some text is a closing curly bracket. These brackets mark the beginning and the end of what is commonly known as a Declaration Block. Within that block, we have multiple Declarations. A declaration consists of a CSS Property followed by a Value. The property will relate to a specific aspect of the aesthetic of the selector you are applying it to. In the example above, we are applying two declarations to the h2 selector, font-weight and font-size. Specifically, we are telling the browser to style the h2 element using a normal font weight (usually this means not bold) and a font size of 38 pixels.

When we write a rule in CSS, we split the property and value with a colon, and we use a semi-colon after each declaration. The colons and brackets are especially important in helping the browser interpret the CSS correctly.

In the image below you can see an illustrated example of the concepts explained above.

CSS Rule

To recap:

  • CSS consists of rules.
  • Each rule then consists of a selector, with declarations wrapped in curly brackets.
  • Each declaration consists of a property and a value.
  • Multiple declarations are known as a declaration block.

CSS Specificity

The nature of CSS is that the browser reads your code from top to bottom – much like we read as humans. This explains the name, as the Cascading in Cascading Style Sheets hints to this nature.

The implication of this is that as the browser reads down the style sheet, if you have multiple rules that target the same selector, the rule furthest down in the code will override the previous rules.

Specificity itself however refers to how different selectors are afforded different weights. These weights dictate to the browser which rules to ignore or which rules to imply.

Within CSS there are four different categories of selector which affect that selectors specificity:

  1. Inline styles – These are styles attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
  2. IDs –  a type of identifier for page elements, such as #header.
  3. Classes, attributes and pseudo-classes. This group comprises .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
  4. Elements and pseudo-elements. Psuedo elements are elements that are not written in HTML but exist in the browsers Document Object Model.

How is a selectors specificity weight calculated?


This is done by adding up different values, with the values coming from the categories of selector above.

Beginning at zero, add 1000 for an inline style, add 100 for each ID, 10 for each attribute, class or pseudo-class, 1 for each element name or pseudo-element. For example:

body #content .data img:hover {}

The specificity value for the selector above would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.

If you want to read more about CSS Specificity, this article on Smashing Magazine explores the concept in more depth: http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

How we use CSS at WATB

CSS is incredibly important to us, it allows us to turn plain text and images into beautiful and engaging websites. It allows us to give web pages a structure that makes them easy and friendly to use, whilst at the same time we can apply class and style that are so important for the brand image of all our clients.

CSS does, however, have its limitations.

  • Size – CSS stylesheets are much larger than before. This makes them difficult to work with.
  • No programming tools – We can’t use variables in CSS, or write loops, like we can in languages such as JavaScript.
  • Selector Inheritance – the nature of how CSS cascades can make ensuring the correct rules are applied incredibly difficult in large style sheets.

There are other limitations, but those were the main issues we were encountering. Since 2007 however, and growing in popularity since, we now have new languages known as “CSS Preprocessors”. These languages extend CSS giving in greater capability and solving some of its limitations.

The most popular CSS Preprocessor, and the one we use at WATB, is called SASS which stands for Syntactically Awesome Stylesheets. SASS gives us many benefits that CSS doesn’t offer. When we write SASS, we then use a special tool which converts our SASS into normal CSS.

Sass Benefits

Nesting

Sass allows us to nest rules within other rules. Nesting allows us to write tidier stylesheets that are easier for humans to interpret and read. Example:

.logo {
margin:2rem 2.1875rem;
width:154px;
height:38px;
display:block;
img {
height:38px;
}
}

As you can see, our img element selector rule is written inside the curly brackets of the rule for the .logo  selector. When we do this, the nested rule then only applies to elements that are contained within the parent selector element in our HTML document. The resulting CSS is then as follows:

.logo img {
 height: 38px;
}

Variables

Variables allow us to use terms to represent values throughout our style sheets, with each term assigned a value. You then only need to change the value once, and this change is applied wherever you are using the variable. For example:

$pink:#FE94BB;

We can now use our variable throughout the styles, as follows:

a.go__forward {
background:$pink;
}

When the Sass is then compiled into CSS, it would look like this:

a.go__forward {
background:#FE94BB;
}

Loops

Loops allow us to repeat a certain rule or declaration until a certain condition is meant, normally a number. You might want to loop a declaration 50 times, for example. An example of a Sass loop could be:

@for $i from 1 through length($colors) {
   #cp#{$i} {
       background-color: rgba(nth($colors, $i), 0.6);
   }
}


As you can see, by involving loops we are also complicating how we write CSS in the sense that the author now needs to have a greater understanding of how code is written, and ideally needs knowledge of programming. We have moved on from simply writing declarations, as at the beginning of this post.

Further Reading

Hopefully by now you have a basic understanding of what CSS and how it is written, as well as a brief introduction to CSS Preprocessors and how we use them at WATB. If you would like to find out more, then the following links are useful.

HTML Dog Beginners Guide to CSS

Mashable Beginners Guide to CSS

Sass Basics

Sass Guidelines

CSS is the language that allows us to style the web, without it the internet would be very different. Rather than a programming language, CSS is what is correctly known as a “style sheet language”.

Social Media Management Software

In order to promote your business and reach consumers that spend an entire 24 hours a week online, you need to make sure that you have a viable social media strategy in place.

By posting unique and interesting content on your social media platforms, and by actively engaging with followers, you can start to turn this into a funnel for generating leads.

In order to stay on top of your social media strategy, it’s important to have some form of social media management software to do some of the heavy lifting. Software such as this is imperative for scheduling, tracking and monitoring social media content.

At its best, social media management software can help you not only plan your content months in advance, but also remain reactive by letting you tune into ongoing news stories or trending topics.

Screenshot of Hootsuite's homepage

We recommend: Hootsuite

There are a whole bunch of social media management companies out there and all of them offer roughly the same sort of package but Hootsuite is the only one that offers an actually free service (as opposed to just a free trial period).

They do try to hide it on their website though so make sure you follow this link in order to get to the right page.

The free version of this software lets you:

  • Manage up to three social media profiles from a choice of channels including Facebook, Twitter, Instagram, Pinterest and LinkedIn
  • Schedule up to 30 posts in advance at any point in time
  • Track follower growth, likes and comments
  • Integrate two RSS feeds in order to find and share compelling content
  • Access Hootsuite’s online help center and community forum

Of course, there’s also a number of paid-for packages that you can buy from Hootsuite that give you access to a great number of services including higher ad spend budgets, automated post scheduling and custom analytics.

But if you’re a small business looking to get started, the free version of the software should be comprehensive enough to allow you to get your social media strategy in motion.

Website Tracking Software

We’ve said before that the secret to a successful lead generation strategy is to keep analysing and refining your methods. Well, website tracking software is the best way to conduct this analysis.

By digging into the analytics of your visitors’ actions, you can start to gain a better picture of why people come to your site, what they want from it, what they dislike about it and how you can improve upon their experience next time.

There are a wide variety of services that can fall into the category of website tracking software, including heatmaps, funnels, user polls, surveys, visitor recordings and more.

Basically, any kind of software that collects data about the ways in which your visitors interact with your site can be considered website tracking software.

Screenshot of Hotjar's homepage

We recommend: Hotjar

Whereas there are a multitude of smaller software companies that focus in on just one website tracking service, Hotjar offers an array of useful tools.

Hotjar tools include:

  • Click, move, scroll, download and share heatmaps that can also be split by device type
  • Visitor recordings that allow you to replay sessions of real site visitors
  • Conversion funnels that identify on which page and at which step the most visitors are leaving your site
  • Form analysis that can help you to discover which fields take too long to fill, which are left blank and why your visitors abandon your form and page
  • A customizable widget that allows you to create pop-up feedback polls
  • Responsive surveys that can be distributed through web links and emails, or featured your site just before your visitors abandon the page in order to discover what their concerns are
  • The ability to recruit test users in order to get instant feedback on your site

Hotjar’s free service is able to collect data from 2000 page views a day and will give you access to up to 300 visitor recordings and 3 heatmaps, forms, funnels, polls and surveys. Unlimited users can be added to your account and Hotjar will also store your data for a full year.

While we’d normally recommend free services when possible, it’s probably worth paying for Hotjar’s Plus plan to begin with.

For just under £25 a month you can collect data from 10,000 page views a day and have unlimited services and reports. Plus there’s even a 15-day free trial for you to test out whether you like their software or not.

Remember

Lead generation doesn’t have to be an expensive endeavour.

What’s important is that you put real effort into all of your interactions with potential leads - whether that’s through educational and informative blog posts, social media interactions or even just a chat on the phone.

If you believe in your business’ ability to help its customers then all you have to do is let that shine through.

Ultimately, these tools are just there to help you meet potential leads on their level. The rest is up to you.

Related Posts

Posts you may also like