css and <style type>

  sheila.weston 19:44 21 Oct 2007
Locked

I am trying to change my website over to one using css. Under the line saying style type="text/css">, there is the following:
/* ![CDATA[*/
p.c2 {text-align: center}
h1.c1 {font-size: 120%; text-align: center}
/*]]>*/

Is this an 'embedded' style sheet or what? Can I delete it, as it looks like a 'comment'? What does it mean? What are c1 and c2? (I understand about the items withing the brackets).

The trial web pages are at click here (they aren't nearly ready for public viewing yet!)

Many thanks for any help.

  Eric10 11:36 22 Oct 2007

This is indeed an embedded style sheet and only affects the page on which it appears.

The c2 class centers text ONLY when used inside a paragraph tag. This only occurs once on your page and since the paragraph is empty then it is not having any useful effect at all.

The c1 class overrides the normal h1 setting when used inside the h1 tag. Specifying h1.c1 means that it is only effective when used inside an h1 tag. This is used on your page for the heading "HOME PAGE".

My own preference would be to move "h1.c1 {font-size: 120%; text-align: center}" into your external stylesheet (sheila.css) and delete the embedded styles from the head section of your page.

While I'm at it I should mention that the line that reads <script type="text/javascript" src="click here"></script> is duplicated so one instance of it could be deleted.

  Eric10 11:40 22 Oct 2007

The last paragraph should have read:
<script type="text/javascript" src="http : // images. rootsweb. com/new/js/fp.js"></script> but without the added spaces.

  sheila.weston 13:17 22 Oct 2007

Many thanks, Eric. Yes, I have already deleted the duplicated line on the file waiting to be republished. I am removing the lines as well as the blank line later on the page which use this style.

For the record, if I did want to add this to the external style sheet what do I put in sheila.css file?

Is this correct?:

/*================Special Text==============*/
p.c2 {text-align: center;}

h1.c1 {font-size: 120%; text-align: center;}

and in the code of the page:

<input class = "p.c2">
and
<input class = h1.c1>

Presumably they don't have closing tags?

  Eric10 18:27 22 Oct 2007

Adding the styles at the bottom of your external stylesheet as you suggest will be fine.

The existing code on the page is already correct:
<h1 class="c1">HOME PAGE</h1> and <p class="c2">Paragraph text here</p>

The style definition "h1.c1" just means apply the c1 class only if it appears within the h1 tag.
"p.c2" means apply the c2 class only if it appears within a paragraph tag.
e.g. <p class="c2">Your text here</p> will apply the c2 styles to the words "Your text here" but if you were to use <div class="c2">Your text here</div> then the style would not be applied because it is used in a div rather than a paragraph.
Similarly, <h1>HOME PAGE</h1> will format "HOME PAGE" as specified by your h1 definition while <h1 class="c1">HOME PAGE</h1> will also apply the styles set out in h1.c1.

I hope that clarifies it a little.

  sheila.weston 18:54 22 Oct 2007

Many thanks, Eric. I am gradually getting to understand css. I'll mark this as 'resolved'.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Best phone camera 2017

Stunning new film posters by Hattie Stewart, Joe Cruz & more

iPad Pro 10.5in (2017) review

28 astuces pour profiter au mieux de votre iPhone