CSS - school assignment

HTML & CSS
1

Hello everybody,

I am a student from Denmark. I have been given a task that causes me problems. I therefore seek help/guidance for how the task can be solved.

The assignment is as follows:

Create a webpage that uses the CSS code in Appendix 1 (below). The CSS code must be placed as an internal stylesheet, in the head section.

Annex 1:

Annex 1: CSS-kode

body {
font-family: arial, helvetica, sans-serif; 
font-size: 13px; 
color: #333333; 
background: #bfbfbf; 
} 

p { 
padding: 10px; 
} 

p.citat { 
font-family: roman, 'times new roman', times, serif; 
font-style: italic; 
padding: 20px; 
} 

.roed {
color: #ff0000; 
}

a.moerk:hover {
background: #aaaaaa; 
color: #362ca0; 
text-decoration: none;
} 

#wrapper {
margin: 0 auto; 
width: 1000px; 
} 

#header {
float: left; 
height: 75px; 
width: 1000px; 
background: #0066ff;
} 

#content {
float: left; 
background: #ffffff; 
width: 850px; 
} 

#leftcolumn {
background: #33ccff; 
width: 150px; 
float: left;
}
2

Hello @jockejocksen

Which part are you having trouble with? How much HTML do you know?

3

Hey Gandalf458

Thank you for quick reply.

Do you mean how my HTML level is? - in that case i have worked with html 1 year, approximately.

I dont know anything about the HTML in this assignment.
How should i combine this CSS code/sheet to some HTML i do not have. - maybe i dont understand the task right… Shall i code the HTML by myself?

Regards
Kristoffer

4

I believe that’s what you’re being asked to do. You need to come up with a design that would require those CSS rules, and then implement that in HTML. The names of the rules lower down should give you a pretty good clue as to the basic layout.

5

Thanks for the response chrisofarabia.

Okay. I’m hard to imagine how to start the html sheet. My skill level, is not that high yet. If you have time and want to help, maybe you can give an example of how to start the HTML coding if the HTML coding should match the predefined css sheet?

Regards
Kristoffer

6

Have a look at this post from last week. There are a couple of things you need to modify, but it will get you started

  1. Exclude the separate style sheet and put the CSS into style tags in the HTMP page <head> as instructed
  2. Exclude the JavaScript file
  3. Delete all the HTML between
<body>
...
</body>

Suggested basic project structure

7

Thanks for reply. I will look into this post.

Regards
Kristoffer

8

I’ve been facing this task and I can’t solve it. I would therefore ask if there are any who can create an HTML sheet that will match the CSS sheet.

That would make me very grateful. Thanks in advance.

9

I do not think anyone is going to write it for you but they will help if you try. What do you have so far?

You say you have been using html for a year so you should be able to create an html page, start with that. The wrapper holds the header, content and left column.

10

Yes sure. Can you tell me my next step?

My HTML sheet looks like this so far:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>IT-project</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
        body {
font-family: arial, helvetica, sans-serif; 
font-size: 13px; 
color: #333333; 
background: #bfbfbf; 
} 

p { 
padding: 10px; 
} 

p.citat { 
font-family: roman, 'times new roman', times, serif; 
font-style: italic; 
padding: 20px; 
} 

.roed {
color: #ff0000; 
}

a.moerk:hover {
background: #aaaaaa; 
color: #362ca0; 
text-decoration: none;
} 
#wrapper {
margin: 0 auto; 
width: 1000px; 
} 

#header {
float: left; 
height: 75px; 
width: 1000px; 
background: #0066ff;
} 

#content {
float: left; 
background: #ffffff; 
width: 850px; 
} 

#leftcolumn {
background: #33ccff; 
width: 150px; 
float: left;
}
</style>
    </head>
    <body>
        <div>Test</div>
    </body>
</html>
11

You need to create all of the elements in the CSS. For example you have:

#header {
  float: left; 
  height: 75px; 
  width: 1000px; 
  background: #0066ff;
}

So go ahead and create an element with the id of “header”:

<body>
  <div id="header>My Awesome Header</div>
</body>

And so on.

12

Argh, that was just what I needed. Thank you very much. I’m in war with it.

13

Here’s what I would do.

The first problem I have is that although I might have a rough thought about style, out of habit I always write HTML before CSS. I have trouble working backwards.

First thing I can use that would help me is to recognize the CSS selectors.

  • element selectors imply corresponding HTML elements
  • id selectors imply a single corresponding HTML element
  • class selectors imply multiple corresponding HTML elements

After that, I would look at the CSS rules for the various blocks and, having a general idea of what they can do, try to imagine what kind of HTML layout could benefit from those styles.

My last step would be trying different page layouts repeatedly until I was satisfied with the results.

BUT, because this is for an assignment, it might be you get graded based on completing the requirements despite how it renders?

2 Likes
14

Where is the wrapper @James_Hibbard ?

The wrapper comes first after the body as that holds all the other divs

The different colour backgrounds are useful as the can help you find problems.

15

Thank you very much. I also do like you. Starting with html, then I’m styling it. This task is just a task where we should try to make it “backwards” to prepare for this assignment if it should be in an exam. So I’m not judged on this task.

16

Yeah man, was just an example of what is expected. I didn’t want to give too much away.

17

That sounds fair. (caution though, my concept of “task” would likely seem eccentrically out-of-date and outside of reality to many)

To get deeper into the

If I thought the process might get messy with notes, arrows, and cross-outs, I would use pen and paper. Otherwise I might use a text file editor directly.

To begin, I would ignore all the rules - the {} bits.

Then I would list the selectors. Perhaps in their use order, or by type if that would be easy enough straight away.

To reemphasize, the very first take-away is to be able to identify the selectors by element, id, and class. Putting aside other types of selectors for now, but keeping note of them.

Do you have such a list?

18

The task looks difficult without any content. It may be simplified by first copying the complete css script and placing inside the body/body elements.

Unfortunately the text will wrap and form a single line. Using pre/pre element will retain the linefeeds.

I would then use each selector inside an element and copy and paste the relevant css used inside the element.

Continue until every selector has been used.

Hope that makes sense.

Edit:
Replaced “tag” with “element”. Still not sure the best way to phrase the solution.

19
  • What’s my next step? - I do not really feel that I get the 5 top css encoders involved.

My “body tag” looks like this:

<Body>
           <div id = "wrapper"> Test-wrapper </ div>
   <div id = "header"> Test header </ div>
   <div id = "content"> Test content </ div>
   <div id = "leftcolumn"> Test-leftcolumn </ div>
     </ Body>
20

You have closed the wrapper to early; as I said it holds all the other div’s

You then need to add the css to certain parts of the code paragraphs, links etc. I am sure with a bit of research online you will see how to do that.