The functionality of both P and H1 tags seems to be malfunctioning

Can someone help me with changing the font family and size of my paragraphs and headings (p and h1)? Any assistance would be greatly appreciated. Feel free to review my code for any other errors as it has been a while since I last coded.

html, body { margin: 0; padding: 0; }

.navbackground {
 height: 55px;
 width: 100%;
 position: fixed;
 background-color: #FFFFFF;
 box-shadow: 0px 1px 5px #686868;
}
.navmenu-and-logo {
 height: 55px;
 width: 960px;
 position: fixed;
 left: 0;
 right: 95px;
 margin: 0 auto;
}
.logo {
 float:left;
}
.menu {
 float:right;
}
.navmenu-and-logo a {
 padding: 17px 15px 0px 15px;
 color: #45ACFF;
 text-decoration:none;
 height: 38px;
 display: block;
}
.navmenu-and-logo a:hover {
 background-color: #A5DFFF;
}
.navmenu-and-logo li {
 font-size: 17px;
 font-family: Arial, Helvetica, sans-serif;
 display: inline-block;
}
.container {
 height: 1024px;
}
.backgroundimage1 {
 background-image: url('backgroundimage1.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 height: 550px;
}
.content {
 margin: 0 auto;
 width: 960px;
 padding: 90px 0px 0px 0px;
 color: #1C3C4E;
}
.content2 {
 margin: 0 auto;
 width: 960px;
 padding: 100px 0px 0px 0px;
 font-family: Arial, Helvetica, sans-serif;
 text-align: justify;
 color: #1C3C4E;
}
.portfolio {
 margin: 0 auto;
 width: 960px;
 background-color: #C9EEFF;
 box-shadow: 0px 1px 5px #CFCFCF;
}
.portfolio a {
 padding: 105px 107px 0px 107px;
 color: #45ACFF;
 text-decoration:none;
 height: 150px;
 display: block;
}
.portfolio a:hover {
 background-color: #A5DFFF;
 display: block;
}
.portfolio li {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 display: inline-block;
}
.footerbackground {
 height: 70px;
 width: 100%;
 background-color: #1C3C4E;
}
.footer {
 font-family: Arial, Helvetica, sans-serif;
 width: 960px;
 left: 0;
 right: 0px;
 margin: 0 auto;
}
.lefttext {
 float:left;
 color: #45ACFF;
 padding-top: 25px;
}
.righttext {
 float:right;
 color: #45ACFF;
 padding-top: 25px;
}
.p {
 font-size: 14px;
 font-family: Arial, Helvetica, sans-serif;
 text-align: justify;
}
<!DOCTYPE html>
<html>
<head>

<link href="css/style.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Loom | Home</title>

</head>
<body>


<div class="navbackground">
</div>
<!--Logo an Navigation Menu-->
<div class="navmenu-and-logo">
<!--Site Logo-->
<div class="logo">
<img src="images/loom1.png">
</div>
<!--End of site logo-->

<!--Navigation Menu-->
<div class="menu">
<li><a href="index.html">HOME</a></li>
<li><a href="contact.html">CONTACT ME</a></li>
</div>
<!--End of navigation menu-->
</div>

<div class="container">
<!--My Awesome Lemon Background c: -->
<div class="backgroundimage1">

<!--Site Content, paragraphs etc.-->
<div class="content">

<!--Title-->
<center><h1>LEARN MORE ABOUT ME</h1></center>
<!--End of Title-->

<!--First Paragraph-->
<p>
If you'd like to know more about me, I'll try to write some stuff that might interest you, but please know that I am not that interesting, but I guess we could start off with my name and go on from there.
My name is Hans, I live in a medium-sized town by the name of Alingsås, Sweden. I am 16 years old and I dedicate my spare time to playing games and doing productive things, such as design, coding, video editing and sometimes building computers. I started with webdesign and coding at the age of 10, and once I found out what amazing stuff you can do with just the tip of your fingers I was hooked!
My first website was made for my friend 5 years ago because his dad needed a site for his company, and I didn't mind helping them considering how fun I thought it was. There is NO WAY I'll be able to write down an entire page telling you about myself, this is pretty much all I can think of so it'll have to do.
Now you know a little bit more about me, so thanks for reading!
</br></br>
Om du råkar vilja veta lite mer om mig så ska jag försöka att skriva ner lite saker om mig som kanske intresserar dig, men tänk på att jag inte är speciellt intressant.
Jag antar att vi kan börja med mitt namn och sedan fortsätta därifrån. Mitt namn är Hans, jag bor i en medel stor stad vid namn Alingsås. Jag är 16 år gammal och jag dedikerar min lediga tid till att spela spel och mer produktiva saker som att designa, koda, video redigera och bygga datorer.
Jag började med att web designa redan när jag var 10 år gammal, och när jag insåg vilka otroliga grejer man kunde göra med bara fingrarna var jag fast! Den första hemsidan jag gjorde var åt en väns pappa för 5 år sen, hans pappa behövde nämligen en hemsida för sitt företag.
Finns ingen chans i världen att jag kan skriva ner en hel sida om mig själv så detta får duga. Nu vet du lite mer om mig, så tack för att du tog din tid att läsa!
</p> 
<!--End of the first paragraph-->
</div>
<div class="content2">
<center><h1>MY PORTFOLIO</h1></center>
<!--Navigation Menu-->
<div class="portfolio">
<li><a href="websites.html">WEBSITES</a></li>
<li><a href="https://www.mediafire.com/folder/xnjysf1dcmj6h/Photos">IMAGES</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLNe5zO4uM4-PUlwnPAsLLXaWYD2ZWQTiD">VIDEOS</a></li>
</div>
<!--End of navigation menu-->
</div>
</div>
</div>
<div class="footerbackground">

<div class="footer">
<div class="lefttext">
Loom.pe.hu©
</div>
<div class="righttext">
Website designed by Hans Nilsson
</div>
</div>
</div>
</body>
</html>

Answer №1

The font size adjustment is missing for h1, and there seems to be a typo with the class name from .p to p.

Answer №2

According to @cocoa's response, you mistakenly used a dot to define a style for an element without a class. The correct ways to format this are:

For styling p, h1, etc:

p{
   font-size: 10px;
}

For styling classes (such as

<p class="aClass"></p>
):

.aClass{
   font-size: 10px;
}

For styling ids (like <p id="someId"></p>)

#someId{
   font-size: 10px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the HTML canvas to sketch on an image that has been inserted

I have a HTML canvas element within my Ionic application. <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> Within this canvas, I am loading an image. Below is the code snippet from the con ...

Reducing the amount of text displayed on ion-text to a minimum

HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...

Boxes that change and adapt to the user's input

Need guidance on a tricky problem! I am working on a form to input various cities that the user wants to visit. The form currently consists of one form box and a submit button. My goal is to allow the user to enter multiple cities by clicking an "Add 1 ...

What is causing this npm error to occur, and what steps can I take to resolve it?

I am currently in the process of integrating a PayPal system into my HTML website. To do this, I am following a tutorial that can be found here: https://www.youtube.com/watch?v=DNM9FdFrI1k&list=PL4eNesgScjZb3oktJK1786zI4nSET_tas&index=4 At 9:10 in ...

Submitting form occurs upon selecting autocomplete suggestion

When a user fills out my form and hits the Go button or presses Enter, the form submits. However, when typing in the text box, it triggers an auto-complete feature after just one character. If the user uses arrow keys to navigate through the auto-complete ...

How can one generate an HTML element using a DOM "element"?

When extracting an element from an HTML page, one can utilize a DOM method like .getElementById(). This method provides a JavaScript object containing a comprehensive list of the element's properties. An example of this can be seen on a MDN documentat ...

Ways to calculate outcome

I'm fairly new to PHP and have run into an issue regarding displaying the number of results. For example, showing 'There are 200 results'. Thank you in advance. Below is the code I am working with: try { $bdd = new PDO("mysql:host=localho ...

Unable to view sidebar navigation on the screen

I've been experimenting with the sidebar navigation from w3 schools, specifically trying to create a side-nav that opens from one div. You can see an example here: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stack ...

"An interactive webpage utilizing HTML5 that transmits sensor information from an iPhone to a server

Recently, I have been immersed in a project that involves utilizing the gyroscope of an iPhone to manipulate items on a computer screen. To achieve this, I have been using an application called "Sensorlogger" which allows me to stream sensor data to the co ...

Opening a dynamically generated HTML file in a separate window in Flutter web

I am facing an issue with the url_launcher package while attempting to open a link using the following code snippet: try { final Uri launchUri = Uri.dataFromString( '<html><body>hello world</body></html>', ...

Would this code effectively disable the right-clicking menu for MathJax?

My current approach involves utilizing the following code snippet: <script type="tet/x-mathjax-config"> MathJax.Hub.Config({ showMathMenu: false }); </script> I intended for this code to disable the right-click menu on my math webs ...

Adding a scrollable feature to a Bootstrap Modal seems to be generating additional unnecessary pages at the

I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: HTML : <div class="container-fluid" id="body-noPrint"> /* HTML BODY CON ...

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...

Display the output based on checkbox selection using JavaScript

I am working on a feature where I need to capture checkbox inputs using JavaScript and then store them in a PHP database. Each checkbox corresponds to a specific column in the database. If a checkbox is checked, I want to insert its value into the databa ...

Trouble with tab switching across multiple cards

I have been working on an app that generates multiple cards with 3 tabs on each card. However, I am facing an issue with tab switching. The tab switching works fine on the first card, but when I try to switch tabs on other cards, it still affects the tabs ...

How can I align two div buttons at the top and bottom to appear on the left and right sides?

How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out th ...

Enhancing the appearance of an image upon hovering in ReactJS: A step-by-step guide

My issue arises from my desire to border an image and display a Card with information upon hovering, but the problem is that this style is being applied to all images rather than just the one being hovered over. After pulling data from a movie API, I stor ...

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

Unable to supersede the current CSS styling

I have implemented the example found here in my project and now I am trying to make the table stretch to fit the entire page. To achieve this, I have added the following CSS: html, body{ height: 100%; } #gridContainer { height: 100%; } table{ ...

Floating elements in IE are dropping below a floated input within an unordered list, while in Chrome everything displays correctly

I've been troubleshooting this issue for an hour now with no success. I'm facing a problem in Internet Explorer and can't figure out why. This is a snippet of the HTML code I'm using to display my registration form: <ul id="registe ...