ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Learning and Using CSS

Updated on July 17, 2017

Expanding From the Previous Article

In the previous article, we learned how to create a basic web page using HTML. If you have not read the first article yet you can view the article here Learning and Using HTML.

In this article, we will expand a bit more on what we have already learned, In the HTML lesson, we created a basic layout for a store site. It's a bit ugly since it's not styled, but not to worry in this lesson we will be styling our practice store front web page.

Learning and Using HTML Practice

At the end of the last article Learning and Using HTML there was a bit of a practice section. How did you do? Were you able to complete the exercises yourself or did you need a bit of help from the GitHub repository that correlates with this lesson?

Either way, hopefully, you were able to:

Create two additional HTML files within our ExampleWebSeriesSite project folder. One file named about.html and the other contact.html.

Within the about.html file create a simple navigation menu linking to the other pages, a heading for the page, a few paragraphs (can be placeholder text), and include a footer.

Within the contact.html file create a simple navigation linking to the other pages, a heading for the page, a contact form, and include a footer.

Now we will be styling these pages.

At This Point your file structure should look similar to the below image.

html_lesson file structure HTML, Learn HTML, Learn CSS
html_lesson file structure HTML, Learn HTML, Learn CSS | Source

Let's Get Started With the Lesson

Within our ExampleWebSeriesSite folder let's create a new folder and call it css_lesson. Copy over the about.html, contact.html, and index.html file from the last lesson (Learning and Using HTML). Also, create a new subfolder named CSS and create a file within the subfolder named styles.css.

If you need additional guidance you can reference the lesson's Github page located at https://github.com/jameswassinger/ExampleWebSeriesSite.


Your file folder structure should now look similar to this.

css_lesson file folder structure, Learn HTML, Learn CSS, CSS is awesome!
css_lesson file folder structure, Learn HTML, Learn CSS, CSS is awesome! | Source

Brief CSS History Lesson

What is CSS

First, let's discuss what CSS exactly is and how it can improve your web pages. CSS or Cascading Style Sheets is the primary language or syntax used to visually style a web page.

CSS can control the layout of several web pages by defining how HTML is displayed on pages.

CSS IS AWESOME
CSS IS AWESOME | Source

Why Should I Use CSS?

CSS is used to define styles for your web pages, including the design, layout, and variations in the display for different devices and screen sizes. Modern CSS can greatly improve development time and can conform to the device the page is being displayed on.

Styling the Homepage

As of now, our index.html page looks plain and not very modern. With the aid of CSS we are going to leave the site title at the top of the page, move the navigation to the right of the page, leave the description paragraph at the top of the page just below the site title and navigation, and we will style each product so they show in rows with a buy now button.

Let's get started!

Open your index.html file in your Atom IDE, or whatever editor you prefer. There are two main ways you can add CSS to your web page inline styles and external style sheets. Do not use inline styles. The use of inline styles within your HTML page is frowned upon and inline styles make the page very hard to read. It's best practice to keep your HTML and CSS in separate files.

With that being said, we are going to be using an external style sheet. With your index.html page open add the following line of code within the head of your index page, in-fact you can add this line of code to the about and contact HTML pages as well.

Adding a Reference to an External StyleSheet

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Add short summary about website -->
    <meta name="description" content="Sam's Homemade Products, providing high quality  and unique homemade goods here.">

    <!-- Google Fonts: Roboto, https://fonts.google.com/specimen/Roboto?selection.family=Roboto -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!-- External stylesheet -->
    <link href=CSS/styles.css rel="stylesheet">

    <title>Sam's Homemade Products</title>

</head>

Explanation of Code

The code above represents what will be added to each of our HTML pages. The code above is everything within the HEAD tags. To add a reference to an external style sheet review the commented line <!-- External stylesheet -->. The code directly below is what adds the reference to the external stylesheet. The href is referring to the subfolder we created CSS and the file under the CSS folder (CSS/styles.css).

At this point you can either copy and paste the above code into each of your HTML head tags or type them out.

As you can see we are not using the default browser fonts we are using custom fonts from Google Fonts, which is free to use.

Let's do the index page together

Now that we have our reference to our external stylesheet we can start adding CSS classes and IDs.

What is a CSS Class?

CSS class selectors match an element based on the contents of the element's class attribute. The attribute class is defined as a space-separated list of items, and one of those items must match exactly the class name given in the selector [MDN].

What is a CSS ID?

In an HTML document, CSS ID selectors match an element based on the contents of that element's id attribute, which must match exactly the value given in the selector [MDN].

In short, classes can be used more than once on multiple elements, whereas, Ids can only be used once within an HTML document.


Formatting the Body of the HTML Pages

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  margin-bottom: 60px;
}

Code Explained

The above code defines the styles or designs the HTML pages should adhere to. In the above code, the CSS syntax is telling the browser to render the font-family as Roboto, keep the page margin at 0, the page padding at 0, and the page's bottom margin at 60px to compensate for the page footer.

Why should the page margins and padding be set to zero?

The margins and padding should be set to 0 so that elements span the entire width of the page. If we did not set the margins and padding to 0 there would be a 5px or so gap around elements.

Navigation and Site Title CSS

nav {
  float: right;
  margin-right: 15px;
}

nav a {
  text-decoration: none;
  color: #000;
}

nav a:hover {
  color: #999999;
}

.clear {
  clear: both;
}

hr {
  border: 1px solid #e6e6e6;
}

.title {
  margin-left: 15px;
}

Styling the Title and Navigation

Now to style the navigation menu and the site title. For this, we are going to float the menu to the right and also add a bit of padding, so the menu is not all the way at the edge of the device screen.

If you notice the menu contains links. We don't want the links to be underlined until a user hovers over them so the nav a tells the browser to take away the underline and the nav a:hover tells the browser to underline the link when the user hovers over the menu link.

You could keep the site title how it is, but I prefer the title to be away from the edge a bit, so I add a .title class with a margin-left of 15px.

Since we used the float element we want everything else below the float element to be correctly positioned, so we add the .clear class to clear both allowing elements that follow the float to be positioned as normal.

The hr tag, to me, was a bit dark for my taste, so I lightened the hr by adjusting the border color.

Styling the Product Rows and Buy Now Buttons

.container {
  margin-left: 15px;
  margin-right: 15px;
}
button {
  background:#66b3ff;
  color: #FFF;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: large;
  cursor: pointer;
}

button:hover {
  background: #4da6ff;
}

.product {
  float: left;
  margin-left: 35px;
}

.product-row {
  float: left;
  margin-bottom: 65px;
}

Styling the Product Rows and Buy Now Buttons

Since we made the body have padding and margin of 0 we will need to add a container class to contain the products otherwise the products will go to each edge of the page, and we do not want that.

So adding a container class with equal left and right margins of 15px will help add some spacing to the edges of the page. Now we need to place the products in their own rows for this we will add a product class that floats each product to the left and provides a bit of space for other product by providing a left margin of 35px.

We don't want the products to lay on top of each other, so we fix this by adding a product row class. This class also floats to the left but adds a bottom margin of 65px, so the product rows do not overlap.

Lastly, we need to style the Buy now buttons. For this, we change the background to an aesthetically pleasing color, change the font-color to complement the background color, remove the default border, increase the padding to make the button a bit larger, increase the font size, and lastly change the cursor to show as a pointer instead of an arrow.

Now your index.html page should look more like a store front page.

Footer CSS

.footer {
  position: fixed;
  bottom: 0;
  color: #e6e6e6;
  width: 100%;
  background-color: #bfbfbf;
  opacity: 0.9;
}

.footer p {
  margin-left: 15px;
}

Adding the Footer

Alright now, let's add the footer to the bottom of the page. For this, we will add a .footer class. The footer class will have a fixed position so the footer stays put at the bottom of the page. Remember from the body we compensated for the height of the footer by adding a bottom margin of 60px. To push the footer to the bottom we will use the bottom attribute with a value of 0. We want the footer to span the entire width of the page so we use the width attribute with a value of 100%. Lastly, we add a background color, but we do not want the background color to overtake the rest of the page, so we add the attribute opacity to fade the footer background a bit.

The text within the footer is given a left margin so that the text does not hug the edge of the screen.

Exercise

Now it's your turn to finish styling the rest of the pages (about.html and contact.html). You may style the pages as simple or as complex as you would like. remember if you get stuck or need help you can refer to the GitHub repository that has the completed style pages at https://github.com/jameswassinger/ExampleWebSeriesSite/tree/master/css_lesson


Happy Coding :-)

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.