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 whatisccsThe 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 cssThe additional HTML source code for the page above is shown below: an unordered listan unordered list 
  • Home
– list item 
  • About Fred
– as above 
  • Contact Fred
– as above 

3.      addImage

fredswebiste 3 what is cssMany 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 readersLife’s journey isn’t always clear

4.      addForms

fredswebiste 4 what is cssAs 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 optionsEarthMarsAtlantis 

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 cssHere 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 orderfont-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!

Related Articles

ITIL Certification Guide: Costs, Requirements, Levels, and Paths

The Information Technology Infrastructure Library (ITIL) is one of the most widely recognised frameworks for IT service management (ITSM). It guides organisations to align their IT services with business needs effectively. ITIL certifications are invaluable for IT professionals looking to advance their careers by gaining knowledge of IT service management best practices. This guide will

Read More »

How software testing is transforming industries: Market insights and applications

As technology advances rapidly, software testing has become essential for ensuring the reliability, security, and performance of digital solutions across industries. According to recent analyses, the software testing market is projected to reach significant growth by 2030, with increasing investments in areas such as artificial intelligence (AI), mobile application testing, cybersecurity, and blockchain. This article

Read More »

Only 16% of companies find their software testing efficient: Why testing needs an overhaul

Whether it’s a mobile app, website, or large-scale enterprise solution, ensuring that software performs flawlessly can make or break a business. However, despite the importance of testing, a shocking statistic reveals that only 16% of companies consider their software testing process efficient. This finding highlights a pressing need for organisations to reassess their approach to

Read More »
itsm

5 reasons to invest in IT service management training

With cybersecurity risks and the growing need for agility, organisations must remain competitive by ensuring their IT infrastructure is efficient, reliable, and responsive to change. IT Service Management (ITSM) plays a critical role in achieving these goals. Investing in ITSM training is not just about acquiring technical skills but about fostering a culture of continuous

Read More »

Pass Protect, offered by TSG Training, is a valuable option for those concerned about the possibility of not passing their exam on the first attempt. It acts like an insurance policy, allowing you to resit your exam at a significantly reduced rate. Pass Protect covers one resit per exam purchased, so you don’t have to worry about the cost of an additional attempt if you don’t pass initially.

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.