ACS Online Training | Over 500 courses available to study online now!
CSS is an abbreviation for "Cascading Style Sheets".
These are a code element designed to control the appearance and the layout of a webpage. Web pages that incorporate CSS use what are known as Style Sheets or style tags to accomplish things such as positioning, colours, appearance and even how different elements on a page are shown depending on the size of the screen. (This is called responsive design or responsive CSS.)
CSS can be used for both visual presentation or for layout purposes.
There are three ways to use CSS on a web page / website.
The first way is to use ‘inline styles’. This is where you apply a style attribute to an existing html tag to control the style of a specific element on the page. For example,
sets the text colour to red within the body of the upcoming paragraph block.
The second way is to define a set of styles within the <head> section of the html document. This is achieved using a <style></style> element, with the styling options defined inside.
The third way is to define your styles in one or more separate CSS files, which are then associated with the current document via a <link> element, again in the <head> section of the html.
Whether styles are listed in an external style sheet or within the head of a document, the same method is used to link an element to a style; you name the element and then specify the style you want to apply using specific CSS syntax. For example:
This will apply the Arial font and colour red to all <p> (paragraph) elements in the document (unless over-ridden by other css rules). Note US spelling is generally used and styles are not case sensitive.
It is generally frowned upon in the industry to use inline styles on objects as it can lead to inefficient and messy coding. Style statements in the <head> are marginally better but still not reusable or easily maintained. By using external CSS files, you can specify styles for common objects (such as containers, menus, images, headings, etc,) and then these styles can be applied to all pages that call the CSS file.
For example, if you have ten pages which should have the same font used through the site, instead of specifying the font in every page, you can specify it in one file and reference that file through the ten pages. With websites, this approach is favoured as you can then make one change that will affect all the pages in your website, instead of making the change ten times.
In the example below, if we wanted to make all the pages in the website (that is, HomePage.html, Page1.html and Page2.html) use a larger font, then we would change this in the main CSS file, example.css and it would be reflected on all three html pages.
Almost all formatting and layout can be controlled this way, giving us an easy way to maintain and alter our entire website. Using externally defined style sheets gives us flexibility to alter it once and see the changes through all referenced pages
In the example, css was used to control display features of <p> elements – the font and the colour. However, css if far more powerful than this. Styles can be used to control positioning of elements on the page, manage padding and margins between elements, and control element behaviour, such as wrapping or stacking of text or response to window resizing, for example. CSS is now the professional standard for managing page layout, because it makes it possible to design flexible layouts that are consistent and appealing across multiple platforms and devices. Because of this ability, CSS has replaced the traditional use of tables (discussed later) to give structure to web page content. CSS is a relatively new technology, however, and there are many thousands of sites that still used a table-based approach. You are a more useful developer if you can work with both.
CSS is an important tool used for creating web pages.
You can learn about this and a whole lot more in our html -writing a website, online course.
These are skills that are valuable in just about any business or office today.
If you wish to improve your own business or career prospects; this is a great course to undertake.