Link Search Menu Expand Document
HTML and CSS

CSS Styling

Let’s style our document

CSS is very powerful and there is a lot we can do with it, but we need to start somewhere. Let’s keep it simple, by using the most common CSS properties:

  • color: #FF9900; (hex value, name, rgb, rgba)
  • text-align: left; (center, right, justify)
  • font-size: 16px; (px, em, rem, %)
  • font-weight: bold; (normal, bold)
  • font-style: italic; (normal, italic)
  • background-color: #660000; (hex value, name, rgb, rgba)

Box elements

Well…every element is a box, but let’s focus on <div>, <ul>, <ol> and also the previous text elements.

  • width: 500px; (px, em, rem, %)
  • height: 250px; (px, em, rem)
  • border: 5px solid #CC0000; (px, em, rem; solid, dotted, dashed; hex, name, rgb, rgba)
  • padding: 10px 20px 10px 20px; (px, em, rem)
  • margin: 10px auto 30px auto; (px, em, rem)

Here is an example 

div {
    background-color: #eeeeaa;
    padding: 16px 24px;
    margin: 32px auto;
    border: 3px solid #00cc00;
    width:50%;
}
p {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    color: #990000;
}

The Result:

Look at me, I know latin! Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Maecenas aliquet accumsan leo. Nulla quis diam. Nullam eget nisl. Praesent dapibus. Pellentesque ipsum. Mauris tincidunt sem sed arcu. Etiam quis quam. Nullam at arcu a est sollicitudin euismod. Aenean fermentum risus id tortor.

Let’s see CSS at work

Here is the Museums page example.

Some sources for colors

Learn more: