CSS questions

by Flappypaddles November 24th 2013, 2:11 pm

can anyone help me out with some info on CSS

I have thris in my template

[code]div.table-title h2, .table-title{
color: red;
font-weight: normal !important;
font-style: normal !important;
font-size:small!important
font-family:"Arial", "verdana","sans-serif";
}[/code]
which set the title of a section

however I would also like to set the color and font of the description of teh section as well

and it would be handy to find out what affects other areas as well

by Ange Tuteur November 24th 2013, 2:18 pm

Hello Flappypaddles,

This should modify the descriptions:

Code:: .forabg .topiclist .row div{ color:#f00; }

by Flappypaddles November 24th 2013, 5:18 pm

SethC1995 wrote:Hello Flappypaddles,

This should modify the descriptions:
Code:
.forabg .topiclist .row div{ color:#f00; }

that works a treat
although now I would like to know how to change the appearance of the Last posts as well
and also how to change the position of the text so it flows around the pictures I use for each section
also how do I add a description for each bit of my css code so I know what it does when i come back to it

along the lines of

changes topic heading

changes description

etc etc

I presume there is some character that indicates that the line is not code

by Ange Tuteur November 24th 2013, 5:23 pm

This can be used to style the lastposts:

Code:: li.row dd.lastpost{ /*Properties here*/ }

Comments for CSS are entered as this: /*Comment*/

by Flappypaddles November 24th 2013, 6:33 pm

SethC1995 wrote:This can be used to style the lastposts:
Code:
li.row dd.lastpost{ /*Properties here*/ }
Comments for CSS are entered as this: /*Comment*/

and thanks again

I came across the float property when I was looking for clues online and rather liked the fact that you could make the first letter of a paragraph larger than the rest and cover several lines, however when I tried to add it to a forum description it sent the whole forum haywire

is there a way to use it in just teh description?
I realise the code is more HTML than CSS
but when I try to add the code to a sections description it just puts all the text on the left hand side of the page

Code:: <!DOCTYPE html> <html> <head> <style> span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the first letter of the text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian". </p> </body> </html>

by Ange Tuteur November 24th 2013, 6:39 pm

Well you could leave out the Doctype since its already declared, head, style, and body tags too.

You can use the paragraph tag, but we'll use this for our example:

Code:: <span class="First-Letter">T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

Above we gave the first letter in the span tags the class "First-Letter" That will allow us to style it specifically through our stylesheet.

Example:

Code:: .First-Letter{ float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; }

Doing this will allow us the change any text which are wrapped with span.First-Letter

by Flappypaddles November 24th 2013, 9:03 pm

SethC1995 wrote:Well you could leave out the Doctype since its already declared, head, style, and body tags too.

You can use the paragraph tag, but we'll use this for our example:
Code:
<span class="First-Letter">T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
Above we gave the first letter in the span tags the class "First-Letter" That will allow us to style it specifically through our stylesheet.

Example:
Code:
.First-Letter{ float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; }
Doing this will allow us the change any text which are wrapped with span.First-Letter

thanks again, however out of that came another question

I have some text I wish to place in small print

Code:: /* sets small print*/ .small-print{ font-size:75%; font-family:arial; line-height:100%; color= #000000 }

no problem with that at all, works like a dream, but I also want to position it a few cm's from the left margin

I added

Code:: margin-left:20%;

to the above code, but it only moved the first line of text to the right, any further lines were positioned on the left of the page

so I added this

Code:: /* sets margin*/ .set-margin{ margin-left:20%; }

and

Code:: <span class="set-margin">this is my text.<br> it has more than one line</span>

to my section description

but unless I add

Code:: <span class="set-margin">this is my text.<br> <span class="set-margin">it has more than one line</span>

to each new line of text it does not put the whole thing x% to the right

I thought a margin would put all text to a set position even if it ran to more than one line.

Perhaps there is another command I should be using?

by Ange Tuteur November 25th 2013, 7:35 am

Wrap your content with the paragraph tag(<p>) and give it your margin class. It is a block level element like <div>. The block will move while the content inside stays relative to the element position.

Span is inline, and is mainly used to add a hook to something without adding any visual change by itself.

by Flappypaddles November 26th 2013, 12:03 am

SethC1995 wrote:Wrap your content with the paragraph tag(<p>) and give it your margin class. It is a block level element like <div>. The block will move while the content inside stays relative to the element position.

Span is inline, and is mainly used to add a hook to something without adding any visual change by itself.

thanks it has been very helpful

is there a css tutorial anywhere which highlights all the various different sections and elements of the forum?