CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

CSS: Styling HTML with CSS

CSS/0

CSS is another coding language - it stands for Cascading Style Sheets and is the language for adding colours, fonts and other styles to your HTML website

Written by Pal Kerecsenyi

PreviousExitNext

CSS: Styling HTML with CSS

Ad Ethical + impactful advertising with tiny prices.  Advertise on CodeDragon 
PreviousExitNext
Ad Ethical + impactful advertising with tiny prices.  Advertise on CodeDragon 

Colours, fonts, and other fancy things

CSS stands for Cascading Style Sheets. It's a coding language that's similar in structure to HTML.

Caution

Before going on to CSS, make sure you've mastered Introduction to HTML. You can't write CSS without knowing about HTML.

Example

Here's an example of what CSS looks like:

As with HTML, this might look complicated. It's easy to understand, but it can take a while to get used to it.

CSS is a language for adding styling to your HTML websites. The concept is simple - you need to select an element and apply a set of styling rules to it.

CSS rules

A rule in CSS is a style 'setting' we want to apply to something. A rule always looks like this:

It's important to remember that rules always have a semicolon (;) at the end of them.

There's quite a few properties that a rule can have. Some examples are:

The value of a CSS rule says what that property should be set to.

If you're interested, you can read the full list of CSS properties.

Where do you put CSS?

Good question - CSS can go in several places.

In attributes

Using CSS with attributes is the easiest way to get started with it, because it removes a lot of complication.

Let's suppose we have a <p>, and we want to make the text be coloured green. Here's the code we'd use:

See? It makes sense - you just use the style attribute of any element, and put CSS rules inside it.

Your turn

Try making this <p> a different colour. In CodeDragon, you can use a colour picker to choose colours.

  1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
  2. Drag the yellow paragraph block into the body, and type anything you want into it.
  3. Drag the style attribute block onto the side of the paragraph block.
  4. Drag the color CSS rule into the pink style block, and change the colour to anything you want.
Fullscreen

End of tutorial

PreviousExitNext