...

View Full Version : CSS: can I use X instead of P?



fail
12-28-2009, 04:37 AM
A silly beginners CSS question:

Can I use X instead of P? To give an example:

<style>
x {
font-size:0.8em ;
font-family:arial;
}
y {
font-size:0.85em ;
font-family:arial;
}
</style>

And then use <x>Whatever Text...</x>

'P' will interfere with some line breaks that I use.

The method works, but is it "good coding"?

Arbitrator
12-28-2009, 05:56 AM
Ne method works, but is it "good coding"?Simply put, no.

I'd expect you to be able to get away with it in any browser except maybe Internet Explorer, but that would technically be a violation of every HTML spec (I don't know if the draft version 5 allows that when using the XML serialization (XHTML 5) though). Basically, there's a set of conforming elements and you're restricted to those if you want to write a document that conforms to an HTML spec.

You could do that (correctly) with XHTML 1.0/1.1, but you'd have to drop or amend the DTD and put the x element in a different namespace. You could also do it with generic XML.

fail
12-28-2009, 06:23 AM
ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.

How about then p1, p2 etc.....? Or what about <div style="xxxxxxx:0000"> ?

I like to use something that really just do what it is supposed to do inside the brackets.

oesxyl
12-28-2009, 06:41 AM
ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.

How about then p1, p2 etc.....? Or what about <div style="xxxxxxx:0000"> ?

I like to use something that really just do what it is supposed to do inside the brackets.
h1 .. h6 are headers tags, p is paragraph. I don't think you can use a paragraph where you need a header, right? There is some semantics behind this (x)html markup.
If you want to style in a different way same type of element, p or h1 ... h6, you can use css selectors.

http://reference.sitepoint.com/css/selectorref



.small { font-size: 0.8em; }
.large { font-size: 0.85em; }




<p class="small">...</p>
<p class="large">...</p>


or you can change style inline but using the correct syntax for css.



<p style="font-size: 0.8em;">.....</p>
<p style="font-size: 0.85em;">....</p>


best regards

Excavator
12-28-2009, 06:41 AM
ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.

How about then p1, p2 etc.....? Or what about <div style="xxxxxxx:0000"> ?

I like to use something that really just do what it is supposed to do inside the brackets.


Normal text could just be surrounded by <p></p> tags and styled from your CSS as p {color:#fff;font-size:0.8em;}
If you had a sentence that you wanted to style differently, you could use a class like this <p class="bold"></p> and style it like .bold {font-size:1em;color:#f00;}
If you have a single word or two that you want to style differently but you don't want other p stylings to be applied, try a span. Like this - <p>This is just a <span class="bold">demonstration</span> sentence.</p> This span would take on the styling for the class .bold that we already made in the previous example.


Have a look at some more text styling at http://webdesign.about.com/od/css/a/aa112000c.htm

fail
12-28-2009, 06:55 AM
Thanks a lot! SPAN is the one I was looking for.

I guess I don't need to stick to .small .large etc. and I can do my own creations, such as .invoice or .bankdetail

Arbitrator
12-28-2009, 09:20 AM
ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.You can override browser default styles. In this case (for h1, h2, etc), the default style is font-weight: bold (or maybe font-weight: bolder or font-weight: 400). You can return the font weight to normal with h1, h2, h3, h4, h5, h6 { font-weight: normal; }.

The important thing is that you should use a meaningful element for the content then style it appropriately afterward.

seco
12-28-2009, 09:22 AM
or work with parent/child

VIPStephan
12-28-2009, 06:12 PM
Thanks a lot! SPAN is the one I was looking for.

I guess I don't need to stick to .small .large etc. and I can do my own creations, such as .invoice or .bankdetail

CSS is styling HTML elements. A simple CSS rule consists of a selector, a property, and a value:


selector {property: value;}


The selector in its most basic form is always referring to an HTML element, so since there are no HTML elements like <x> or <p1> you can’t just use them in CSS.


<p>text</p>
<a>text</a>
<span>text</span>
<h1>first level heading</h1>
<h2>second leve heading</h2>
<h3>third level heading</h3>
<ul>
<li>text</li>
</ul>
<div id="whatever">text</div>
<strong class="someclassname"></strong>



p {color: red;}
a {color: blue;}
span {color: green;}
h1 {color: maroon;}
h2, h3 {color: aqua;}
ul {background: yellow;}
li {color: lime;}
#whatever {color: gray;}
.someclassname {color fuchsia;}


You can only use such CSS element selectors that exist as HTML elements. Of course, there are more advanced selectors that use class, ID, attributes etc. (see the last two examples) but those you can learn about in various sources on the internet, among which we have http://www.w3.org/TR/CSS2/selector.html from the entity that has invented them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum