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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)