Browsed by
Category: CSS3 Tutorials

Here is a list of the CSS3 Tutorials available here. They are in reverse chronological order, with the most recent ones at the top.

How to Style Your Forms Using CSS

How to Style Your Forms Using CSS

Pre-requisite: if you are learning from scratch and haven’t yet learned HTML Forms, head over there first and then come back! This tutorial on how to style your forms using CSS will build on that tutorial (or previous knowledge). Okay with that out the way, let’s get started. Forms Are Necessary…but boring! Despite new technologies such as Social Media Sign-in and voice search (e.g. Siri or OK Google) form are a necessary part of the web. From enquiry forms, to…

Read More Read More

Padding and Margin in CSS – What’s The Difference?

Padding and Margin in CSS – What’s The Difference?

When considering your web page layout the use of white space really matters. How you space the various elements in your design and how your text is laid out can make the difference between a user-friendly website where people stay, or a cluttered space people jump away from! This is where the concepts of padding and margin in CSS come in. CSS Padding Padding refers to the space between the outside of an element and the stuff inside: To set…

Read More Read More

Web Page Layout With CSS: No Tables or Frames!

Web Page Layout With CSS: No Tables or Frames!

In previous HTML Tutorials, we have spoken about using Tables and using Frames to create a page layout. At the same time we wrote about how you really shouldn’t be using those techniques any more. Frames should simply not be used as they are not the HTML5 Specification and Tables should be used for information which lends itself to a tabular format – not the entire page. So how should you create your HTML pages now? The short answer: HTML5…

Read More Read More

CSS Bullet Points and Numbered Lists

CSS Bullet Points and Numbered Lists

Following on from our most popular tutorial on HTML Bullet Points, let’s now have a bit of an easier CSS tutorial on how to format bulleted and numbered lists in CSS. This will lead onto a future tutorial on using <ul> and <ol> to create navigation menus. But as these CSS3 Tutorials assume no prior knowledge, let’s do things one step at a time! Changing the Bullet Style As with HTML, you can define an unordered list with a set…

Read More Read More

Turning Links Into Buttons in CSS

Turning Links Into Buttons in CSS

Time for a practical lesson! In this tutorial we will be turning HTML Links into buttons! We will go down it step-by-step and create a demo page. At the end of the tutorial you can download a ZIP of the working page for your reference. Nothing Is Set In Stone Most things in CSS can be redefined. It’s this principle which will run through all our CSS3 Tutorials. It’s because of this flexibility that means you can turn a bullet…

Read More Read More

Using CSS Classes – A Handy Guide

Using CSS Classes – A Handy Guide

We come now to a principle of CSS which will pretty much affect everything you do when building a website. This issue surrounds how you name elements on your page. We’ve already seen that HTML Tags and CSS are directly related. This allows you to define how a tag looks or behaves by using the tag name directly in your stylesheet: But you often need more control than to just make every instance of one tag the same. If all…

Read More Read More

Removing The Underline From Links in CSS

Removing The Underline From Links in CSS

One of the most common uses of even basic CSS is to alter how links look and behave. This builds on the tutorial about CSS Text Formatting, so if you haven’t read that yet, I suggest you do! Here’s the code snippet we will be working through: Removing the Underline From Your Links The first thing we have done here is redefined how all <a> tags work (See: Links and Anchors in HTML). I have given all links a new…

Read More Read More

CSS Text Formatting

CSS Text Formatting

How you display your text on a web page is really important. If people don’t feel at ease reading your page, they will go elsewhere. Given that most web pages have a whole bunch of text on them, getting your text formatting wrong could make or break people’s experience of your website. If you haven’t read our tutorial on Fonts in HTML, I suggest you go ahead and read that and then come back! Choosing the Right Font Before delving…

Read More Read More

CSS and HTML Comments and their Uses

CSS and HTML Comments and their Uses

Sometimes you just feel like you need to make notes when coding. Especially if you’re learning web development for the first time. And once your .html and .css get larger and larger, sometimes you just need to explain what you’re doing within your code. Thankfully, this is doable in both HTML and CSS with comments. HTML Comments | CSS Comments | A Warning HTML Comments Leaving yourself notes within HTML is really easy with a simple pair of ‘unusual’ tags….

Read More Read More

How are CSS and HTML Tags Linked?

How are CSS and HTML Tags Linked?

So you’ve learned what CSS is, and have set up your Stylesheet via the LINK Tag. Let’s now look at learning some actual CSS! CSS Definitions and HTML Tags are Linked! Before getting into some actual code there’s a simple point you need to realise: CSS can re-define how many HTML Tag behaves. That means if you want to make the <strong> tag to no longer be bold but to appear in italics you can! It means if you want…

Read More Read More