CSS not working in HTML, help please

CSS not working in HTML, help please
0.0 0

#1

This is my first attempt at coding and I do not understand why the CSS is not working.
As you can see, I used CSS selector to style an element and as well as classes. However, when I load the .html, classes do not work but the element does. Can someone point me to the right direction so I can understand what I clearly do not currently?


#2

Can you be more detailed in what you are expecting the code to do versus what you are seeing? Also, it would be much better if you could post your actual code instead of a screenshot. That way, we can play with the code to see how it works for ourselves.

To post code into a forum post, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

FYI - there is no such element named “head2”.


#3

what i can see here :

  • <style></style> and <title></title> tags arent inside <head></head>
  • missing <body></body> tag
  • custom tag <head2></head2> , if you want to use one , you need to create it properly, but im pretty sure you dont :slight_smile:

for your reference:
html document structure
about <style></style>


#4

Actually, you reminding me that the “head2” was not an element helped a little. I kept on repeating to myself type “head 2” and typed head2 instead of h2.

Problem that I am still running into is that .red-text, .medium-text, and the imported Google Font are not working. I have gone over the HTML lessons–“Import a Google Font,” and “Use a CSS Class to Style an Element,”–multiple times to see what I have done wrong. If I type <h2 class="CedarvilleCursive medium-text red-text;"> none of the classes work. However, if I type in CSS h2 {font-size: 150px; color: red; font-family:CedarvilleCursive;> everything will work except for the font-family.

Here is my code
<!DOCTYPE html>
<html>
<head>
<!--<link href="/Desktop/Practice/style.css">-->
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet" type="text/css">
</head>
<style type="text/css" media="screen">
.CedarvilleCursive {font-family: CedarvilleCursive;}
.medium-text {font-size: 50px;}
.red-text {color:red;}
p {font-family:CedarvilleCursive, Cursive; font-size: 50px; background-color: yellow;}
</style>

<title>Hannibal</title>
<h2 class="CedarvilleCursive medium-text;">Hello Clarice</h2>
<!--<p>Goodbye Clarice</p>-->
</html>


#5

The issue is you are not correctly referencing the CedarvilleCursive font. The correct reference would be:

.CedarvilleCursive {
  font-family: "Cedarville Cursive", cursive;}
 }

p {
  font-family: "Cedarville Cursive", cursive;}
  font-size: 50px;
  background-color: yellow;
}

Also, your reference to the medium-text class should not have a semi-colon after it. See below for the correct reference.

<h2 class="CedarvilleCursive medium-text">Hello Clarice</h2>

Also, it is best if you nest the style element along with the title element inside the head element (see below).

<html>
<head>
<!--<link href="/Desktop/Practice/style.css">-->
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>
</html>

#6

Thank you for your help, I greatly appreciate it.