Cant insert properly CSS in HTML doc

HTML & CSS
1

Hey there.
I’ve been trying to insert a CSS file in my html document but, when i do so, nothing changes.
This is my CSS file (named style.css):

.h1 {
	font-family: sans-serif;
    font-size: 20pt;
    text-align: center;
	}
.h2 {
	font-size: 18pt;
	}
.p {
	font-family: sans-serif;
    font-size: 14pt;
    text-align: justify;
    line-height: 20pt;
	}

and this is how I’m trying to insert it on my html doc:

<html>
<head>
<link rel="STYLESHEET" href="style.css" type="text/css"/>
</head>
<body>
<h1>Hello</h1>
<h2>How Are You?</h2>
<p> Bye </p>

Can you guys please help me?

2

Is your style.css file in the same folder as your HTML page? If not, that’s where it should be as you’ve set the href= property.

Also, remove the period ( . ) from each of the CSS declarations, as you are not declaring any class in your HTML file.

4 Likes
3

It was the (.). Thought it was used all the time but guess I’m wrong. Thanks for the help!

2 Likes
4

Where are the files located on the server or your PC? Are they in the same directory or are they in different directories?

If the HTML page is in the root directory of the server, the CSS might be found in a subdirectory called “css”. The way your CSS file is being called, the CSS file is in the same directory as the HTML file. It looks like the CSS file should work properly.

On the other hand if the CSS is in the CSS subdirectory, the link should read CSS/style.css. And the styles on the CSS file should be preceeded by a pair of dots and a backslash to target the HTML file.

examples:

same directory

mypage.html
style.css

different directories

mypage.html
css/style.css

Have you ever taken and finished a basic HTML and CSS course? If not, you really should take the time to do so. You will save yourself hours of frustration.

5

No, you just have plain old HTML tags there, so the CSS should be

h1 {
   font-family: sans-serif;
   font-size: 20pt;
   text-align: center;
}
h2 {
   font-size: 18pt;
}
p {
   font-family: sans-serif;
   font-size: 14pt;
   text-align: justify;
   line-height: 20pt;
}

If you were using classes in you HTML like this

<h1 class="helloClass">Hello</h1>

then you would access elements of that class like so

.helloClass {
   // declarations go here
}
3 Likes
6

Hi there ricardosilva87hhhh,

you should not be using the pt unit,
it is a print unit not a screen unit. :eek:

Instead use em and % instead. :winky:

coothead

2 Likes
7

Selectors for HTML elements have only the element type name, Eg:-

h1 { font-size: 2.2em; }

The period is used for class selectors where you have:-

<p class="myClass">Some Text.</p>

The selector may be:-

.myClass { color: green; }

An ID selector uses the # symbol.

<div id="mainMenu">

Can be selected with:-

#mainMenu { display: flex; }
3 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.