Hi

Where do I set the line spacing in the CSS?

h1
{
    background: inherit;
    color: #800000;
    /*text-transform: lowercase;*/
    font-size: 26px;
}

h1{font-size:2.4em;margin:0;color:#FFF;}
h2{font-size:1.7em;margin:0;color:#CC0000;}
h3{font-size:1.2em;margin:10px 0 0 0;color:#000000;}

2 different alternatives above, but both are "overlapping" the rows, that is; too small line space.  ???


How do I get off the lazy butt?

I've studied and tested a bit CSS, including using Dreamweaver and the Firefox toolbar - but I keep messing it up by editing on the page.

I've been through the DNN Skin tutorials and also some "simple CSS" tutorial, but obviously need to do it again.


What are the procedure;
If I have a particular paragraph on a website that I want to look different?

In Dot Net Nuke do I always need to edit the CSS file off line and put it back up through FTP?


Cheers


Olle..

This one seem to work.

But is it necessary to set the line height for each TAG?

H1
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
line-height: 25px;
font-weight: normal;
color: #3D3DFF;
}

H2
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
line-height: 23px;
font-weight: normal;
color: #666644;
}

Hmmmm - Anything seem to work with CSS???

So I guess the question is what's right and what's wrong?
When to use px and when to use em?


p {
margin-top: 5px;
margin-bottom: 5px;
padding-left: 5px;
padding-right:5px;
font-size: 1.2em;
color: #000057;
}
.Normal{ font-size:11px; color:#333333; }


H1
{
font-family: Tahoma, Arial, Helvetica;
font-size: 2em;
line-height: 1.2em;
font-weight: normal;
color: #3D3DFF;
}

Olle,

The CSS element that controls vertical line spacing is line-height.

The easiest way to control the formatting of a particular paragraph is to add a CSS class to the "p" tags that surround it and to add a class definition. Add that class definition to your skin.css file. For example:

< p class="myParagraph" >
text goes here
< /p >

Yes, you'll need to edit an upload skin.css as you make changes. Alternatively, you can make edits to portal.css from Admin, Page Settings. Then the style is attached to the portal rather than to the skin. Sometimes this makes sense. But if you want the style to be part of the skin, you use the skin.css file.

Yes, you'll need to specify the line-height for each tag if you want to style each of the tags.

You should use line-height=1 for single spacing, line-height=1.5, etc. rather than using pixels.  That makes it easier to control.

The difference between em and px is the difference between proportional and fixed sizes.  If you use em, it is "easier" to make items larger or smaller on a proportional basis.  These tutorial might shed some light:

• Introduction to CSS and inheritance in DotNetNuke skins
• Semantic Code and Header Tags in DotNetNuke Skins

Thanks Joe
That clarified a lot.

With the "portal css" are there a "hierarchy" so that skin css overwrite portal css?

The Nina Meier skin I'm working with at the moment looks a bit strange. First I see 3 Container.css and 2 Skin.css files in the Firefox editor.
(The duplicating files are identical.)

there are "h1", "h2" and "h3" classes in the container.css and they do effect the page when playing in the Firefox editor, while if I modify the skin.css and upload those settings will come through.

Bit messy so I keep playing....


Cheers

Olle...

The hierarchy is the order in which the skins are loaded. If you look at that screen shot, you'll see that default.css is loaded first and the "embedded styles" (styles that are actually in the page and not in a css file) are last.  When a css is loaded, it takes precedent over css loaded earlier.  So, read left to right to go from first to last.

Hello,

One of the first things you will want to do is stop those files loading twice. You can see your DNN is loading:


default, skin, container, portal
skin, container, container, container

The reason this usually happens is when there is a line of code in the skin or container html file such as:

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

That line of code is used to call in the skin.css file, however it is not needed as DotNetNuke automatically calls in the skin.css file and container.css file - if that line of code is added into a skin file, DNN tends to load the file twice.

Regarding styling line spacing etc.

I would suggest you set it up so you style the overall line spacing that you require such as:

body
{
    /* set default font size for skin (Titles etc. will then use a percentage to specify their sizes) */
    margin: 0;
    padding: 0;
    line-height: 1.1;
    font: small Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #666;
}

or set it to style the p tag rather than body tag and then if you need to style individual paragraphs use the class method that Joe has previously mentioned.

You may find it useful when playing with CSS to have a look at this book for reference:
CSS Reference Book (112 page PDF)

There is a full explanation in there for working with line-height

Thanks a lot guys!!!

Yes I found the reference book and printed all 112 pages the other day.
I know I've done your DNN-issue 10 and 11 before, but it's a long time ago. I will refresh again.

It's probably a discipline problem, I tend to mess around in the page rather than using CSS properly.

Will check this skin's html for the string you mentioned.


Cheers for now..


Olle...

Thanks for that Joe and Lee!!

It all worked perfectly here; http://www.aimartialarts.com

But already on this new site I found that I messed up a bit with copy and paste, and on older sites I have a lot of on site text format to clean out. Time to start getting disiplined.

 
Also, the existing code looks a bit messy?
Do I really need padding, margins and line spacing on top of each other?

I've added the line height now, will that make margin top and bottom obsolete?

H1{
    font-family: Tahoma, Arial, Helvetica;
    font-size: 30px;
    font-weight: normal;
    color: #2C8ACE;
    line-height: 1;
    padding: 2px 0 1px 7px;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;
}  
   
H2{
    font-family: tahoma;
    font-size: 18px;
    font-weight: bold;
    color:#2C8ACE;
    line-height: 1;
    padding: 2px 0 1px 7px;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;

}

H3{
    font-family: tahoma;
    font-size: 14px;
    font-weight: bold;
    color:#2C8ACE;
    line-height: 1.2;
    padding: 2px 0 1px 7px;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;
    }

Margins, padding, and line spacing are all different.  Take a look at the "box model" for an element here.  Line height applies within the element.  The margins and padding are external.

One thing you may want to start using is CSS Shorthand, it will reduce the amount of code you are writing:
Minimising and creating efficient CSS code

Thanks Guys.
And a good site the HTML Dog - have put it in my shortcuts.

Remember I done that tutorial when I did skinning Joe, (will do it again) some how I never got into using CSS properly.

It's a bit like learning to touch-type, how many people are wasting time all day everyday not being able to type properly? (I'm one!) Have a GREAT WEEK!