Useful CSS tutorials

Useful CSS tutorials

2018, Apr 10    

Cascading Style Sheets (CSS) is a language for describing how elements of a document written in a markup language should be displayed. By far the most common use of CSS is to describe how to display elements of an webpage written in HTML.

CSS allows a developer to separate structure of a document (such as its paragraphs, lists and tables) from its visual appearance. This helps maintainability of the document, and also makes it easier to display on different platforms, or to easily change its appearance. Having a good understanding of CSS, therefore, is an important part of being a web developer.

These tutorials are especially recommended for building a good understanding of CSS and how to use it to build attractive websites.

HTMLDog

The HTML Dog website has an excellent CSS beginner's tutorial, looking at how to apply CSS to your HTML document to change how it is displayed, to how to write CSS for some common tasks, such as colours, changing the appearance of text, and putting margings and padding round elements in your webpage. There is also an advanced tutorial.

W3 Schools

No list of web tutorial is complete without some mention of W3 Schools. The covers lots of different uses of CSS and CSS properties. Helpfully, the tutorial also includes lots of demos that allow you to experiment, as well as texts and exercises.</p>

CSS Borders

CSS borders is a simple and useful website that demonstrates how to write CSS code to display borders of different styles and widths round parts of a webpage, as well as use of rounded corners.

Learn Layout

One of the early stumbling blocks in learning CSS concerns how to use CSS to control layout - where different elements should be positioned on the page, either relative to other elements or in absolute terms. The Learn Layout website covers this subject well.

Shay Howe's HTML+CSS tutorial

Shay Howe's Learn to Code HTML & CSS accompanies his book, and contains a lot of well-explained material on using CSS to style HTML, structured as a series of lessons.

Bootstrap

Strictly speaking, bootstrap is not a tutorial, but a CSS framework, one which is widely used by web developes. It provides a set of ready-made CSS classes to help you style and layout your webpage. We include it here partly because it is so widely used, but also because the documentation shows lots of useful examples and demonstrations of what can be achieved using CSS.