Jump to content
Please Use CODE Tags

How to change html font size?

kurtstir
By kurtstir
in Programming
 Share
Posted

Hello,

I am working on designing a website and was having trouble figuring out how to change the font size of non header text. I am trying to make the sentence "Kurt's Blog" Larger. Here is the current code:

Spoiler

Index.html

Spoiler

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>The Realm of L</title>
    <!-- This website is dedicated to the people of the wired. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <div class="nav">
      <h1>Cyberpunk is Dead. Cyberpunk is Alive.</h1>
    </div>
    <p size="30">Kurt's Blog</p>
    <img src="https://fauux.neocities.org/AIRhead.gif" />
    <p>
    <img src="http://2.bp.blogspot.com/_grl13ar2sRg/S-i-TbdO8II/AAAAAAAAAAU/HbX013hTFPY/s1600/brit.jpg" />
   
  <a href="https://en.wikipedia.org/wiki/Megazone_23" target="_blank">
    <img src="/m23.png" />
  </a>

    <p>Anime Club Blog</p>

    <ul> 
      <li>First thing</li>
       
      <li>Second thing</li>
      <li>Third thing</li>
    </ul>

    <p>To learn more HTML/CSS, check out these <a href="http://neocities.org/tutorials">tutorials</a>!</p>
  </body>
</html>
 

 

Spoiler

Style.css

Spoiler

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: #41984f;
  font-family: Verdana;
  margin: 0 auto;
}

h1 {
    color: #41984f;
  }
  
  img {
      Width: 500px;
      height: 400px;
      border: 2px inset green;
    }
    
  .nav { background-color: black;
  }

 

 

IM BACK BABY

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

This thread should be in programming, but use this: 

 <p style="font-size: 30px">Kurt's Blog</p>
Spoiler

Updated index.html 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>The Realm of L</title>
    <!-- This website is dedicated to the people of the wired. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <div class="nav">
      <h1>Cyberpunk is Dead. Cyberpunk is Alive.</h1>
    </div>
    <p style="font-size: 30px">Kurt's Blog</p>
    <img src="https://fauux.neocities.org/AIRhead.gif" />
    <p>
    <img src="http://2.bp.blogspot.com/_grl13ar2sRg/S-i-TbdO8II/AAAAAAAAAAU/HbX013hTFPY/s1600/brit.jpg" />
   
  <a href="https://en.wikipedia.org/wiki/Megazone_23" target="_blank">
    <img src="/m23.png" />
  </a>
    <p>Anime Club Blog</p>
    <ul> 
      <li>First thing</li>
       
      <li>Second thing</li>
      <li>Third thing</li>
    </ul>
    <p>To learn more HTML/CSS, check out these <a href="http://neocities.org/tutorials">tutorials</a>!</p>
  </body>
</html>

 

 

I wish I knew how to stop breaking computers...

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
3 hours ago, AMTraxTGE said:

This thread should be in programming, but use this: 


 <p style="font-size: 30px">Kurt's Blog</p>
  Reveal hidden contents

Updated index.html 



<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>The Realm of L</title>
    <!-- This website is dedicated to the people of the wired. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <div class="nav">
      <h1>Cyberpunk is Dead. Cyberpunk is Alive.</h1>
    </div>
    <p style="font-size: 30px">Kurt's Blog</p>
    <img src="https://fauux.neocities.org/AIRhead.gif" />
    <p>
    <img src="http://2.bp.blogspot.com/_grl13ar2sRg/S-i-TbdO8II/AAAAAAAAAAU/HbX013hTFPY/s1600/brit.jpg" />
   
  <a href="https://en.wikipedia.org/wiki/Megazone_23" target="_blank">
    <img src="/m23.png" />
  </a>
    <p>Anime Club Blog</p>
    <ul> 
      <li>First thing</li>
       
      <li>Second thing</li>
      <li>Third thing</li>
    </ul>
    <p>To learn more HTML/CSS, check out these <a href="http://neocities.org/tutorials">tutorials</a>!</p>
  </body>
</html>

 

 

Alright Thank You!

IM BACK BABY

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I dont know if you do this to create a blog or doing it for learning purposes, but once you got a bit familiar with css and html maybe try something like Bootstrap.

It helps you makes your website mobile friendly etc.

Quote or mention me if not feel ignored 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
6 hours ago, Cruorzy said:

I dont know if you do this to create a blog or doing it for learning purposes, but once you got a bit familiar with css and html maybe try something like Bootstrap.

It helps you makes your website mobile friendly etc.

boot strap is more for the layout of a sore than the "style". Doing inline styling isn't really something you should be doing.

 

moving it to a css would be better then you can

p{font-size: 30px;} that way all p tags use that style and you don't have to add the style every single p tag

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Im aware maybe i could have tried to make that clear also, just wanted to throw the name bootstrap out there to let him know its an option for when he get more familiar and wants to try something new.

Quote or mention me if not feel ignored 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

And then he should get familiar with the idea that just throwing more frameworks at a problem won't make the problem go away. A "mobile UI" is easily achievable with one single CSS @media block. Don't use more code without more efficiency.

Write in C.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

It already looks perfect on mobile. kurtstir.neocities.org

IM BACK BABY

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

He's already calling an external css file so i'm surprised no one has told him not to use inline styling. There's nothing wrong with inline styles but its great to get into the habit of maintaining a stylesheet as once your site grows it would be a nightmare to maintain inline styles.

 

'Kurts blog' also seems like a fairly important content item so for SEO id suggest using a header tag.

 

I would change your html to  

<h2>Kurt's Blog</h2>

And add this into your css: 

h2 {
    font-size: 30px;
}

Or you can give your paragraph tag a class then style the class: 

<p class="large-text">Kurt's Blog</p>

And style the class in your style sheet: 

.large-text {
    font-size: 20px;
}

 

Keep at it though it will all fall into place! 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
12 hours ago, MattUK said:

He's already calling an external css file so i'm surprised no one has told him not to use inline styling. There's nothing wrong with inline styles but its great to get into the habit of maintaining a stylesheet as once your site grows it would be a nightmare to maintain inline styles.

 

'Kurts blog' also seems like a fairly important content item so for SEO id suggest using a header tag.

 

I would change your html to  


<h2>Kurt's Blog</h2>

And add this into your css: 


h2 {
    font-size: 30px;
}

Or you can give your paragraph tag a class then style the class: 


<p class="large-text">Kurt's Blog</p>

And style the class in your style sheet: 


.large-text {
    font-size: 20px;
}

 

Keep at it though it will all fall into place! 

Thank You!

IM BACK BABY

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Btw, it's not a good idea to use  px  or pt  (pixels or points) because then your website won't scale nicely on various displays.

 

You should use percentages or em , see http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

 

However, sometimes you simply can't do the layout nicely without resorting to px or pt. Just saying.

 

See also http://stackoverflow.com/questions/3557260/should-i-use-pt-or-px

 

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×