CSS Template

Hello,

I am using an eLearning course creator called UDUTU. I have run into some issues in that the course I have written is in a DOC.X format, but UDUTU strips the formatting out when I copy/paste from teh Word doc. I then have to go into the HTML of the page I have created and change things like font size and line height. Strange thing is, when I look at the HTML and the line size says 150%, it’s only single spacing. If I change the value to 200%, it will give me the desired 1.5 spacing. I will have over 300 pages to copy/paste and this will drag me down time wise.

The course creator does have a CSS editor for the template, but I no clue as to what I am doing. After some research, I am no better off.

I need a uniform Arial, 12pt, 1.5 spacing throughout, along with 14pt headers. I figured that if I save the doc as a .TXT file, then copy/paste…I can use the CSS to format it for me. Am I understanding this right?

Here is a copy of the CSS code that I can modify…I just don’t know where and what to add…

[B]body {
background:#FFF url(content_bg.gif) 0 99px repeat-x;
}

.nav {
background:#FFF url(nav_bg.gif) repeat-x;
}

/* update these numbers to adjust the spacing around your logo */
.nav .logo {
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
}

/* update these numbers to adjust the spacing around the buttons */
.nav .button {
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:15px;
}

/* to remove the background image and use the background color you selected in ‘Step 3: Text Styles’ replace “background-image:url(infobar_bg.gif);” with “background-image:none;” */

.infoBar {
background-image:url(infobar_bg.gif);
}

[/B]

Any ideas or help would be appreciated! Thanks for the time…

-Dave

That image hasn’t been approved yet.

BUT, code like this…

<p style=“LINE-HEIGHT: 150%”><font size=4><font color=#000000><font face=“Times New Roman”>

…is a good example of why you should not use Word for creating web pages. To put it bluntly, this code is absolute trash. It really isn’t worth trying to nudge the CSS to control HTML like this. Given that you seem to be able to work with code, you are better off taking the raw text and marking it up yourself, something like this:

HTML

<p>This course has been designed to give managers an understanding of how to deal with health and safety issues.</p>

CSS

body {
    font: 12pt/1.5 "times new roman", serif;
}


p {
    color: #000; 
}

etc.

Hello and thanks for the help,

I have attached a screen shot for how the code below looks. When you paste from Word, UDUTU will ‘clean’ it (so it says). Also, I found out from the some people at UDUTU that I need to strip out the SPAN tags. There is a drop down box that lets me do that, although I’m not sure what I am doing… Here is the code:

<p style=“LINE-HEIGHT: 150%”><font size=4><font color=#000000><font face=“Times New Roman”>This course has been designed to give managers an understanding of how to deal with health and safety issues. (Typed straight into UDUTU)<br><br><font color=#000000><span style=“FONT-FAMILY: ‘Arial’, ‘sans-serif’; FONT-SIZE: 12pt”><font color=#000000>This course has been designed to give managers an understanding of how to deal with health and safety issues  (Copy and paste from Word 2007)</font></span><br></font></font></font></font><br>This course has been designed to give managers an understanding of how to deal with health and safety issues. (Copy and paste from Notepad)<br><br><br><br></p>

I hope this helps…I have also updated the CSS as per UDUTU to get 1.5 spacing, so here is the updated code for that:

[B]body {
background:#FFF url(content_bg.gif) 0 99px repeat-x;
}

/* update these numbers to adjust the spacing around your logo */
.nav .logo {
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
}

.infoBar {
background:#00376B;
padding:0 10px

/* update these numbers to adjust the spacing around the buttons */
.nav .button;
}

.contentBody {
background-color:transparent;
line-height:150%;
}[/B]

Thanks for the help!

-Dave

Hi wisedave! Welcome to SitePoint. :slight_smile:

It sounds like the styles for your pages are “inline”, meaning that they are set on each element. (If that’s not the case, post some of your HTML code to make things clearer.)

It’s a bad idea to bring in code from Word, as it messes with code badly. But anyhow, you probably should first save the file as a simple .txt file.

CSS works best when it is held in a separate file. Then all pages can reference that one file. Do you know how to link to a single CSS file?

I need a uniform Arial, 12pt, 1.5 spacing throughout, along with 14pt headers.

pt sizes are not ideal for the web, as they are more for the print world. Anyhow, you can set those styles for all pages with two simple rules:

body {
    font: 12pt/1.5 arial, sans-serif;
}

h1 {
    font-size: 14pt;
}

If this answer doesn’t help at all, please post some HTML and clarify what your situation is.