0

I'm new to all of this.

For some reason I'm obsessed with having all my styling done in the CSS file.

So even for something as simple as styling a sentence, I would do it like this:

<p class="content"> Welcome to my site </p>

instead of like this:

<p style="font-size: 13pt; font-weight: bold;"> Welcome to my site </p>

For the sake of this question, the above text will only be used once on the entire site. Now which is technically the best way? Is one better or faster than the other? Which way would you use?

Also, if I want to style the 'Welcome to my site' text but not have any extra space above or below like <p> does, what tag is the best to use?

Thanks.

ianbroad
  • 111
  • 2
  • 7
  • 22
  • 1
    The former is the correct way. Your HTML should be semantic, and should not contain any style information. Anything related to styling should be in an external stylesheet. – Vlad Magdalin Apr 02 '13 at 02:01
  • This is an opinion poll and call for discussion, not a constructive question (and also more or less a duplicate of earlier questions). – Jukka K. Korpela Apr 02 '13 at 06:37

5 Answers5

3

Your first method is the best because it obeys a very useful principle for web development, don't repeat yourself.

For example if you have several pages with a certain way of emphasizing text, you don't want to repeat all of that styling over and over again again. That's why you'd use an external CSS file, so all of your styling information is in one place and the HTML files are used strictly for content and structure.

Also as a side note, don't create too many classes, make the most of the tags built into HTML and HTML5 such as em, h1 through to h6, strong etc. because they'll save you some time when writing the HTML and CSS

1

The first one is better, the second one is frown upon due to several reasons.

Think about it, if you had 10 paragraphs with the same styling and one day you decide to change such styling. Then, which way would be easier: To look over all your pages and looking at every paragraph or just changing it in one place?

Also, by NOT using inline styling you are:

  1. Making your code easier to read.
  2. Very likely making your web site faster (smaller file sizes, and browsers will most likely cache your css).
  3. Making it harder for you to reuse your styling.
  4. Being nice to anyone who may inherit your project.
Ares
  • 5,905
  • 3
  • 35
  • 51
  • Okay, that makes sense but what if this is only to be used once. Is it still best to use the external stylesheet? – ianbroad Apr 02 '13 at 02:05
  • You may want to use something just once today, but that doesn't mean that you may one to use the same style in another page later. – Ares Apr 02 '13 at 02:08
  • Alright, I'll keep doing it how I am then. Thanks for your help. What about my second question dealing with the best way to style text if I don't want to use

    .

     – ianbroad Apr 02 '13 at 02:11
1

For your first three question, please refer to this answer. If you do not want spacing above and below the p tag, use

<p style="margin: 0;"> Welcome to my site </p>
Community
  • 1
  • 1
viclim
  • 959
  • 8
  • 16
  • Okay, but what if I just don't want to use

    but still want to style text. Is it best to use

    , etc? Is there something besides

    and

    that I can use to style text?

     – ianbroad Apr 02 '13 at 02:08
  • I recommend use to style text.

    is for Header Text and

    pretty much is for something like a paragraph.

     – viclim Apr 02 '13 at 02:16
  • Please choose an answer to indicate this question as solved. – viclim Apr 02 '13 at 02:31
1

You should get out of the habit of using inline styles, they are bad and prevent your markup from being clean and easy to read. Even if its just for one element, you can target an id then in your CSS which indicates there will only ever be one (per page).

Daniel Imms
  • 47,944
  • 19
  • 150
  • 166
1

Definitely the first method is preferable. It looks nicer, cleaner, and is more correct. You should always be consistent, and external stylesheets are the way to go. If you want to be even cleaner, you could avoid the class="content" all together if its in a div with a specific name, and you want all paragraphs in that div to have the same styles (which you should).

For example: 

<div class="content"><p>Welcome to my site</p> ~~~ other content ~~~~ </div>

and then 

#content p { ~~~ styles ~~~ }

Now, as far as your other question. To have content without any space around it, use a <span> tag. You can style it the same as a <p> tag, just as far as I know it doesn't have any space around it and won't react to margin or padding.

eshellborn
  • 11,031
  • 5
  • 20
  • 29