Introduction to CSS

CSS stands for Cascading Style Sheets. This is what allows you to create your web pages how you like, which makes them look so much better.

Before we get started you should remember to always close anything that you start, otherwise the computer won’t be able to read it. An example is, opening

The rule the CSS coding follows is a selector then the declaration. For example:

  • Selector is h1
  • Declaration is {color:blue; font-size:12px;}

This would then look like this:
h1 {
color: blue;
font-size: 12px;
}

A declaration is made up of a property and a value. In the example above, your property would be color and your value would be blue.

Different Types of Selectors (these are examples)

  • Element Selector

p {
text-align: center;
color: red;
}

All

elements will do what was stated above. The code for adding your text is

Whatever you are writing.

and you input your text in the part that is bold.

  • id Selector

#para1 {
text-align: center;
color: red;
}

This one will only make elements that used the id ‘para1’ to do what is stated above. The code for adding your text is

Whatever you are writing.

  • class Selector

.center {
text-align: center;
color: red;
}

With this one, it is very similar to the id selector when in the format above. However, you can make it more specific by adding an element selector in front of the ‘.center’ which would now look like this ‘p.center’. This would then make only the text that is both a ‘p’ element and in a ‘center’ class. The code for adding your text in is

Whatever you are writing.

  • Universal Selector

* {
text-align: center;
color: blue;
}

All elements will do what is stated above. This means that all the text on your web design will follow the declaration that is written.

  • Grouping Selector

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

If all of those selectors above have the same declaration, you are able to write them a different way. This will reduce the amount of coding but will still do the same thing.

h1, h2, p {
text-align: center;
color: red;
}

An important thing to remember is, when you are using this coding, always put the right part in the right areas. This means that the;

p {
text-align: center;
color: red;
}

Should be in the


Every paragraph will be affected by the style.




Summary of Selectors

  • = selects all

    elements

  • #id = selects all elements with the #id that you selected
  • .class = selects all elements with the .class that you selected
  • * = selects all elements
  • h1, h2, p = selects all elements that was listed

Different Ways to Insert CSS

  • Internal

This is when the

Then what would happen is the computer would only read the h1 {color: red;} as it cancels out the one above it.