Let's Build A Responsive Website Layout!!! - HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 23: Let's Build A Responsive Website Layout!!!

Finally! It's time to work on our layout. We are gonna be learning a few more HTML elements in the process and some new CSS code. Our layout will consist of a completed Homepage with some content areas, a navigation menu that has some animations, and links to our other pages withing our website. It will be a responsive layout. So when we re-size our website, The elements will shrink and/or move to fit the screen. We will also be learning about the CSS external style sheet and using it for this design. There are a few things that we need to do first in order to begin. First we need to clear out all of the garbage on our learning page. Or you can just close it out and keep it as a reference. Just make sure that if you want to keep it you save it and rename it examples.html or something like that. Also you should remove it from the website folder and put it somewhere else. You should get rid of the image that is in there too. Whatever way you decide is fine. Right now you should have a folder on your desktop named website and it should either be empty or you should have an index.html page in it. If you have the index.html page in it, That page is gonna need to be cleaned up. Below is what your new or altered index.html page should look like now. And this is the framework that we'll be working off of:

Basic Framework Of Any Web Page

<!doctype html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Just to clarify one more time, You should have a folder named website on your desktop with an index.html file saved in it. This file should have the code from the above example "Basic Framework Of Any Web Page" inside of it. The website folder should not have anything else inside of it besides the index.html file. And you should not have any other code in that file besides the basic framework code. Once you have that all set up the right way your good to go. Take note that as we go through this process of building a responsive layout you can change the colors, font, navigation button names, etc. You might want to follow along with the exercise and make your changes later. That is also fine. And as far as the meta data goes, the title element, description, and keywords are gonna be left up to you to create as your website will have a different title, description, and keywords. For demonstration purposes I'll add a very simplified example of them as a refresher. The website created in this exercise is gonna be about teaching computer programming. Your site will be about something different. You are free to do whatever you want with the final product that we build here. You can keep it the same or change it completely. That is fine. It's up to you. One other thing to know about website creation is the copyright stuff. If you browse around the internet you'll notice that on most pages you'll see some copyright information down in the footer. You may also see brand names, trademarks and other things. Know that even without the copyright information on the page it is still copyrighted. This is something that used to have to be specified. Nowadays your web pages, images, etc. are all copyrighted the moment you create or upload them to the internet. But it's a good idea to just add a copyright down in your footer anyway. And this way visitor's will know that they need your permission to use any of your designs, etc.

Okay now that we're done with that we need to set up our CSS External Style Sheet. This is gonna be almost exactly like the internal style sheet that we've been using except it will be a completely separate file. And we will control all of our CSS styling right from there in a much more clear and organized way.

Setting Up Our CSS External Style Sheet

We need to create a new file for our style sheet. So up in your top menu in your text editor click on File, then New. When your new file page pops up click on File again and Save as. This time we are gonna save as stylesheet.css. And to make sure that it's saved as a Cascading Style Sheet click on the drop down button for the Save as type box and choose the option Cascade Style Sheets File (*.css). Make sure that you save it into your website folder on your desktop. Depending on what text editor that your using this may be named differently. Choose the option that contains .css. Also if your using just regular notepad you will choose Save as type: all files and when you name the document make sure that you have the .css on the end. After you have all that done you'll see that you have two pages open in your text editor now. They both have tabs that you can click on to switch back and forth from one to the other. So you should have a tab that says index.html and then a tab that says stylesheet.css. We are going to leave the external style sheet alone for now. A few useful things to know here is that even though there is no content on the style sheet page when we saved it as a .css, it has to be saved as whatever document type that you will be creating first in order for the text editor to know what color syntax highlighting it needs to use. And as you already know color syntax highlighting is the font colors that the text editor adds when it recognizes something as a tag, comment, and so on. These colors are different depending on what type of document you are creating. So before you add any content you always save your file as the correct document type first. This is what you should do for any new file in the future no matter what type of file it is. Also when you start to have many pages open in your text editor you can always change the order of the page tabs by clicking and holding on the tabs to move and reorder them.

FYI Just like the stylesheet.css file that we created, When you get into programming for your website to make it interactive you will have a separate file for that too. For example if you use JavaScript for your input forms and for other functionality throughout your website, You would just save your JavaScript file as a something.js file. And you would control all of your programming from that file. Just like your .css file your .js file would also be saved into your website folder. You'll want to save all of your website's files/documents in one folder. This folder is what you will upload when you put your website live on the internet. And that's why you want it to contain all of your HTML content, images, CSS styles, and JavaScript programming. If you have many images, audio clips, or video clips for your website you may want to create a folder inside of your website folder to hold them. One for images, one for audio, and one for video. You would name them appropriately and then when you want to add them to your website just make sure that you add the folder name in the file location like we discussed earlier in Chapter 5: Images. By the way audio and video clips are added in the same type of way that we used for images. This is something that you can look a little deeper into after you've had some experience with HTML and CSS. We didn't cover audio and video because you would normally add them after you build your website and you should have no problem with this because it's so similar to how you would add images.

Linking Our CSS Style Sheet With Our HTML Document

In order for our HTML pages to take the styles that we are gonna add to our external style sheet we need to link them together. You will link every one of your HTML pages that your create in the future in this exact same way as well. So this is also something you'll want on every web page. This is what makes CSS so powerful. Because it can be used over and over throughout your entire website. Add this code inside of your <head></head> element:

<!doctype html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

·<link Tells the browser that we are linking this document to something.

·rel="stylesheet" This is the relationship attribute and the name/value we give it "stylesheet" just defines the relationship between this current HTML document and the document that we are linking to.

·type="text/css" This tells the browser what media type that we are linking to. And this value here "text/css" specifies that it is CSS code.

·href="stylesheet.css"> And we point our link to our "stylesheet.css" document.

We now have our index.html document linked with our stylesheet.css document. Next add this meta data right under the link we just made:

<!doctype html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<meta name="viewport" content="width-device-width initial-scale=1.0">

</head>

First off when you enter this new meta data code from the example above, It's easier to read if you have all of the code on one line. Depending on the device your using to read this book you might see it spread out over two lines. That would still be okay because as you know HTML ignores extra space but you should have the whole meta tag on one line to make it more organized and neat. Okay, This is a responsive meta tag. We won't get into to much detail about this it because it's very advanced. Just know that since we are making a responsive website we added this code here to help the browser adjust to different screen sizes. You will add this tag to all of your HTML documents as well. Just like the link to the style sheet. Also this meta tag can be removed or altered if an issue came up. But everything should be fine with the responsive design were creating here. I have already tested this completed layout in a few browsers and haven't had any issues. You can do a little research on this meta tag. There are many different opinions about the how it works and the different types of values that coders put in here.

Finishing Up The Meta Tags With Example Code

Here we're gonna finish up with all of the meta data and title element information that we need embedded in the header. Remember you will want to add this to every page you create. Just copy and paste it, And alter where it's appropriate for that specific page. You will see that after you create your first HTML page, The pages you create after that is a lot of copy and pasting. So they will be done way faster. For the title element and the meta data I'm just going to add some example information. Again it will be different for you. You want your information to be relevant to your specific web page content. Below is the example setup:

<!doctype html>

<head>

<title>Learn to code in HTML, CSS, and JavaScript fast and well for website development and design.

</title>

<meta name="description" content="This website is designed to teach you how to code in HTML, CSS, and JavaScript to make amazing responsive interactive websites. Please Watch our training video tutorials."/>

<meta name="keywords" content="HTML, CSS, JavaScript, web development, web design, learn coding, programming, responsive website"/>

<meta http-equiv="content-language" content="en-us"/>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<meta name="viewport" content="width-device-width initial-scale=1.0">

</head>

Creating A Top Header, Navigation Buttons, And Logo

Now we will set up the buttons that we'll have at the top of all of our web pages for the user to navigate with. Again once we create this the first time and style it you will just copy and paste this in to every other page that you want navigation buttons on. Add this code right after your<body> opening HTML body tag:

<body>

<header class="topHeader">

<h4>Welcome to Website Development and Design Tutorials</h4>

</header>

<div class="navigation">

<div class="button">

<a href="index.html">Home</a>

</div>

<div class="button">

<a href="tutorials.html">Tutorials</a>

</div>

<div class="button">

<a href="programming.html">Programming</a>

</div>

<div class="button">

<a href="sourcecode.html">Source Code</a>

</div>

<div class="button">

<a href="contactus.html">Contact us</a>

</div>

<img src="images/logo.png">

</div>

</body>

We have added a lot of code to our body element so let's break it all down piece by piece.

¨We created an h4 heading that we will use for the top of all of our pages and we put it in an HTML header element with a class with a name of "topHeader". As we work on this website you will be introduced to some more HTML and CSS code that we haven't covered before. There are many many different HTML elements available to you. And like I said in the beginning of this book you can use as little or as many of them as you want. This <header> element is pretty self explanatory and you can use it anywhere on your page. It's not only used for the header at the top of your page. Okay, As you can see there is no spacing in between the two words in the class name. This is because if we named it like this, "top header" you are actually representing two separate classes. One named "top" and one named "header". Notice how the first letter of the second word is capitalized. If you have more than one word in your name it is considered good practice to enter it in this way and also for programming purposes. This is the most common way but you might also see it entered like this as well, "top_header" or "top_Header". It is probably best to stick with the first letter of the second word capitalized system. And if for some reason your name contained three words, Capitalize the first letter of the second and third word. This will make it more readable. Class names and id's can't have spacing so that is why some coders will use the _underscore to separate words and make it more readable. It's also important to know that when we create our rules in CSS we need to enter the class names, etc. exactly how we entered them in our HTML.

¨Next we create a div for our entire navigation bar with a class name of "navigation". It is best when your going to put a lot of code inside of a div to type both the opening and closing tags so that you don't forget to close the div later. Then just start entering your code inside. If your using notepad++ you can click on a div tag and notepad++ will highlight it's twin tag. If you don't get another highlighted div tag then you probably left one out. You can use this same feature with any of the other tags as well. In the example above we have the navigation div that is holding all of our navigation buttons and all of those buttons have their own div's as well. So we have div's nested inside of div's. You will see why when we get into the CSS code part of this navigation bar. Div's can be used for more than just positioning parts of your page. They can also be used for things like inheriting CSS styles.

¨Then we set up a div class and named it "button". We will re-use this class over and over for all of our buttons. And then if you ever want to add more buttons to your page you can simply use this class again. That's the power of CSS. In total we set up five separate div's with the name"class" and the value "button". One for each of the buttons that we're creating.

¨<a href="index.html">Home</a> This our button setup. For our first button we have an anchor tag that points/links to our index.html page. Which is the page that we are working on right now. So when we have this button setup completely if we are already on the Home page it won't take us anywhere. But it looks better with it included in our navigation bar for our Home page. We gave the button a name of "Home". This is the text that you will see on the button. And finally we close our anchor tag.

¨We add four more buttons in the same way as our Home button.

¨<img src="images/logo.png"> Then finally there is an EXAMPLE of how you might insert a logo below your navigation buttons. This can be a logo banner or even just a picture. Note that you can remove the <img src="images/logo.png"> code and the two div tags that surround the image element if you don't have any type of logo or picture that you want to add at this time. You can also just comment this entire div out by adding the <!--, --> comment code before and after the div so that it's still in your code for you to use later but the browser will ignore it. The purpose of this part of the example is just to teach you a common way of adding a logo that's easy to control with your navigation class. In the example we just add our image element under our buttons but inside of our navigation div because this would let us control the logo with our "navigation"class. In this example to add a logo, We would have created a folder inside of our website folder again and named it images. This way if we saved many images for our website we can keep them a lot more organized in this folder. You can name the folder whatever you want and whenever you want to take an image out of it to put into your website, You would always just specify the folder name first in the file path. For example if you had a waterfall.jpeg image saved in the images folder with the logo.png image. To add it somewhere on your web page you would add this code somewhere in your HTML. <img src="images/waterfall.jpeg">. Also know that if you saved it as .jpg you have to enter "images/waterfall.jpg". It's the same thing except for the "e" in the file format. It's a good idea to pick either .jpg or .jpeg and always save that type of image with the same file format. So if you ever have an image that doesn't load make sure that you have the same file extension in your HTML as you do in your images folder. And the last thing is if you didn't remove this code or comment it out, You can still keep it there as a place holder for now until your create a logo. The browser will just load a tiny file not found image.

We now have the names setup for our navigation bar buttons and the links to make them take the user to another page in our website. But those pages don't exist yet. So let's just create them and save them with the names we just specified in our links. You should be comfortable with this. But in case your not. We need to click File, then New again. Then when your new page pop's up click File, then Save as. And since we already have an index.html we don't have to create another one. The next button in the above example is for the Tutorials page. It has a link that points to tutorials.html. So that is exactly what we want to save this new document as. Again make sure that you click the drop down button for the Save as type box and choose the option that includes .html. And name it tutorials.html. You should also know that if you accidentally saved it as tutorial.html the link would not work. It has to be exact. But if you ever make that mistake you can just rename the document by clicking File, and Save as again. So go ahead and create the other three pages. They are programming.html, sourcecode.html, and contactus.html. If you entered different names for your buttons. Then just save these new documents as the appropriate name you specified. Also, Very important. Make sure that you save all of these new HTML documents into your website folder along with your logo image and/or images folder if you added one.

You should now have six tabs open in your text editor. Make sure that all of the tags say .html except for our stylesheet.css. If one or more doesn't have the .html after the name it may have been saved as .txt or something like that. In this case you would have to re-save and make sure you specify that they are .html documents. We aren't going to be creating any more pages, So that part is set up for now. The new pages that we just created are empty. We just created them to have them set up for later. Right now we just want to get our Home page set up. Then we will reuse a bunch of our code. If you run your index.html page now you will see that we have a header and five links on our page. So far we didn't specify any CSS style to anything and everything is being displayed as a block element. You'll also see that our links are underlined and stacked one above the other. We will change and style all of this later on. For now we're just getting our page content set up. But know that the links will work if you click on them. They will just take you to a blank page because we haven't added any code to them yet. The only page that has anything on it for our entire website is our index.html or otherwise known as our main Home page.

Setting Up Our Main Content Section

Next we'll get our main content section set up. Here is the code that you want to add to your index.html page. Put it in right under the </div> closing navigation div tag. You can enter different text for the headers and paragraphs throughout this website build but for now you might want to copy exactly what is in the below exercises. There are a few reasons for this. One is that the amount of content that our elements contain are important for our website to be responsive. That part you will understand better when we start working on the CSS part of this layout. The other thing is that some of the paragraphs contain important information. Some of which you'll understand immediately and some that will make more sense later on. Making a responsive website can be a tricky thing to do. And in order to teach you in a fast manner while giving you a working responsive website I have included some relevant information in the actual HTML content to help you along the way. Remember this as we continue on. There is a lot of content in this next example so make sure to take your time and get everything entered correctly. So here is the next section of HTML code that we want to add after our closing navigation div tag:

</div>

<div class="mainContent">

<div class="content">

<article class="topContent">

<header>

<h2>Hello Internet</h2>

</header>

<footer>

<p class="subHeading">written by Johnathan Doe.</p>

</footer>

<p>Welcome everyone to my new website designed to teach you many different types of computer programming languages. Also if you are interested in web development, web design, or adding programming to your website to make it more user interactive then this is the site for you. Please check out my Tutorials section. Some of the tutorial series that you will have access to are HTML, CSS, JavaScript, PHP, asp.net, and Java. Make sure to take a look at the How to build a responsive website series.

</p></br>

<p>Interested in app or game development? Check out my video series on Java. Java is a complex programming language used in almost everything nowadays. If your new to Java I suggest that you start out with the Java for beginner's series. If you have a little experience in Java or even C# since it is very similar then you should be fine starting with the intermediate series. If you have any suggestions for this site please send us a message in the Contact Us page.

</p>

</article>

<article class="bottomContent">

<header>

<h2>More information on web development and programming</h2>

</header>

<footer>

<p class="subHeading">written by Johnathan Doe.</p>

</footer>

<p>This is an example of second div set up to separate information from the main content that we put in the top. Some reasons for this would be to improve the look and feel of your page. And to separate different subjects that you may be writing about. You can set up as many sections on your pages as you like. This is just a demonstration layout. Also each and every one of your pages can have the same layout or they can all be totally different. You will be able to copy and paste many elements from your main page into your sub pages and just alter where it is necessary. And your CSS rules can apply to those new pages or you can create new rules with the class or id attribute. Another thing to remember here as you go through this lesson is that the size of your content matters too. We are going to be floating our elements to the left when we are positioning. And if you remember how that works it will pin the element to the left of the screen. So this means a few things. The amount of text in this paragraph matters because first of all the browser will read your HTML code from top to bottom. So all of our main content that we want on the left side will display first. Then with giving them a width property we are going to leave room for our right side main content to fill in the extra space. You will see as we go along. But because we are going to be floating everything to the left, the content that we actually want to be on the left has to be larger than the right side content otherwise our content that we wanted on the right will have space to position all the way to the left. A good rule of thumb here for positioning your elements by floating everything to the left is just make sure that you have more content to the left. Which would make sense because it is your main section. You can experiment with floating right and different positioning systems afterward's. You can also add a few line breaks at the end of your left side content as well to create a larger element. But you don't want to add too many as it won't look good. With the float left system that we are using in this layout we are making our page fluid. So when the page is viewed in a smaller display, since we floated everything left when there isn't enough room to display our right side elements on the right they will float left stacking one above the other. You can test this by minimizing the browser window down to the smallest size and seeing what happens to the right side content and your navigation buttons, etc. when we get all of our CSS positioning code entered. We control all of this by specifying our width properties, floating left, margins, and padding. You will have to play around with your code a little bit to get everything just right when you add your own paragraph content. So you will basically debug all of your pages depending on the size of your content to make sure that everything stays fluid/responsive and in the area's that you want.

</p>

</article>

</div>

</div>

®Okay there is quite a bit to go over here. In this section we are setting up some main content for our page. We are gonna place all of this information on the left side of our screen when we position our elements in CSS. All of our positioning will be done in our style sheet. The information provided in the example is just for demonstration purposes. You can enter your own heading and paragraph content, etc. but for learning purposes it's best to use the demonstration text for now and change it later. Also take notice of the indenting and the spacing between our code. You will come up with your own system of how your organize your code. But this is an example of how to make it more readable.

®<div class="mainContent"></div> The first thing we did was set up a div with a class name of "mainContent". This div will hold all of the content that we put in between. Again remember that is better to enter your opening and closing div tags here and then put your other code inside so that you don't forget. Remember to do this for all of your tags as I'm not gonna bring that up anymore. A lot of web developers will create the content of their page and then use the div tags to divide their page into sections for positioning and styling afterwards. The reason that we are adding them in right from the start is because I have already planned out this layout. It's a good idea to at least have a good plan before you start building a site. I usually use ms paint or even a few pieces of paper to map out a layout. You can always change things later.

®<div class="content"></div> We create another div with a class name of "content". And it is nested inside of the "mainContent" div.

®<article class="topContent"></article> Then we create our article tags and give it class name of "topContent". Here we are introduced to a new HTML element. The article is used for things like news and posts. There are many HTML elements that work in pretty much the exact same way but their names can help us sort our content better. So this will hold some of the main content that we want on left side of the screen. We're gonna position this at the top. So we name it appropriately "topContent".

®Next we make an h2 heading that is nested inside of a header element for our article.

®And then we make a p element with the class name of "subHeading" nested inside of a footer element. Here is another use for the footer element. This will be kind a sub heading. You could have done other things here like use the heading tags <h5></h5> for this sub heading instead of a p element. Or use something else other than the footer element. There are so many ways to achieve the same result. It is really up to you how you want to control your elements. I wanted to give you different examples of using the same element in this layout design. But when you get some experience in web development and design your coding will adapt to your style. And even though this will be a working responsive website, Some of the code could have been cleaner and we could have used less code but the goal is to not only give you a working website layout but to also give you a variety of examples.

®<p></p><p></p> Now we set up two paragraph elements with some information. And we add a </br> line break tag after the first paragraphs </p> closing tag to create one empty line in between our two paragraphs. Try it with and without the line break to see what you would prefer.

®We set up another article with a class name of "bottomContent" in the exact same way as the "topContent"

®Finally we add our closing tags for our "mainContent" and our "content" div's. This finishes up the main content section for the left side of the page.

Setting Up Our Sub-Content Section

So let's add some content boxes for the right side of the screen. You can use these for things like links, advertisements, news, updates or whatever else you like. Enter this code for the right side content after your closing div tag for the "mainContent" div:

</div>

<aside class="topRightSidebar">

<article>

<h2>New Tutorial update</h2>

<p>There is a new Java tutorial series on game app development for android devices. Check it out in the Programming section. Learn how to create your own unique game apps that you sell in the online app stores. Whether your into 2d or 3d games, we have you covered in this series.

</p>

</article>

</aside>

<aside class="middleRightSidebar">

<article>

<h2>Join our community!</h2>

<p>We are currently working on a forum section for this website. Check back soon to sign up and join. In our forum you will be able to connect with other people who are interested or working in web design, development, and programming. Here you can ask the community questions about an issue that you may be having or possibly help someone else out in the posts. Our goal is to grow this site into a huge library of computer coding and programming related training videos. Everyone is welcome to join. Thank you for your support.

</p>

</article>

</aside>

<aside class="bottomRightSidebar">

<article>

<h2>Upcoming Events</h2>

<p>Are you interested in science and physics. We are releasing the first video of a brand new Physic's for beginner's series on Monday. We are excited to bring you this series based on a ton of requests in your e-mails. And we're here to give you what you want. There will be a new video tutorial uploaded daily.

</p>

</article>

</aside>

¨Okay so here we have some more new HTML. And that is the aside element. You can use the aside element inside or outside of an article. Some uses for this element are to pull some eye catching content from a news article or a story, and other information like updates to you site, etc. We are using them here for the content on the right side of our page. In the example above they are just filled with some sample content. And we have three sections. These are kind of sub-content area's for our page. Note aside elements don't mean that they need to go on the side of your page. They are meant for side information related to a topic. But you can use them in many ways.

¨So we named the aside classes appropriately based on where they are gonna be positioned later. The class names are "topRightSidebar", "middleRightSidebar", and "bottomRightSidebar".

¨Inside each of the three aside elements we have an article, h2, and p element.

¨Make sure you have all of your closing tags for the articles and the asides.

Creating A Footer For The Bottom Of Our Page

Finally for our home page we are going to create a footer. And you can use footers for many things like your copyright information, trademark, brand, contact info., and links. This footer will be positioned at the bottom of our page. Remember your browser will read you code from top to bottom so you want your footer element for the bottom of the page to be the last thing in your body element. Add this code after your closing </aside> tag:

</aside>

<div>

<footer class="mainFooter">

<p> Copyright © Your Name 2016-----Contact us at something@whatever.com

</p>

</footer>

</div>

</body>

</html>

®We start with a div to hold our footer.

®Then we have the opening footer tag with a class name of "mainFooter".

®Next we put our footers information in a p element.

®Finally we close out the footer and the div.

We are done with the HTML content for our index.html document. But if you run your page in the browser it's pretty boring and everything is stacked on top of each other. So we need to add all of our styling and positioning in our CSS code.

Styling And Positioning In Our External Style Sheet

So now that we're done with the HTML part let's move on to the CSS. We need to jump over to our blank stylesheet.css document in our text editor and start adding some CSS rules. It's important to know that depending on the size of your paragraphs/content you may have to slightly adjust your margin's, padding's, and width's to fit the design you want. Although this website layout works, this responsive website layout that we're working on here is going to be more of a learning tool for creating websites in this way. You will be able to build upon it even more and have a completely unique responsive site. The very first rule that you'll see is one that will affect all of the elements on our page. Then we'll make our body rule to add some defaults that the entire page will inherit except where we override them for specific areas. Add these rules first right at the top of you document because this is where we will make changes that will affect all of your pages in your website. Also remember that throughout all of this CSS we're adding you should save and run your page often. And when your going to run you page in the browser you have to save your stylesheet.css because that is where you added the code or altered it. But then you have to go back to your index.html page before you run. If you ran the stylesheet.css you will just see a page with your CSS code in the browser. Since this page is not an actual visible part of your website that is why you run you HTML page. Later down the road when you have code in your other HTML pages you can run them as well. So to simplify you run your HTML page not the CSS but don't forget to save your changes in code or you won't see the change in the browser.

* {

margin: 0;

padding: 0;

}

body {

width: 100%;

text-align: center;

line-height: 1.5;

font-family: tahoma, georgia, times new roman, arial;

font-size: 100%;

background: gray;

}

·* { Okay we start with the asterisk selector. This rule will affect every element on our pages. So here we're taking away the browser's default margin and padding. We set them to none basically so we can specify our own.

·Then we have our body rule. In here we tell the browser that we want the body to fit 100 percent of the browser window, Align all the text center, line spacing of 1.5, and for the font-family we are saying we want to use tahoma font throughout our website. But in case the browser can't display this font for some reason we tell it to try georgia next. And then we just have two more backups. The font families above are pretty common so the browser should find them easily. It's just a precaution.

·Finally we set our default font size to 100 percent and give a background color to the whole body of gray.

Using percents here instead of some of the other options is really up to you. In my experience it's easier to make adjustments with percentages. But there will be some rules that you will use pixels instead of percents. Okay so we're done setting up our defaults. Let's start styling some elements. The order in which you add your rules is up to you. It wouldn't make any difference to how our styles would work. Let's work on our header. There is a lot of code in this rule that we'll go over. Add this rule to your stylesheet.css document:

.topHeader {

background: -moz-linear-gradient(white, black);

background: -webkit-linear-gradient(white, black);

background: -o-linear-gradient(white, black);

background: -ms-linear-gradient(white, black); /*For IE10*/

background: linear-gradient(white, black);

filter: progid: DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr='white', endColorstr='black'); /*For displaying in IE7, IE8, and IE9*/

height: auto; /*For IE7*/

color: white;

width: 97%;

margin-top: 1%;

margin-left: 0%;

padding: 20px;

border: 1px solid blue;

¨.topHeader { As you already know the . dot specifies this is a class and topHeader is the name of the class.

¨background: Now this part is pretty advanced but I wanted to give you the code for a really nice header with a gradient background. Notice we used background here instead of background-color. This will let us affect multiple background properties at once. And that's what we want to do here. Besides the background-color:, and now the background: properties that you know about. Some others are background-repeat:, background-attachment:, background-position:, and background-image:. Background-image is one you might want to use for things like an image for your entire background instead of a color. And you would do that simply by adding this code to your body rule. background-image URL("thename.jpg"). The other properties are not used very often but you can check them out. So we want to use the background: property here because our header will be a gradient color that starts at white and ends at black. The best way to describe this is to run the code. The other background: rules that we entered are to make sure that this will display correctly in many browsers.

¨filter: This is also really advanced CSS code here. This is basically some more security to make sure that this header displays correctly in different browsers.

¨Although you don't completely understand the filter you should be comfortable with the background: property and that the -moz-, -webkit-, -o-, and -ms- are to make these other browsers accept our code since we have used this same type of system in the border-radius lesson in this book. Again this is very advanced but I wanted to include this in the book so that you can use this code in multiple areas of your website. It doesn't have to be the header. You can add this background to a paragraph if you wanted. This is something that you can do a little more research into if you wanted more information. Also your gradient doesn't have to be white to black. You can add any colors in here that you want. Even custom colors like hex code values.

¨height: auto; This is our final fail safe code and it just makes sure that the text is centered top to bottom in Internet Explorer 7. There are comments next to some of the code to help you better understand what browser version were trying to make this code compatible with.

¨color: white; Here we simply make the font white.

¨width: 97%; We give it a width of 97 percent of the browser window to give it a little space on the outside of the border.

¨margin-top: 1%; And we give a margin to the top of 1 percent to create a little space between the header and the top of the browser window.

¨margin-left: 0%; Here we take away any margin that was on the left of the border so it will span the entire width of the browser window.

¨padding: 20px; Then we add some space between the text and the border so that it's a nice thick header for our page. You can play around with all of the values in this rule to get a style that you like.

¨border: 1px solid blue; Finally we add a 1 pixel solid blue border. This gives a nice highlight affect around our header.

Hopefully this rule wasn't too complicated. You could always add a more simplified header if you choose. Some of this more advanced stuff shouldn't be explained in this book and is better to come with experience because even a coder that has been building websites for a long time would have to do some internet searches to achieve this result for their header. And you'll find yourself wanting to make your styles more eye catching so this is a good example for that. There are so many things that you can do with HTML and CSS if you do the research.

Animations

In the next few rules that we make we're gonna be adding styles and some animations to our navigation bar. I've added some advanced code to this as well to show you how you can add animation to your elements with CSS. The point of the advanced code that we're using in the CSS rules is to give you a better idea of the possible effects that you can create with the power of CSS. As far as the percentages go, just know that I came up with these numbers by trial and error. So when designing your own pages you will try different values until you get the result you want. And with a little bit of simple math. We know we set our body to 100 percent of the browser window. So when we're sizing our elements with percentages it's kind of easy to figure out what percent you want each of them to take up without going over 100 percent. And tweaking the values is what I mean by trial and error. Also since our buttons are links to our other pages our font styling is gonna happen when we create our link style rules. For now we are styling the button itself. So go ahead and add this rule to your stylesheet.css:

.button {

border-radius: 7px;

background-color: blue;

width: 19%;

height: auto; /*automatically fits height to size of the text.*/

margin: 1% .5%; /*1% top and bottom, .5% right and left. */

float: left; /*float left so that they will display side by side.*/

-webkit-transition:-webkit-transform 2s, background 2s;

-ms-transition:-webkit-transform 2s, background 2s;

-moz-transition:-webkit-transform 2s, background 2s;

-o-transition:-webkit-transform 2s, background 2s;

}

®.button { We start our .button class selector.

®background-color: blue; Set the background color of the button to blue.

®width: 19%; Give the buttons a width of 19 percent because we have five buttons and we want a little bit of margin space between them.

®height: auto; Set the height of the buttons to fit the size of the text.

®margin: 1% .5%; Here is another way to shorthand. In this rule we are setting the top and bottom margins to 1% and the left and right sides (space in between buttons) to .5%. So here you could see why we have a value of 19% in our width instead of 20%. Because we want a .5% margin in between our buttons. Which will end up being 1 percent after the two margins are added together.

®float: left; We use the float property on our buttons so that they will display side by side.

®The next four lines of code are setting up our animation. And it is basically one line of code repeated four times to make the code compatible between different browsers. To simplify this advanced code we are telling the browser that we want to make a transformation of some kind and have it take 2 seconds to complete the transition. We also are gonna change the background color and that too we want to have take 2 seconds to complete. This will give us a nice gradient transformation from one color to another that will take 2 seconds to complete. Note that you can change the amount of time that the transition will take. For example a half of a second would be .5s. The next rule that we create will explain what were doing here a little better.

So now we are going to add some style to the button when it is hovered over with the mouse and it will explain the transition and transform code a little better from our .button rule. Add this new rule under your .button rule:

.button:hover {

-webkit-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

background: red;

}

·.button:hover { We have another .button rule. This time we added the :hover selector. This :hover selector can be used in many different CSS rules. You are just styling the rule before the :hover selector when the user hovers their mouse over that specific element. Make sure that there is no spacing in the selector name. So we are creating this rule to make something happen when the mouse is hovering above one of our buttons.

·transform:rotate(360deg); And this is one of the things that we want to happen when the button is hovered over with the mouse. We want it to rotate 360 degrees. And we specified in our .button selector that we want this transition to take 2 second. Here we also add the code to make it compatible in other browsers.

·background: red; This is the second affect that we want. So we want the background to change from blue to red when it is hovered over. In our .button rule we originally set the button color to blue and we specified that we want this transition to take 2 seconds as well. So now the affect of our animation is. We have a blue button that when the mouse is hovered over it will rotate 360 degrees and change it's color in a gradient manner to red at the same time. And this will take 2 seconds to happen.

We are going to style our links now. And the way we do that is by creating a CSS rule for our anchor. Add this rule after the .button:hover rule:

a {

text-decoration: none;

color: white;

}

®a { Our selector for our button text since it is a link is the a or anchor tag.

®text-decoration: none; We take away the default anchor decorations. i.e. underline, blue color, etc. This value none can also be used to take away things like the bullets from an unordered list.

®color: white; And we set the font color to white for our link/button text.

Now we'll set our font color for when our link is active. And by active I mean the link/button that they currently clicked on. Add this after your a rule:

a:active {

color: black;

}

¨a:active { We are styling against the active link by using the selector a:active. Other ways to style against links are :hover which we have already used on the button. But you could also add a rule with the selector of a:hover if you wanted. And that would affect the button text/link. There is also :visited. The :active, :hover, and :visited codes are known as states. They are the state that the current link is in.

¨color: black; And all we're doing to the active link is changing the font color to black.

Styling More Content

We are done with the navigation button style and animation for now. Let's begin working on some of our other content. Add this rule:

img{

max-width: 100%

margin: 10px;

}

·Here we are just creating a rule for our image element. And all that we're doing is telling the browser that we never want our image to exceed 100%. This is more of a safety rule since our layout is going to be responsive and we want our content to size accordingly. You could also enter a min-width: here.

·And we give our image a margin of 10 pixels on all sides so that it isn't bumped up against our other elements.

h2 {

color: blue;

text-align: center;

}

®Here all we did was set the font color for all of our h2 elements to blue.

®And we center aligned the text.

®If you want to style the text for the top header just add an h4 rule.

.subHeading {

font-size: 60%;

font-style: italic;

font-weight: bold;

text-align: right;

}

¨.subHeading { We create a rule for our subHeading class.

¨font-size: 60%; We want the text for our sub headings to be 60% of the original default size that we specified in our body rule. So this will be 40% smaller than our default size.

¨font-style: italic; We make our sub headings font italic.

¨font-weight: bold; And we also make it bold.

¨text-align: right; Finally we align the text to the right.

p {

text-indent: 20px;

}

®All that we did here was give our paragraph elements a 20 pixel indent.

Styling, Sizing, And Positioning Our Main Content

Okay now we'll start working on all of the styles, sizes, and positioning for our content areas. We'll begin with our topContent class. Add this:

.topContent{

background-color: white;

color: black;

padding: 3% 5%;

margin-top: 20px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

It should be pretty clear what we are doing in this rule. Now since we are going to use the exact same rules for our "bottomContent" class all that we need to do is copy this .topContent rule that we just made and paste under itself. And just change the selector name to.bottomContent. When you save and run your page you now have a white background, black font, 3 percent padding to the top and bottom, 5 percent padding to the left and right, and a border radius on all four sides of 5 pixels for both the topContent and the bottomContent sections. We also gave a margin of 20 pixels to the top of both elements to create some separation. So just for a visual your .bottomContent rule should look like this:

.bottomContent{

background-color: white;

color: black;

padding: 3% 5%;

margin-top: 20px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

Next we have our .mainContent rule and we're just gonna use this div to give this section's text a left align. Again you would probably use some of the div's in this lesson in a different way when creating your own design. The purpose of some of this code is to give you more examples of how to use it. You new rule under your .bottomContent rule should look like this:

.mainContent {

text-align: left;

}

Let's work on our div with a class name of "content". As we discussed earlier depending on the size of your paragraphs/content you may have to adjust your percentages. This is normal to do and sometimes you will make adjustments a few times in order to get your placement right especially when you add more content to your pages. So let's add this rule to our style sheet:

.content {

width: 62%;

padding: 3% 5%;

float: left;

}

·We want this to be larger than our right content because it is where we would put our most important information. So we give it a width of 62 percent.

·padding: 3% 5%; We give it a padding of 3 percent top and bottom and 5 percent left and right.

·float: left; Finally we float this div to the left as we will with every other element that we float. If you read the paragraph in the bottom content HTML there is a little explanation of how this works.

Styling, Sizing, And Positioning Our Sub-Content

We're done with all of our left side of the page main content. Now we'll begin working on the right side stuff. First add this rule under your .content rule:

.topRightSidebar {

background-color: white;

color: black;

font-style: italic;

text-align: left;

padding: 1%;

margin-top: 50px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

width: 25%;

float: left;

}

¨.topRightSidebar { Our selector name is the class of topRightSidebar.

¨background-color: white; Sets the background color to white.

¨color: black; Sets the font color to black.

¨font-style: italic; Makes our text italicized.

¨text-align: left; Left align the text.

¨padding: 1%; 1 percent padding on all sides between the text and the border.

¨margin-top: 50px; Here we give a margin to the top of 50 pixels. To get this 50 pixel amount here this value was changed several times until I got the desired placement and that was to line up the tops of the left and right content.

¨border-radius: 5px; And we have a border with a radius of 5 pixels. The next two lines are to make sure it displays the same in other browsers.

¨width: 25%; We give it a width of 25 percent because this is our sub content. It should be smaller than our main content. And this value of 25 percent was achieved by tweaking the value until it looked good and fit nicely.

¨float: left; Finally we float this element left. And since we set a width for our main content and left room for the right content it will float to the left of our top content. This works in this way because we set the widths to the right amount so that they would fit side by side. If there wasn't enough room it would have displayed on the left hand side of the screen underneath all of our main section which we don't want.

Now for both the middleRightSidebar and the bottomRightSidebar we are just going to copy our entire .topRightSidebar rule and paste it below itself two more times. We just change the selector names to match and the values are all the same except for one. So your next two rules should look like this underneath your .topRightSidebar rule:

.middleRightSidebar {

background-color: white;

color: black;

font-style: italic;

text-align: left;

padding: 1%;

margin-top: 10px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

width: 25%;

float: left;

}

.bottomRightSidebar {

background-color: white;

color: black;

font-style: italic;

text-align: left;

padding: 1%;

margin-top: 10px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

width: 25%;

float: left;

}

®margin-top: 10px; Besides changing the selector name for these two rules the only thing that is different is the margin-top value. For these two rules the value is 10 pixels. This is the amount of space that we want in between our three sidebars. The reason that the topRightSidebar had a value of 50 pixels is because we we're lining it up with the left content for a better look.

Finishing Up The Footer

The last HTML element that we are going to add CSS to is the footer. So add this rule to your style sheet:

.mainFooter p {

width: 100%;

background-color: black;

color: white;

font-size: 90%;

font-style: italic;

clear: both;

float: left;

}

·.mainFooter p { This selector is for styling against the p element in the mainFooter class div.

·width: 100%; We give it a width of 100 percent.

·background-color: black; Set the background color to black.

·color: white; Font color to white.

·font-size: 90%; Here we set the font size to 90 percent of our default. 90% is used in the footer often so that it separates it from all of the other content.

·font-style: italic; We italicize the font.

·clear: both; This property and value just makes sure that nothing ends up displaying on either the left or right side of our footer.

·float: left; And we float it left. This is why the bottom of the page footer is added to the HTML right before we close the body. Because we want it to display on the bottom and not side by side with any other element. There are many ways that coder's use to position their bottom of the page footers. This is just one example. And it kind of depends on the type of website that your making.

Responsive Code Introduction

The only other CSS code that we need is the code to make our web page responsive and basically what that means is rewriting some of our CSS rules with changes in the values that we want to happen when the page is viewed on a smaller screen or when the browser window is minimized. And that is how you will test your responsive code to make sure that it's working the way you want. You will add your rules, save and run your page, view it in full screen and then shrink it down to the smallest size while making sure that all of your elements are sizing or moving to the place you want. This is a good place to put a CSS comment in your External Style Sheet to separate this from your original CSS code. Add this comment after your .mainFooter p rule to separate the sections:

/*=================RESPONSIVE CODE BELOW================*/

Now that we have our sections separated with a comment let's start adding the CSS rules that we want changes to happen to when the page is viewed in a smaller screen. It's important to know here that you could have many of these sections for all different screen sizes. This is advanced CSS and is fairly new. Basically this is the way that all websites are or should be made from now on because of the ability to view a web page on many devices and screen sizes. An entire book could be written on this one subject alone. If you would like to learn more about this you might want to check into books specifically about developing responsive websites. Okay add this code under your comment line:

@media only screen and (min-width: 150px) and (max-width: 600px){

}

This code above is telling the browser something about our target minimum and maximum device screen widths. There is a lot to know about this and can't all be explained in this book alone. All of our CSS rules that we have the changes in are going to go in between the two { } curly brackets in the above code. They will hold all of our new rules. Below are the rules that we have the new instructions in:

@media only screen and (min-width: 150px) and (max-width: 600px){

body {

width: 91%;

font-size: 90%;

}

.topHeader {

height: auto;

width: 100;

}

.button {

width: 50%;

margin: 1% 5%

}

img {

max-width: 100%;

margin: 10px;

}

.content {

width: 100%;

padding: 3% 5%;

}

.topRightSidebar {

width: 100%;

margin: 1% 0% 1% 4%;

}

.middleRightSidebar {

width: 100%;

margin: 1% 0% 1% 4%;

}

.bottomRightSidebar {

width: 100%;

margin: 1% 0% 1% 4%;

}

.mainFooter p{

width: 108%;

clear: both;

}

}

Notice that there are two closing curly brackets at the end of this code. One is for closing the .mainFooter p element and the other is the closing curly bracket that holds all of our newly changed rules for the @media code. We're not gonna get too deep into discussion about this. As you can see we have rules that we already created but down here in the responsive code section we specify the changes that we want to happen on these different target screen sizes. When designing a responsive website you would want to test your code on different devices. The changes that were made in the rules above were tweaked until I got the results that looked good. Really all that your changing in these rules is your sizing code. This way of developing will take some research and practice but I wanted to give you a responsive website layout in this book so that you can have a taste of the possibilities of HTML and CSS in the current stage it's in now. Also before we end this part of the book you should know that the rules in the responsive code section only need to include the changed properties and values. The original code that you don't want to change does not have to be included in this new set of rules. These new rules are just instructions to the browser of what changes that you want to happen for specific device screen sizes.

Adding Content To Our Sub-Pages

Now that we have completed the main page of your responsive website layout and added a bunch of styles, creating the content on your sub pages for your website is pretty simple. First you start with the basic framework of any web page and you copy and paste this into all of your other .html documents. You make any necessary changes to the meta data, etc. to fit that specific page. Below is the basic framework of any web page again without the meta data.

<!doctype html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

When you have all of your basic HTML setup for each page you can just copy and paste elements with or without their div's, classes, etc. and make any changes to the content that you want. For example if you wanted your pages laid out in the same way you could copy and paste all of your mainContent and rightSidebar content to your sub pages and change the text in the paragraphs and headers. If you include the class your new content will use all of the styles for those CSS rules. You could also create new classes with different sets of CSS rules to makes your pages different. There are so many ways to develop and design and now it's up to you. Now is the time where you go off on your own and experiment with all of the new HTML and CSS tools that you have learned in this book. Have fun and don't be afraid to try new things with the code. I'm excited to see what new ideas that you come up with.

Final Quiz Chapter 23

1.What are some of the uses of meta tags?

2.What are two common uses for a div?

3.How do you create an external style sheet?

4.What happens to an element that you floated left if there isn't enough room for it to display it on the right side of another element?

5.What is :hover used for?

6.What does it mean to have a responsive or fluid website?

7.What are a few of the things that are important when sizing and positioning your content besides the float property?

8.In simplest terms what is responsive CSS code used for?

9.How is creating you sub-pages easier and faster?