Everything You Ever Wanted to Know About CSS: Part I

What is CSS?

Cascading Style Sheets, or CSS, is a simple design language that we use to make web pages beautifull and presentable.

Using CSS, you can set the colors, fonts and background images etc...

CSS is different from HTML, using HTML you create the structure of your page, and with CSS you add styles to your page.

Advantages of CSS

CSS helps your pages load faster CSS saves time, CSS makes a site easy to manage.

This article will teach you how to style your pages using a Cascade Style Sheet. All the styling information for your website or app will live in a file called style.css most of the time.

First, you need to create a style.css file.

Next, you need to link it to your home or index.html file. This is done using the code in the box below. Remember that the line goes between the <head> tags.

The code:

<head><link rel="stylesheet" href="style.css"></head>

Once you've created your style sheet and linked it to your index.html page, you can begin styling your page.
Example: Let's change the color of our first heading.

The code

h1{
   color: green;
}

p{
   color: coral;
}

Tips: Double quotes: style sheet not working? Are your double quotes in place? Just to be sure: rel="stylesheet" and href="style.css".File name: is your file name correct?

The correct name for your file is style.css. Check that the file you created as well as the file you are linking to have the same file name and external file name.

CSS syntax: after the selector h1 ensure that you type curly brackets {}Colon and semi-colon: after a property (color) there is a colon and after a value (green) there is a semi colon.

Setting the font properties of an element.

The font-family property is used to change the font.

h1 {
    font-family: sans-serif;
}


p {
    font-family: fantasy;
}

Tips: Syntax: after the selector like h1 ensure that you follow with curly brackets {}, after a property like color there is a colon : and after a value like green there is a semi colon ; . Dashes: words like font-weight and font-size are hyphenated, so remember to put the dashes. Measuring units: in lines like font-size: 14px; where you need to use a measuring unit like px, always double-check that the unit px is there. If you forget to put this, your font will not resize.

Applying the CSS list properties to set different list item markers for ordered lists.

The type of list item marker is specified with the list-style-type property.

The code

ul {
    list-style-type: circle;
}

ol{
    list-style-type: upper-roman;
}

Tips: Spelling: Make sure list-style-type the words follow that order and the dashes in between must be there. semicolon: Don't forget the semicolon at the end of the value and make sure its a semi colon ; not a colon : .

You can also make your own list bullets?

You can make your lists look like the one above by using the list-style-image property.

Using list-style-image is similar to adding an image onto your page:

First, you need an image in your images folder that will be your bullet.Next, you type the link to the image into your stylesheet.

Remember that your image needs to be small enough to serve as a bullet.

The code

ul{
    list-style-image: url('images/pointer-icon.png');
}

Tips: Single qoutations: ensure your single quotes are inside the circular brackets. Folder name: ensure you have the correct folder name before the file name. So if your file is called "pointer-icon.png" and is stored in a folder called images, then you will type src="images/pointer-icon.png".

Styling the table headings

Table headings are defined using the <th> tag.

The code (HTML)

<!DOCTYPE html>
<html>
      <head>

      </head>

      <body>
            <table border="1">
                  <tr>
                      <th>Number</th>
                      <th>Name</th>
                      <th>Surname</th>
                      <th>Maths</th>
                      <th>Science</th>
                   </tr>
                   
                   <tr>
                       <td>1</td>
                       <td>Amy</td>
                       <td>Adams</td>
                       <td>93</td>
                       <td>97</td>
                    </tr>
             </table>
        </body>
</html

The Code (CSS)

th {
     font-weight: 800;
}

Tips: Tags order: You cannot start with <tr> or <td> tags when creating a table. Tags must go in order; that is, the outermost tag will be the <table> tag, followed by the <tr> tag and then the <td> tag.

Changing the table font

This part will teach you how to change font of the text in your table.

The code

table{
     font-family : Helvetica, sans-serif;
}

Tips: Brackets: remember we use curly brackets { } in CSS! Check your semi colons ; not a colons :

How to use the table-border-collapse CSS property

The border-collapse CSS property sets whether the table borders should remain separate or be collapsed into a single border.

The code

table {
    border-collapse: collapse;
}

Tip: Spelling: Make sure border-collapse is spelled correctly, with the dash between the two words.

Changing the table colors

In this part we'll change the background and font colors of the table header.

th {
    font-weight     : 800;
    background-color: #2695A6;
    color           : #ffffff;
}

Tips: Spelling: Make sure background-color is spelled correctly, with the dash. Colors: did you place the # in front of the color code? Remember that in color codes we never use the letter "O". We use only the number zero "0".

Things to know!

If we styled our hyperlinks to look like menu buttons, but now all the hyperlinks on our page, even those that are not in the menu, look like buttons :-(

How do we fix this?

We can fix that by using a div box. A div box acts like a container on your page. It limits styles to a specific area on the screen, and prevents these styles from being applied elsewhere.

We add a DIV box to our page using the <div> tag.

The <div> tag must be given an id or a class name. Our CSS will identify a div box by its id or class name.

In the stylesheet we can refer to a div box with a specific id using the # key. So, for example, if we have a div box with an id of "menu" in our HTML, we can refer to it in our style sheet like this:

#menu { &nbsp;some styling info goes here }

The code (HTML)

 <div id="menu-bar">
     <a href="index.html">Home</a>
     <a href="#">About</a>
     <a href="#">Contact</a>
 </div>

Notice how we are using the exact same menu hyperlinks, but we've "wrapped" them in <div> tags; that is, we've put an open <div> tag before them, and a close </div>; tag after them.

Next we make some small changes to our style sheet:

The code (CSS)

#menu-bar a{
 font-family: Helvetica, sans-serif;
 text-decoration: none;
 background-color: aquamarine;
 padding: 5px;
}

#menu-bar a:hover{
 background-color: aqua;
 color: #ffffff;
}

The only change that we've made in the CSS code above is that we added #menu-bar before the two a selectors that style our menu buttons.

Tips: Id: an id must be unique! Make sure you use the exact same id name in your HTML and CSS. If the names do not match, your div box will not be styled! For example:

<div id=main">

Then your CSS must say:

#main{}

given an id="menu-bar", in CSS it will start with a hash followed by the id name #menu-bar.

Adding link Background Images

In this part we will be adding background images to our hyperlinks to make them look more like buttons.

The code(CSS)

#menu-bar a{
      background-image : url('images/menu-button.gif');
      background-repeat: no-repeat;
      display          : block;
      width            : 128px;
      height           : 25px;
      padding-left     : 18px
      padding-top      : 2px;
      float            : left;
}

Tips: Syntax: in your CSS styling for background-image, the word url is outside the brackets:
background-image : url('images/menu-button.gif'); Dashes: it's very easy to miss out the dashes! Double check that you have added dashes to all the words that are supposed to have dashes, like background-color and no-repeat.

Adding the link "hover" effect

In this part we are going to learn how to add the "hover" effect to our links.

The hover effect will cause the hyperlink button to seem like it's lighting up whenever the user's mouse hovers over it.

To do this is very simple.

The code

#menu-bar a:hover{
      background-image: url('images/menu-button-hover.gif');
      color           : #ffffff;
}

Tips: No spaces: remember there are no spaces in between a:hover.

Conclusion

HTML and CSS are actually large topics that people can dive into if you’ve made it this far, though, you’re more than well on your way to front end development magic.

There are still plenty of ways you can make your workflow better or improve your knowledge of best practices, so don’t stop learning!