Basic Web Design With HTML & CSS

Updated on February 3, 2018
bluemana profile image

Bret has been writing HTML for more than 10 years, he is also proficient in CSS, JavaScript, and React. Bret is currently employed at TCN

Styling With CSS
Styling With CSS | Source

Authour's Note

Although this tutorial covers the basics of styling with HTML and CSS, it is still recommended that you have at least a small understanding of what HTML is before reading this tutorial. If you would like to read this tutorial but are still a little unsure about what HTML is, then I would recommend that you read my other article "An Introduction to Writing HTML" before starting this one.

What is CSS?

CSS stands for Cascading Style Sheets. Similar to HTML, CSS is a tool used for web design. In fact, HTML and CSS go hand in hand when it comes to designing a nice-looking website. The main difference between the two is that HTML is used mainly for creating the content of the website, while CSS is used for styling that content. HTML is a useful tool for creating a website, but without CSS your website would look very bland indeed. That being said, there are other tools a person can use for styling a website, but for someone just getting into web design CSS it where it all starts.

Getting Started With HTML

In order to use CSS, we will need to have some content on our website first, so let's get started by creating a simple HTML file and some of the more common elements that are found on a webpage. Go ahead and open your text editor and create a new named "index.html". For anyone who has not already found a text editor that they like, I would highly recommend using Brackets for writing HTML and CSS. Now, copy and paste the code below into your index.html file.

<!DOCTYPE html>
<html lang="en">
    <head>
        
    </head>
    <body>

    </body>
</html>

This text is common to almost every HTML file. The tag on the 1st line tells internet browsers that this is an html file, and the tags on the 2nd and 9th lines tell the browsers that everything between these two tags is HTML typed in English. Between the <head> tags on lines 3 and 5 is where you will put code for displaying your website name and logo in your web browser's tab. Between the <body> tags on lines 6 and 8 is where you will put the content of your website. it is literally your websites body.

Add Some Content With HTML

Now that we have the basic outline of our website, it is time to add some content to make it a bit more interesting. Let's start by adding a banner to our website.

<!DOCTYPE html>
<html lang="en">
    <head>
        
    </head>
    <body>
        <div><h1>THIS IS MY BANNER TEXT</h1></div>
    </body>
</html>

<div> tags are used to separate a section of your website from the rest of the website. In this case, we are using div tags to separate the banner from the rest of the website. The <h1> tags are used for creating headers on your website. There are six different headers (h1, h2, h3, h4, h5, and h6) that can be used. The biggest differences between the headers is the text size. Headers are most commonly used to emphasize banner text and paragraph titles. Now, let's add a navigation bar, or navbar for short.

<!DOCTYPE html>
<html lang="en">
    <head>
        
    </head>
    <body>
        <div><h1>THIS IS MY BANNER TEXT</h1></div>
        <div>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="info.html">INFO</a></li>
                <li><a href="contact.html">CONTACT</a></li>
				<li><a href="https://hubpages.com">HUBPAGES</a></li>
            </ul>
		</div>
    </body>
</html>

Again, we will use <div> tags to separate the navbar into its own section. The <ul> tags stands for unordered list with the <li> tags each being a list item on the unordered list. Inside of the <li> tags are <a> tags which are used to create links to other webpages or other pages of your website. The text in between the <a> tags is what is displayed as the link text, while the text inside the quotation marks after the href is the link destination. In this example, the first three links would direct you to different sections of your future website, and the fourth link would take you to the Hubpages website. Now, let's add some text the body of our website.

<!DOCTYPE html>
<html lang="en">
    <head>
        
    </head>
    <body>
        <div><h1>THIS IS MY BANNER TEXT</h1></div>
        <div>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="info.html">INFO</a></li>
                <li><a href="contact.html">CONTACT</a></li>
				<li><a href="https://hubpages.com">HUBPAGES</a></li>
            </ul>
        </div>
        <h2>This Is My Paragraph Header</h2>
        <p>
            This is where I am going to put useful and informative text about my website.
        </p>
        <p>
            This is where I am can place even more information about my website.
        </p>
        <div>This is where I can place a copyright logo like this &copy;</div>
    </body>
</html>

Here we can see another example of a header tag. We used an <h2> in this case to emphasize the paragraph header while still keeping it smaller than the banner text. The <p> tags are used to mark a paragraph of text, and the new <div> at the bottom of the code is to separate our disclaimer from the rest of the text on the page. While it is possible to add text to your website simply by typing in between the <body> tags, it is much cleaner and easier to style and organize your website if you place your text in paragraph or header tags or like in the case of our copyright disclaimer place it in its own <div>. Now, let's open our website and see what we have so far.

A Simple Website Without CSS
A Simple Website Without CSS

After opening your website, you should see something like the image above. While we can clearly see the different sections of our website, it still looks quite bland. this is where CSS comes in.

Add Some Style With CSS

Now that we have our website, let's add some styling with CSS. Using your text editor create another file and name it "style.css". Before we can start writing in our new CSS file, we need to add one more thing to our index.html file. For each of our main tags we will want to assign either an id or a class inside its opening tag. If the tag is a unique section of your website, then we will assign it an id, but for tags that represent a repeating element of the website that will have similar styling, like the body text, we will assign a class instead. Last, we need to link our HTML file to our CSS file inside the <head> tags.

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="banner"><h1>THIS IS MY BANNER TEXT</h1></div>
        <div id="navBar">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="info.html">INFO</a></li>
                <li><a href="contact.html">CONTACT</a></li>
				<li><a href="https://hubpages.com">HUBPAGES</a></li>
            </ul>
        </div>
        <h2>This Is My Paragraph Header</h2>
        <p class="bodyText">
            This is where I am going to put useful and informative text about my website.
        </p>
        <p class="bodyText">
            This is where I am can place even more information about my website.
        </p>
        <div id="copyright">This is where I can place a copyright logo like this &copy;</div>
    </body>
</html>

Now that the main sections of our page have ids or classes, we can reopen our style.css file and start adding some color to our website.

#banner {
    background-color: saddlebrown;
}

body {
    background-color: rgb(209, 162, 98);
}

.bodyText {
    color: #5b120c;
}

As you have likely notice from the code above, CSS is styled slightly different from HTML. In CSS you can specify the piece of your website that you want to style in three ways. First, you can specify a section by referring to its id with a # followed by the elements id. Second, you can specify a section by referring to its tag name like body in the code above. And third, you can specify a group of section by referring to their matching class name with a period followed by the class name. No matter which way you choose to use, you will place an opening and closing bracket after the reference. Any styling in between these brackets will be applied the referenced section and any sub-sections inside that section. For example, if you were to put the code from line 10 inside of the body reference instead, then all the text inside your website body would turn that color instead of just the sections marked with the bodyText class.

The second thing you likely noticed is that there are several ways to refer to a color in CSS. Some colors have been pre-assigned names like blue, red, yellow, and saddlebrown, but for more specific color you can use alternative methods like RGB or hex. I won't dig deep into these alternative methods now, just know that they exist and that there are websites that you can use to find almost any color in RGB or hex. Now, let's take a look at our website and see the difference.

A Website With Some Color
A Website With Some Color

As you can see, even adding a small amount of CSS can make a big difference in the way your website looks. While I admit that the colors chosen are not the best, they are good enough for this example. Now that our website has some color, one problem that you might notice is that the banner is probably not the size that we would like it to be, so let's fix that next.

#banner {
    background-color: saddlebrown;
    height: 200px;
    text-align: center;
}

h1 {
    margin: 0px;
    line-height: 200px;
}

body {
    margin: 0px;
    background-color: rgb(209, 162, 98);
}

.bodyText {
    color: #5b120c;
}

Above, in the #banner section, you can see that we specified the height of the banner to be 200 pixels, and that we also aligned text horizontal. But, that only wasn't enough to fix our banner, so we removed the margins from both the body and the h1 tags. Now, open your website and see the difference.

Fixing Your Website's Banner
Fixing Your Website's Banner

There, that looks much better. Now, that our header is looking better, the next thing that we'll want to focus on is making our navbar look nicer. Let's do that now.

li {
    padding: 10px;
    display: inline;
}

#navBar {
    text-align: center;
}

a {
    text-decoration: none;
    color: darkgreen;
}

Add the above code to the bottom of your CSS file. Here we are referencing different parts of our navbar. First, we reference the <li> tags and specify that we want them to have a padding of 10 pixels, then we switch to inline display so that the links will be listed horizontally. Next, we told the navbar that we wanted to have any text inside of it centered horizontally. Last, we specified that we wanted the links to be dark green, and we removed the underline by specifying none for text decoration. Now, let's see the difference.

Add Styling to Your Navigation Bar
Add Styling to Your Navigation Bar

Again, I'm using ugly colors for this example, but you can easily change the colors on your website by specifying a different one. Even with the ugly dark green color, the navbar looks much better than before. Now, the last thing that we will fix is the body text.

h2 {
    padding-left: 5px;
}

.bodyText {
    color: #5b120c;
    padding-left: 20px;
    padding-right: 20px;
}

#copyright {
    width: 100%;
    text-align: center;
}

In the code above, you can see that we modified the bodyText reference to have 20 pixels of padding on its left and right side. This is to make the text easier to read by spacing it away from the edges of the browser. We also added a new reference for the <h2> tag and specified that we wanted it to have 5 pixels of padding on its left side. Keeping the <h2> closer to the edge of the browser will help give the impression that the <h2> is a header for the body text. Last, we added a reference for the copyright section. We specified that we wanted the <div> tag to be the full width of the browser, and that we wanted the text inside of the <div> to be center horizontally. It is necessary to make the copyright <div> have 100% width so that the text will be aligned properly. When centering text, the text is centered according to the width of its parent <div>, meaning that if the parent <div> is not full width, then the centering will be off. Now, let’s see our improved website.

Style Your Website's Text With CSS
Style Your Website's Text With CSS

There, that looks much better than when we started. While our website is still quite basic, it is clear how much difference CSS can make when doing web design.

Thank You for Reading

Thank you for reading this article, and I hope that you found it helpful. If you have any questions, please leave a comment below. I am more than happy to help with any issues you may have with this project or with HTML and CSS in general. In addition, here are some links to some of the more helpful websites for learning HTML and CSS.

Help Me Get a Better Idea of Where my Readers Stand With CSS

How Much Experience Do You Have with CSS?

See results

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, turbofuture.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://turbofuture.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)