Geek Proud, GeekOut.

Web Wednesday – CSS Part 2

CSS, Cascading Style Sheets, are a wacky and wonderful part of the internet. Without it, we will not have all of the beautiful websites of the world today. Couple this powerful, beautiful styling language with our websites skeleton language, HTML, we’ve got an incredible combination. Here’s some more CSS tips and tricks before we move onto the next section of Web Wednesday.

CSS3_Logo

Let’s catch up and do a quick recap of Web Wednesday so far. We’ve already covered HTML in our first lesson, where we were able to create a functional website. It didn’t have much going on, but we had a website and we were proud of that face.

Next up, we started to look into CSS, the stylish language of the internet! We started to look at these things we call Divs as well as using ID’s and Classes to define specific elements of a webpage. We’ve made them look pretty and made them look crazy too. We’ve smoothed edges and even made a circle just out of CSS!

Circle

CSS is cool!

Pseudo-Class

So far, we’ve simply discussed how to change the style of an element, but what about whenever something happens with that element? What if someone hovered their cursor over a box which you wanted to have change into a different colour on mouse over? Introducing element properties into your website makes it feel that much more dynamic and responsive. To apply a pseudo-class to an element, you need to use a colon. So it is written like “Element-name : pseudo-class-name”.

Here’s a simple example:

<html>
<head>
<title>My test</title>
<style type="text/css">
  a:hover {
    color: #FF0000;
  }
</style>
</head>
<body>
  <a href=””>Click me please!</a>
</body>
</html>

Save the above as test.html and open it up in your web browser. Then move your cursor over the link. What happens?

Link hover

You know that menu bar up at the top of this website? Whenever you move your cursor over it, this is what it’s doing. It’s registered a Pseudo-Class is there and it applies the element whenever the pseudo-class is called (I.E whenever you move your cursor over it.)

Most people use these purely for links, but you can do things like this to just about any element you see fit… Including this:

<html>
<head>
  <title>My test</title>
  <style type="text/css">
    .mydiv {
      background-color: #FF00FF;
      height: 200px;
      width: 200px;
    }
    .mydiv:hover {
      background-color: #FF0000;
    }
  </style>
</head>
<body>
  <div class="mydiv" />
</body>
</html>

Go ahead and save this file, then open it. You’ll be presented with a pink square of 200 pixels by 200 pixels in size. If you move your cursor over this, it turns red. It is possible to do this to just about anything you want to, so it’s a neat trick.

Hover challenge

When hovered over, the above file should turn the square from pink to red.

Pseudo-elements

We’ve gone too deep, so we must dig a little deeper. Now, it’s time for CSS to do some really funky things.

You know our favourite p tag? Paragraphs are great, but sometimes you want to put added emphasis on, for example, the first line of a paragraph. Well how can we do this? Here comes an example of a pseudo-element:

Changing the first letter ONLY

Do you know those fancy letters? You know the ones, the ones that are bigger than all other letters, look important at the beginning of a chapters’ paragraph in a book. It might be the first letter in an article. Well the way you can do that, instead of reusing a lot of annoying code around these letters, is with CSS Pseudo-Elements. The biggest difference with using a pseudo-element is to use two colons (::) rather than the 1 colon which is used for pseudo-classes.

<html>
<head>
  <title>My test</title>
  <style type="text/css">
    p::first-letter {
      font-size: xx-large;
      color: red;
    }
    p#stylegraph {
      color: orange;
      font-size: 20pt;
    }
    p.stylish {
      color: green;
      font-size: xx-small;
    }
  </style>
</head>
<body>
  <p> This is my first paragraph! </p>
  <p id="stylegraph">This is a stylish paragraph</p>
  <p class="stylish"> This is my small paragraph! </p>
</body>
</html>

And saving that gives us this result:

first letter challengeThere’s a lot to take in here, but the most important thing to take in is that on every paragraph, the first letter has been affected as we targetted the <p> tag, rather than a specific ID or Class. Those took on the extras from their parent tag (that <p> tag).

That’s it. No more. We’re done. No more need for styling our websites. But there is a need for you guys to be set a little bit of CSS homework. Why not take these slightly tougher challenges this week and share with us your results. If you found them all easy enough, then you’re on your way to being a Design Wiz. This wasn’t so hard, was it?!

  1. Create a div which has an orange background, is 100×400 pixels
  2. Create a really simple webpage with the following features:
    • A header picture
    • A header where the font-size is 42 pixels
    • A large box for content with a solid border
    • A footer, where all text inside of the footer is just 8px.
    • Some text that when you highlight it has a yellow background behind it.
      Think about how you would implement this one, as it’s tricky. I’d recommend thinking about how <Div tags> and Pseudo-Elements work.
  3. A website with 5 100×100 boxes of different colours (red, yellow, pink, green, purple – Or whatever colours you want) that as you hover over them change colour.

Let me know what you think about the challenges and until next time, I hope to speak to you all soon. As always, comment below, over on Facebook or Twitter and I’ll happily help out if there are any problems!

Drop us a line

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s