Jump to content

CSS <h1> & <p> class problem. Line changing/spacing


PeterBubresko

Recommended Posts

I have written several lines of text. Each new section should begin with bold and highlighted text. This is controlled with CSS (ext. file). I have tried to create a class for both <p> and <h1>. Both close with </ **> It's not that they do NOT work, nope, they make the text both highlighted and bold, but the text that comes after </ **> comes on a new line. Why? What am I doing wrong?

p.head_line {
font-family: "Helvetica, Ariel";
font-weight: bold;
font-size: 14px;
font-color: # 000000;
}

h1.head_line {
font-family: "Helvetica, Ariel";
font-weight: bold;
font-size: 14px;
font-color: # 000000;
}

<p class = "head_line"> Bold Text </p> Normal text.................

<h1 class = "head_line"> Bold Text </h1> Normal Text..............

The normal text begins on a new line but should continue on the same line after the bold. How do I do it?

Link to comment
Share on other sites

On 11/6/2021 at 9:54 PM, gizmola said:

If you can read and understand this article on the Box Model, you will have a lot of the fundamentals you need to know about CSS.

First i get a good advice that was working. Then i get another advice because the first one wasn't good enough. I am just trying to learn something new here. The first og them works pefectly the way i want it to be. So why confuse me me with one more? Any way, i got to ask. What is the right way, and what is the best way? As long they are working and do theire job for me i dont realy see the problem or care. I just wanted the first words of a line to be bold.

Gismola: Thank you so much for the link. I was looking at it, and that is just what i need. On the page you sent me to i found so much  more. I need more of those kind of sites, please? Thank you.

Link to comment
Share on other sites

9 minutes ago, PeterBubresko said:

First i get a good advice that was working. Then i get another advice because the first one wasn't good enough. I am just trying to learn something new here. The first og them works pefectly the way i want it to be. So why confuse me me with one more? Any way, i got to ask. What is the right way, and what is the best way? As long they are working and do theire job for me i dont realy see the problem or care. I just wanted the first words of a line to be bold.

Gismola: Thank you so much for the link. I was looking at it, and that is just what i need. On the page you sent me to i found so much  more. I need more of those kind of sites, please? Thank you.

There is really no 100 percent correct way of coding or in this case HTML/CSS, but most web designer/developers try to follow standard coding practices. If you want to decipher all the confusion then just go to https://validator.w3.org/ yourself. In my opinion HTML/CSS can pretty forgiving which can be a good or a bad thing.

Edited by Strider64
Link to comment
Share on other sites

In addition to the box model, there's semantic web markup wherein the tags define the structure of the page and how important individual elements are - this is important in many different ways to many users. I think this is what everybody so far has been getting at - note that Barand used a span with the class 'headline' instead of an actual h1 tag and requinix pointed out that headings and paragraphs aren't meant to be displayed inline. It's based on the box-model structure that gizmola linked to and (i believe) informs the standard coding practices that Strider64 is talking about. This is by no means a complete explanation of the concept, but it's a decent place to start - https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure.

Link to comment
Share on other sites

On 11/9/2021 at 4:02 AM, Strider64 said:

There is really no 100 percent correct way of coding or in this case HTML/CSS, but most web designer/developers try to follow standard coding practices. If you want to decipher all the confusion then just go to https://validator.w3.org/ yourself. In my opinion HTML/CSS can pretty forgiving which can be a good or a bad thing.

I can see that. To me it seems like it is 100 different ways to do things. For me it seems like developers is not so concerned with the standards that they should be. They know about them, but they do not use them to often. take a little from there and put it in another place. I read a bit about browsers, and have realized that if you make a mistake in a script, it is not so important. Think it was called green browsers. As I understand it, a browser today is capable of correcting errors itself. Possibly I am wrong and that I will make more mistakes. I'm fresh and new to the subject and that's why I ask all these (for you) stupid questions. At least I now understand that there is no shortcut to creating a website. So I feel a bit stupid asked the question the first time I came here on phpfreaks.com Actually, I do not understand much of what I am trying to learn, but I catch up a little here and there. So what you tell me means a lot. Og det er det jeg har gjort. Tatt litt her og puttet inn der. Er det så galt. Jeg får et da til å vises noe på skjermen. And is it so importent with that validator thing? It is confusing me more than i learn of it. Because when i try it out in that validator it tells me that it not standard and has a lot of errors. But when i open the site in my browser it is perfect. Thats why i dont understand this standard thing.

On 11/9/2021 at 4:59 AM, maxxd said:

In addition to the box model, there's semantic web markup wherein the tags define the structure of the page and how important individual elements are - this is important in many different ways to many users.

Can you explain this a little for me. I dont think I realy understand... or what you mean? Iwas reading a litle on the box model site. But more i read, more questions i got. I hope it is temporary. I can't do more this night. I am finished in the makeup now and It's broadcasting from 07:00- 10:00. Good Morning Norway.

...or....what is this XHTML thing? Another standard of HTML or the same?

Link to comment
Share on other sites

"Semantic" markup involves the use of html5 tags that are functionally equivalent to a div, but provide some meaning to the inherent structure they create.  

These are all english language words, but hopefully you can see what the W3C was going for.

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Here's a page you might create back in the days when you just had div tags for structure:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

Here's that same page using html5 semantic markup:

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

This feeds into css, as you now can have element styles rather than having to add css classes to every div.  It's easier to read and understand the purpose of the structure, and this also helps with accessibility for people who are vision impaired and might be using a screen reader.

Yes, browsers were and continue to be forgiving.  There is actual a name for defaults which is "quirks mode".  Browsers also have a default style, and that can vary from browser to browser.  Things are really not that bad however, if you stick to a few simple practices:

  • Your pages should always be html5. 
    • There was a period of time before html5 became standard, that there were competing html standards, but at this point, it's only html5, so just stick to it, and your pages will work well across browsers, and of course you should use the semantic tags listed above as often as possible.
  • Create an html template and ALWAYS use that to begin your html pages, whether they be static or rendered. 
    • In serverside languages like PHP, the best practice is to use a template engine, which really helps with this, as you can create base templates that contain all the boilerplate.
  • Have your css stylesheet include a "css reset" section or something like normalize.css.
    • These are styles that reset built in styles that are part of each browser, so that you aren't trying to fight with or override them.  When you then apply your styles, you are less likely to find confusing issues where your style doesn't seem to work as you intended it to.  They term and technique was coined or at least popularized by a guy named Eric Meyer, who is a well known Web designer and web standards advocate who published the original one.  Since then, projects like normalize.css have come along to make life better for everyone.

Here's a very simple and solid base html5 structure to begin with:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, intial-scale=1.0">
        <meta charset=UTF-8>    
    </head>
    <body>
        <header>
            <nav>Menu Navigation here</nav>
        </header>
        <section>
            <main>
        	</main>
      	</section>  
        <footer>
      	</footer>
    </body>
</html>

 

I wouldn't necessarily suggest to start using it, but certainly study HTML5 Boilerplate, to see what structure they provide as a way of seeing what the thinking is on best practices for structure of a web project.  That project also uses normalize.css.

Link to comment
Share on other sites

On 11/11/2021 at 8:31 PM, gizmola said:

"Semantic" markup involves the use of html5 tags that are functionally equivalent to a div, but provide some meaning to the inherent structure they create.  

These are all english language words, but hopefully you can see what the W3C was going for.

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Here's a page you might create back in the days when you just had div tags for structure:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

Here's that same page using html5 semantic markup:

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

Thanks Gizmola. You realy cleared it up for me when it comes to Semantic and HTML5. Is that the same as XHTML. I have started to learn HTML4 or something. But when i was reading what you wrote i can see that there is a lot of adventage in HTML5 instead of HTML4. Maybe stupid question. Is HTML5 the same as XHTML? I am not so confused anymore. Just alittle. But i am learning. I get a jint here and a hint there.

Another thing is i was looking for was a place to save my home page and had help from a person on a forum to a norwegian news paper. He told me about this ( www.100webspace.com ) in USA. Its  a free service. I thought i had to pay a lot of money for a domain and a space where i could save my home page. I just have to find out how to save it on internet and i can show you what i have made. Sugestions would be fine when i ask for it. First i will try to find it out my self.

Link to comment
Share on other sites

6 hours ago, PeterBubresko said:

Thanks Gizmola. You realy cleared it up for me when it comes to Semantic and HTML5. Is that the same as XHTML. I have started to learn HTML4 or something. But when i was reading what you wrote i can see that there is a lot of adventage in HTML5 instead of HTML4. Maybe stupid question. Is HTML5 the same as XHTML? I am not so 

No, html4 and xhtml were predecessors of html5.  Nobody uses those anymore, and while pages authored with those doctypes still work with most browsers, you should ignore them entirely.  Just use html5!

6 hours ago, PeterBubresko said:

Another thing is i was looking for was a place to save my home page and had help from a person on a forum to a norwegian news paper. He told me about this ( www.100webspace.com ) in USA. Its  a free service. I thought i had to pay a lot of money for a domain and a space where i could save my home page. I just have to find out how to save it on internet and i can show you what i have made. Sugestions would be fine when i ask for it. First i will try to find it out my self.

There are indeed a number of free webhosting services.   Really you get what you pay for, and I wouldn't recommend using any of them if you can avoid it.  If you can afford a from $3,$5 or $10 a month, there are many shared and even cloud service options. 

I would try and avoid shared hosting, and go for a vps(virtual private server) which will allow you to learn a lot more about website development and deployment.  With a VPS you have full root access and the keys for your server, as if you were running your own machine in a data center. You ssh into it, and can do all the setup and administration of your site yourself.  In the process you will learn everything there is to know about web development, system administration and site hosting.

Another reason to avoid shared hosting is that for most of them having HTTPS/SSL on your site (which all sites should have now) is an often expensive upgrade in service, whereas, anyone can now get free SSL Certs, and maintain those using Let's Encrypt and the installation of Certbot.

  • Amazon AWS has a 12 month "Free tier" where you can deploy on an ec2 micro instance.  You get access to the majority of their services and can learn about the world's largest cloud services provider.
  • Vultr is a cloud provider who is currently offering a $150 credit.  They are often compared to the company I have used for many years, Linode.  Both are mid size cloud service companies, so they have more options than a lot of the smaller vps hosting companies.  Their base vps is $6 a month.  You do have to pay an initial $10 which goes as a credit, but basically with $160 worth of credit, your $6 vps will be free for a good long time while you host and learn.  I don't know how long this $150 credit offer will go for.  Another thing that differentiates Vultr which you might like is that they have data centers in Europe, with one in Sweden.  I'd personally suggest opting to host your site there, as it will be closer to you, and your day to day work with your vps will be faster.
  • Hostinger is one of many even lower cost hosts, that have comparable entry level vps's for lowcost.  Hostinger has a good reputation, and I think the low cost one is $3.95/month.  There are many other options if you want to price shop.  Try googling "best cheap vps"  and look through some of the articles and offerings.  Again make sure, you are looking for a VPS and not a shared hosting account.  They are cheaper, but frequently limit you significantly, which isn't what you want as a student and developer in training.

You will get a lot of opinions on this, but I would suggest that if you set up a vps somewhere, opt for either Alma or Rocky linux, which are both what Centos used to be.  Most VPS's default to running Centos, but Centos is being phased out, so you want to start with the latest Alma or Rocky, and they will work exactly as Centos (which is just Redhat Enterprise Linux, aka RHEL).

Link to comment
Share on other sites

  • 1 month later...

Okay, I understand gizmola. Not much has happened since last time. Lots of trouble in Norway again the last weeks due to the coronavirus and the new one, omikron. Now Norway is mostly closed down again from today.

Now it so happens that before I read your recommendations, I had already created an account at 100 webspace. Therefore, I will use them for now, but have your recommendations and tips in mind.

I will see if I can do a little now tonight before I go to work and broadcasting tomorrow early morning (yawn.) I will post the first thing I do as soon as I understand more of this 100 webspace thing.

  • Like 1
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.