CSS not working in HTML, help please

HTML-CSS
1

Practice_html
Practice_html1700×602 148 KB

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?

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>

6

Thank you for your help, I greatly appreciate it.