Scribd Logo
Upload

Welcome to Scribd!

  • Css Walk Through

    Uploaded by

    Will Kurlinkus
    2K views6 pages
    Create a css file Open your html document in both TextEdit and in browser view mode. Create a new html page and Link your css file to a new page. Change how h1 headings will be styled.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Create a css file Open your html document in both TextEdit and in browser view mode. Create a new html page and Link your css file to a new page. Change how h1 headings will be styled.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2K views6 pages

    Css Walk Through

    Uploaded by

    Will Kurlinkus
    Create a css file Open your html document in both TextEdit and in browser view mode. Create a new html page and Link your css file to a new page. Change how h1 headings will be styled.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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