Scribd
Upload
2K views

Css Walk Through

1. This document provides steps to create a basic CSS stylesheet and apply styling to an HTML page. It describes how to link a CSS file, set default styles, add background colors, style text, create boxes to hold content, position elements, center content, add a navigation bar, and include a background image. 2. Key steps include creating and linking a CSS file, setting body styles, adding IDs to HTML elements, writing CSS rules to style those elements with properties like background-color, height, width, padding, margin, and position, and centering the whole page. 3. Advanced techniques covered are using relative positioning to place elements, including navigation lists and images on the page, and adding

Uploaded by

Will Kurlinkus
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Css Walk Through

1. This document provides steps to create a basic CSS stylesheet and apply styling to an HTML page. It describes how to link a CSS file, set default styles, add background colors, style text, create boxes to hold content, position elements, center content, add a navigation bar, and include a background image. 2. Key steps include creating and linking a CSS file, setting body styles, adding IDs to HTML elements, writing CSS rules to style those elements with properties like background-color, height, width, padding, margin, and position, and centering the whole page. 3. Advanced techniques covered are using relative positioning to place elements, including navigation lists and images on the page, and adding

Uploaded by

Will Kurlinkus
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS WALKTHROUGH

1. Create a CSS file

NOV. 2012

Open your html document in both TextEdit and in browser view mode. Create a CSS File: File>>New>>File>>SaveAs>>[Name your css document without spaces or characters and end it in .css]>>Make sure you save it in your website folder.

2. Create a new html page


Because, for this activity, we only want some of the stuff you created. From the html page you created Wednesday select File>>Save As>>Rename your html page ending in .html, and save this new one in your website folder. This creates a new html page. Now delete all the information but your formatted bio content, your header text if you have one, and your picture.

3. Link your CSS file to a new html page


In the <head></head> section of your html document write: <link rel="stylesheet" href="the name of your css file.css" type="text/css">

4. Set all your margins, etc. in your CSS file to default by writing this at the top of your CSS doc:
body, h1, h2, h3, h4, p, div, ul, li {margin: 0; padding: 0;}

5. Create a background color for the entire page:


In your css file type: body {background-color: blue;} If you want to choose a different background color, go to: <http://www.w3schools.com/cssref/css_colornames.asp>.

1.

6. Change some text using CSS


We'll begin by changing how h1 headings will be styled. So, in your html document, make sure you have an h1 header. Mine is at the top of the page and says: <h1>The Biography of Will Kurlinkus</h1> Now, go into your CSS document and create a header declaration, which looks like: h1 {color: white; font: 30px Arial;} For more information on font CSS styling see the introduction to CSS document.

7. Create a content box div


Now, let's create a couple of content div boxes. First, let's put our header in a div. So, in your HTML document write: <div id="myname"></div> Then, place your heading inside that div so it looks like: <div id= "myname"> <h1>The Biography of Will Kurlinkus</h1> </div> Now, return to your CSS file and create a declaration for the div you just created, which will look like: #myname {} Our header is now in a box, but we can't see it, so let's make that box visible by giving it a background color: #myname { background-color: black; }

8. Resize your name box


Right now, the box your name is in will only be as big as the text that is inside it. But what if we want to make that box bigger. Fist, well resize that box using a height property: #myname { background-color: black; height: 80px; }

2.

9. Move your name around inside its content box


But what if we don't want our name up against the side of that box anymore, how do we move it? Well, we can write a rule that changes how headers appear inside our #myname box. It should look like: #myname h1{} This tells the browser to change only <h1> inside <div id=mynames> Now, we can use the margin and/or padding property to move our names. #myname h1{ margin-left: 50px; padding-top: 20px; }

10. Create a box in the center of the page and move it around
Now, let's take our bio content and put it in a div of its own. So, at the top of your bio content start the div with: <div id="biocontent"> and, after all of your bio content, end the div </div> In your CSS file, create the corresponding property for biocontent: #biocontent {} Let's put it in a white box that's 400px in height and 400px in width: #biocontent { background-color: white; height: 400px; width: 400px; } Let's also add some padding to the inside of the box so that our text isn't right again the side of the window: #biocontent { background-color: white; height: 400px; width: 400px; padding: 30px; }

3.

11. Positioning things with CSS


We're going to now move our bio box so it's next to our picture. We'll do this using absolute positioning (for up and down) and a margin (for left and right). #biocontent { position: absolute; top:120px; background-color: white; height: 400px; width: 400px; padding: 30px; margin-left: 400px; }

12. Centering our webpage


Before we move on, let's put all the content we've created in a box of its own in the middle of the page we're creating. To do this we need to create another div around everything. So, around all of your content (right after the <body> tag) in your html page write: <div id="bigbox"></div> Now, let's size this box in our CSS page. Currently, the best size for most webpages is 1024x768. We'll also want to give this box its own background color. And, finally, use the margin property to center it. So, in your CSS file write: #bigbox { width: 1024px; height: 768px; margin: 0 auto; background-color: #696969; }

4.

13. Create a nav bar using a list


Now, let's create a navigation bar for our webpage. A really easy way to do this is using a list. And, rather than having me explain all the steps for this, let's steal a navigation bar from a website that offers free ones. So, go to: http://css.maxdesign.com.au/listamatic/index.htm And look under the horizontal lists section for a navbar that you like. I'm going to use this one: <http://css.maxdesign.com.au/listamatic/horizontal06.htm> paste the html part in the html of your document and the css in your css file: Because my navigation bar contained a position:relative element I need to decide whether I want it above or below the Will Kurlinkus heading at the top of my page. I decided I wanted it under my name so, in the html code, I pasted the nav bar code below the myname div. I also decided to add a background color to the #navlist element so that I could see it better. It looks like this: #navlist { position: relative; top: 0px; margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #000; background-color: chartreuse; }

14. Moving the picture of me


Because of all the different positioning elements and the navigation bar that we added, the position of your picture might have gotten screwed up. So, make a div around your picture in your html file, and add it to your css file as well. Position your photo in the same way you positioned you biobox. Mine ended up looking like this: #biopic { position: absolute; top: 120; }

15. Adding a background image

5.

Finally, try swapping out a background picture for your box background. Ive provided one for you to test with. To add this photographic background, change your CSS to look like: #bigbox { width: 1024px; height: 768px; margin: 0 auto; background-color: #696969; background: url(images/Unicorn.jpg); }

;}

6.

You might also like