What is Cascading Style Sheets?

Table of Contents
CSS stands for Cascading Style Sheets. These are used when building webpages. Before we discuss CSS though, we must understand HTML. Web pages are usually created using HTML – Hypertext Mark Up Language. HTML is used to instruct the browser (e.g. Google’s Chrome or Apple’s Safari) on what and how to display a web page. This is done via the use of ‘tags’. HTML tags were invented by Tim Berner’s Lee and made public in 1991. There is a World Wide Web Consortium (W3C), which works to develop recommendations on how to develop web pages. These recommendations are continuously being updated, to enhance web design. The latest is HTML 5, released as a ‘W3C Recommendation’ in late 2014. HTML tags are relatively easy to understand and use. They are enclosed in chevrons <> to open and to close. A simple example is one that you may already be familiar with:

Heading 1.

. This will display a Heading 1. For lower level headings, we simply replace the 1 with 2 and so on. The tags also provide for displays such as paragraphs; lists; italics; bold and even buttons. HTML documents generally follow a structure; much like other programming languages. HTML can be typed on your computer using a text editor such as Notepad. It is then saved as an html document, which when opened with a browser will show a web page. Our examples shown here are displayed using Chrome. Let us look at an example:

1.      Create First Page

freewebsite whatisccs The HTML source code for the web page above is shown below:
  1. – this tells the browser that the document is in HTML
  2. – this opens a section for meta data – this tells the browser about the page; the information here is not usually visible on the webpage
  3. – this will not be visible
  4. Home Fred – although in the head, this is displayed as the title of the page
  5. Fred’s website

  6. Hi, my name is Fred.
  7. This is my story.
Let us now add a (simple) navigation menu:

2.      addListforNav

fredswebiste 2 what is css The additional HTML source code for the page above is shown below:   an unordered list an unordered list  
  • Home
– list item  
  • About Fred
– as above  
  • Contact Fred
– as above  

3.      addImage

fredswebiste 3 what is css Many websites make use of imagery to capture their visitors’ attention.  Let us now add an image. The additional HTML code to display the above is shown below: life on earth the file path to the image, and the alt text for screen readers Life’s journey isn’t always clear

4.      addForms

fredswebiste 4 what is css As with images, many sites make use of forms.  These often rely on other code to interact with the backend of a website, such as php.  However, the browser can interpret HTML to display some types of form inputs.  Examples are shown below: The additional HTML code is shown below:

Login to our site here

– to indicate that we are creating a form
User name: –  is a line break (does not need the closing chevrons) Password:  – this will show dots, not the characters  

Are you happy today?

 Yes – radio button allows only one choice  No  

Where would you most like to live?

dropbox shows available options Earth Mars Atlantis  

Which browser(s) do you use regularly?

 Chrome  IE –  Safari – more than one or all boxes can be checked.

Cascading Style Sheets (CSS)

Thus far our website has been devoid of colours and styling.  These are added using style sheets, commonly called Cascading Style Sheets, or CSS.  These allow a ‘master’ style to be created, much like the Master slide in packages used to prepare presentations.  The style can be added to any page required, by telling the browser its name and path on the computer. Every element on a page can be styled – this includes the headings; paragraphs; navigation links; images and so on. The code is written as for html, but it is saved as a .css file, to tell the bowser that it contains styling information. The css code selects each element, then shows the styling required. It contains extra syntax, such as the selectors; curly brackets and colons.  If any of these is missing, then the page will not have the desired look. Let us look at an example: fredswebiste 5 what is css Here we see the following changes:
  • The page title now has a little icon next to it – a favicon
  • The h1 heading – Fred’s Website – is now red and in the middle of the page
  • The p text – Hi, my name is Fred… – is now displayed in purple
  • The navigation list is now displayed horizontally, with separators between each link
  • The h2 headings for the form inputs – Login to our site here…- are now displayed in blue
  • The page colour is now grey.
There are two sets of code needed to display the page above.  Firstly, the styling – this as we saw earlier on, is stored in a css file, shown below:

5.      addStyle.css

li    { display: inline;  – this shows the navigation links as a horizontal bar } body  { font-family:  “Trebuchet MS”, Verdana; – this sets the font, in availability order font-size:  16px; background-color:  #cccccc; – colour code, not the American spelling! color:  #696969; padding: 3px; – spacing around the element to make reading easier } h1    { font-family: Georgia, serif; color:  #ff0000; font-size:  30px; text-align: center; } h2    { font-family: Georgia, serif; color:  blue; font-size:  20px; } p     { font-family: Georgia, serif; color:  purple; font-size;  12px; } We then call the css file and the favicon from the HTML document:
  1. Home Fred
Here we have provided a brief look at how web pages are created and styled using HTML and CSS.  In another paper, we will look at the use of JavaScript and JQuery to add interactions to web pages. A bit of trivia – what is the difference between the web and the internet? – the answer to this and further information on HTML and CSS can, of course, be found on the web!

Table of Contents

Related Articles

Business Analyst

Essential professional and technical skills for business analysts

Business analysts (BAs) play a pivotal role in bridging the gap between IT and the business to improve processes, products, services, and software through data analysis. They must possess a blend of professional and technical skills to be effective in their roles. So, what are the essential skills every business analyst should master to excel

Read More »
Software Testers Remote Working

How to thrive in a remote software testing role

Recent statistics have found that 86% of software engineers are working remotely. It is one of the industries where remote working has become the norm, with one in three wanting to work remotely 100% of the time and 80% of those surveyed wanting a hybrid approach. While remote working offers numerous benefits to software testers,

Read More »
Continuous Learning

The role of continuous learning in navigating career transitions

The role of continuous learning in navigating career transitions Whether voluntary or involuntary, career transitions are a significant part of professional life. The modern job market is dynamic, with technological advancements, economic shifts, and evolving industry demands driving frequent changes. Continuous learning emerges as a critical factor in successfully navigating these transitions. This article explores

Read More »
Agile

How Agile is transforming industries and organisations

Agile® is one of the most popular approaches for project management, with 81% of respondents in a KPMG study saying they’ve started their Agile transformation. Originally conceived within the software development sector, Agile methodologies have transcended their initial confines, revolutionising practices across various industries and organisations worldwide. Agile is a transformative approach that emphasises flexibility,

Read More »

At TSG Training, we know that preparing for an exam can be a stressful endeavour. That’s why we offer a unique promise to our customers – if you don’t pass your software testing course exam the first time around, you can take one subsequent course at no cost! Exam re-takes are chargeable

Enquire Now

Wait! Before You Leave.

How can we help?

Would you like to know more? Click here to arrange a call back with one of our business development managers. They will be able to discuss the course with you and answer any questions you have.