Geek Proud, GeekOut.

Web Wednesday – Beginners’ CSS

Cascading Style Sheets, or CSS, is what makes the internet a truly beautiful, stylish place. Last Web Wednesday, we looked at the basics of HTML. We showed off a few funky tricks and we’re well aware that HTML is like the bones of a website. They are what help you structure your website in a meaningful way. Divs, Tables, Headers, Paragraphs – Tags. That’s HTML in a nutshell – So how different is CSS and how important is it for a website?

Look around the website you’re currently on. Check out the background… Then check out the headings. Next, check out the paragraphs. So far, all of this has been styled via CSS. Can you tell me what else on this website has been styled with this language? How about the content area in the middle of the website? How about that sidebar on the right hand side? Everything has been styled specifically via a CSS file.

CSS3_Logo

CSS can be embedded directly into HTML, which is the first way we’re going to use CSS. Follow along with me and you’ll be making CSS styled pages in no time!

<html>
<head>
   <title>My first CSS page</title>
   <meta charset="utf-8" />
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style type="text/css">
      body {
         background-color: #000000;
      }
      p {
         color: #FFFFFF;
      }
    </style>
</head>
<body>
   <p>Hello out there?</p>
</body>
</html>

That’s now done, so save that as a html file by saving it as something like “index.html” and then open the website by double clicking on the file or just opening it in your browser. The below is what I got from the above file:

Screenshot from 2015-06-24 01:35:03

Let’s discuss what we’ve actually done here. Normally if you were to just write a HTML document, you’d have a white page and you’d have black writing. With the above 4 lines of CSS code ( It looks like 6 as I’ve spread it out for readability), I’ve completely inverted the default values of a webpage by telling it to change the values.

First up, a look at the structure of the embedded CSS information:

<style type="text/css"> </style>

 

Here’s your tag to declare you want to do some embedded CSS. This means that you want CSS to be in the same file as your HTML file. You would use a different tag if you wanted to get external CSS onto your page, but we’ll cover that later.

body { }, p { }

 

Does something look familiar about these? <body> and <p> are both present tags in our HTML file. Take a look – We’ve got a paragraph (p) tag which has the words “Hello out there?” written inside of it. We’ve also got the body, which declares what the user sees.

background-color: #000000; color: #FFFFFF;

 

With these particular lines, we’re changing the background colour of the object we’re interested in (background-color) and the text colour (color). It’s important to make this distinction as soon as possible: background-color, or background-image, anything like that doesn’t mean the background of the website, but rather the background of the tag you’re in.

Don’t believe me on this? Look what happens when I move our background-color line from the body tag to the p tag.

Hello out there?

That’s right… You might notice the background is now white but the background around the text is black… This is because it’s applied its background-color element to the background of the paragraph, not the whole page. Simple distinction, but important to remember!

Let’s talk about the importance of the div tag along with CSS. The div tag by itself doesn’t really do much. It’s a set square which has nothing to determine what’s inside of it. With CSS however, you can make some really cool things. Follow along with me:

<html>
<head>
   <title>My first CSS page</title>
   <meta charset="utf-8" />
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style type="text/css">
      body {
         background-color: #000000;
      }
      #myDiv {
         background-color: #FFFFFF;
         height: 200px;
         width: 200px;
      }
    </style>
</head>
<body>
   <div id="myDiv">I'm such a Div.</div>
</body>
</html>

Results:

Such a Div

We’ve determined that the height of the div is 200 pixels tall and the width is 200 pixels wide. We’ve then determined that we want the background colour of the div should be white. If you can imagine it, this website you’re on has many different div tags. The central part of the website, where all of the content is kept, in a few divs. One called a wrapper, as this is good practice to have a div to contain the content divs. One called content (unsurprisingly). One called banner – Things like this. These might not be exactly how this website are built up, as WordPress features some naming conventions, but the general gist is there.

One last trick then: Rounding off borders. Sometimes, you don’t want squares. Here’s a funky trick if you want a circle:

<html>
<head>
   <title>My first CSS page</title>
   <meta charset="utf-8" />
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style type="text/css">
      body {
         background-color: #000000;
      }
      #myDiv {
         background-color: #FF0000;
         height: 200px;
         width: 200px;
         border-radius: 100px;
      }
    </style>
</head>
<body>
   <div id="myDiv" />
</body>
</html>

Here’s what we get from the above:

Circle

Next time, we’re going to set out some proper challenges for CSS. We’re going to make a few basic websites, which will utilise our HTML and our CSS knowledge to make something that has some content inside of it and it looks pretty. If you have any ideas of challenges, please let me know and it may just end up in the article. Join us again in 2 weeks for another Web Wednesday. Is any of this useful? Do you want to see more advanced techniques for HTML? As always, please comment below, over on Facebook or on Twitter.

One response

  1. Pingback: Web Wednesday – CSS Part 2 | GeekOut South-West

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