I tried adding media, rel but it did not work.CSS file is in the same directory as html files. My other website's css work but unfortunately this does not. I am trying to link externally(with link tag). I looked to similar issues but none solved my problem. Thank you for your help.
My files:
body {
background - color: #ffffff;
text - decoration - color: #003366;
font-family: Arial;
}
head {
background-color: # 003366;
text - decoration - color: #AEC3E3;
font - family: "Times New Roman";
}
h1 {
line - height: 200 %;
text - indent: 1e m;
}
nav {
font - weight: bold;
}
dt {
text - decoration - color: #5280C5;
font-family: "Times New Roman";
}
.category {
font-weight: bold;
text-decoration-color: # 5380 C5;
font - family: "Times New Roman";
}
footer {
font - size: .70e m;
font - style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="fishcreek.css" />
<meta charset="UTF-8">
<title>Fish Creek Animal Clinic</title>
<h1>Fish Creek Animal Clinic</h1>
</head>
<body>
<nav>Home Menu <a href="music.html">Music
</a>Jobs
</nav>
<dl>
<dt>Full Service Facility</dt>
<dd>Doctors and staff are on duty 24 hours a day, 7 days a week.</dd>
<dt>Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved <br> animals since 1984. </dd>
<dt> Open Door Policy </dt>
<dd>Our professionals welcome owners to stay with their pets during any <br> medical procedure. </dd>
</dl>
<p>888-555-5555<br> 1242 Grassy Lane<br> Fish Creek, WI 55534
</p>
<footer>Copyright © 2018 Fish Creek Animal Clinic <br>
memohacan#gmail.com
</footer>
</body>
</html>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fish Creek Animal Clinic</title>
<h1>Fish Creek Animal Clinic</h1>
<link rel="stylesheet" type="text/css" href="fishcreek.css" />
</head>
<body>
<nav>Home Menu <a
href="music.html">Music
</a>Jobs
</nav>
<dl>
<dt>Full Service Facility</dt>
<dd>Doctors and staff are on duty 24 hours a day, 7 days a week.</dd>
<dt>Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved <br> animals since 1984. </dd>
<dt> Open Door Policy </dt>
<dd>Our professionals welcome owners to stay with their pets during any <br> medical procedure. </dd>
</dl>
<p>888-555-5555<br> 1242 Grassy Lane<br> Fish Creek, WI 55534
Try to specify the file type by using the ''type" attribute, like so:
<link rel="stylesheet" type="text/css" href="fishcreek.css" />
I have had the same issues before because I haven't specified the file type.
I have also noticed that there is a second closing HTML tag at the end of index.html.
Remove the text-decoration-color lines to avoid problems on some browsers. In the html below, the css file "fishcreek.css" is linked with the html. For testing I added a color: green to the body ;)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fish Creek Animal Clinic</title>
<link rel="stylesheet" href="fishcreek.css">
</head>
<body>
<h1>Fish Creek Animal Clinic</h1>
<nav>
Home
Menu
Music
Jobs
</nav>
<dl>
<dt>Full Service Facility</dt>
<dd>Doctors and staff are on duty 24 hours a day, 7 days a week.</dd>
<dt>Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved
<br>animals since 1984.</dd>
<dt>Open Door Policy</dt>
<dd>Our professionals welcome owners to stay with their pets during any
<br>medical procedure.</dd>
</dl>
<p>888-555-5555
<br>1242 Grassy Lane
<br>Fish Creek, WI 55534</p>
<footer>
Copyright © 2018 Fish Creek Animal Clinic
<br>memohacan#gmail.com
</footer>
</body>
</html>
fishcreek.css
body {
color: green;
font-family: 'Arial', Helvetica, sans-serif;
}
header {
background-color: #003366;
font-family: 'Times New Roman', Times, serif;
}
h1 {
line-height: 200%;
text-indent: 1em;
}
nav a {
text-decoration: underline;
font-weight: bold;
}
nav a:hover,
nav a:active {
color: red;
}
dt {
font-family: 'Times New Roman', Times, serif;
}
.category {
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}
footer {
font-size: .70em;
font-style: italic;
}
Related
<html lang= "en">
<head>
<title>Murfreesboro Regional Soccer League</title>
<meta charset="utf-8">
<script src="mondernizr.custom.62074.js"></script>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Murfreesboro Regional Soccer League</h1>
</header>
<p>Part of the North American Recreational soccer Association.</p>
<footer>
<div>
<p id="contact">MRSL -c/o Davies Sporting Goods.
</div>
<div>
<p id="contact"> 418 N Sartoris St. - Murfreesboro, TN 37130 - (615) 555-2255</p>
</div>
</footer>
</body>
Here is my style.css
body
h1, {
background-color: orangered;
color:black;
}
#contact,{
background-color: green;
color: white;
}
I have also added "" in the main code, but it doesnt show up.
I tried to adjust things here and there but when I go to my project.
Everything is just in black and white.
Your css is invalid. Just remove the comma after h1 and the comma after #contact
Also, IDs should be unique, so you should use a class instead of ID for the paragraphs.
h1 {
background-color: orangered;
color:black;
}
.contact {
background-color: green;
color: white;
}
<html lang="en">
<head>
<title>Murfreesboro Regional Soccer League</title>
<meta charset="utf-8">
<script src="mondernizr.custom.62074.js"></script>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Murfreesboro Regional Soccer League</h1>
</header>
<p>Part of the North American Recreational soccer Association.</p>
<footer>
<div>
<p class="contact">MRSL -c/o Davies Sporting Goods.
</div>
<div>
<p class="contact"> 418 N Sartoris St. - Murfreesboro, TN 37130 - (615) 555-2255</p>
</div>
</footer>
</body>
so I'm trying to import a local font, but for some reason it's not being recognized, can I get some quick help on where I'm going wrong please?
I currently have 3 documents: index page, stylesheet.css and fonts.css.
I'm trying to use the font 'cinzel' however it's not working.
Index page:
<html>
<head>
<link rel="fonts" type="text/css" href="css/fonts/fonts.css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet/stylesheet.css"/>
<style type="text/css">
</style>
<title>
RENTDrive
</title>
</head>
<body>
<h1> RENTDrive </h1>
<hr>
<h3> Lots of exotic cars to choose from</h3>
Book your vehicle now! <p> Terms and conditions apply</p>
</body>
stylesheet.css page:
h1 {
font-family: 'cinzel';
}
h3 {
font-family: 'cinzel';
}
And the fonts.css page:
#font-face {
font-family: 'cinzel';
src: url('css/fonts/Cinzel-Regular.otf') format('opentype'),
url('css/fonts/CinzelDecorative-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
Can you change the rel to stylesheet.
<link rel="stylesheet" type="text/css" href="css/fonts/fonts.css"/>
heading tag's default font-weight is bold(in user agent stylesheet).
so, you will remove font-weight: normal, you can see that
i'm pretty new into this topic, i'm actually doing the HTML & CSS course at Codecademy. i just found and solve a little excersise about HTML but i can't actually view it properly in the browser, can any of you give me any light about what did i miss? thak you.
b {
font-family: Verdana;
}
h1 {
color: #333;
font-size: 20px;
}
h2 {
color: #666;
font-size: 16px;
}
p, li {
color: #000;
font-size: 12px;
}
<!CODETYPE html>
<html>
<head lang="es-ES">
<!-- Practica HTML 15/02/2017 -->
<link hrel="style.css" type="text/css" rel="stylesheet">
<meta charset= "utf-8">
<title> Recetas de cocina/Patatas fritas</title>
</head>
<body>
<h1>Patatas fritas</h1>
<p>Receta de patatas fritas caseras.</p>
<img src="http://www.abrirllave.com/html/images/patatas-fritas.jpg" alt="Patatas fritas perfectas" width="300" height="225"/>
<h2>Ingredientes</h2>
<ul>
<li>3 ó 4 patatas (300gr.)</li>
<li>4 dientes de ajo</li>
<li>Aceite de oliva</li>
<li>Sal</li>
</ul>
<h2>Elaboración (Pasos)</h2>
<ol>
<li>Calentar aceite en una sartén.</li>
<li>Añadir las patatas cortadas, sal y el ajo.</li>
<li>Freír al gusto.</li>
<li>Servir en plato.</li>
</ol>
</body>
</html>
right, i just put it in the code snippet and it worked, may be my problem in my folder locations? if any of you could tell me good exercises i will be very gateful, i need to practice what i just learned.
Take out <!CODETYPE html>
Use <!DOCTYPE html>
I'm new to Web Development, so I need some help regarding my code. I have validated this code online and is error free, but why the CSS attributes such as background-color etc. are not been applied in the HTML?
Also, I would really appreciate if some could comment on my HTML coding style. Is it poor?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<b>Home Menu</b>
</nav>
<main>
<h2>Relax at JavaJam</h2>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
54321 Route 42<br />
Ellison Bay, WI 54210<br />
888-555-5555<br /><br />
</div>
</main>
<footer>
<small><i>Copyright © 2016 JavaJam Coffee House<br />
abc.xyz.com</i></small>
</footer>
</body>
</html>
The CSS file javajam.css is:
body {
background-color: #ffffcc;
color: red;
font-family: Verdana, Arial, sans-serif;
}
Try putting your < link > into the < body >, for me forexample, I had two < link >-s and they just bugged up each other. CSS most likely to work, when it placed in < body >, give it a try, hope helped. ;)
I have made a style sheet and have tried to place it inside the head tags of my .html file, but the style is not executing. What am I missing?
Here is my style sheet, saved as myStyle.css:
body {
color: white;
font-family: Verdana;
text-align: center;
background-color: #333333;
}
p {
font-size: medium;
}
h1 {
font-size: xx-large;
}
and here is my HTML code...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<h1>Something Something</h1>
<p>Launching in the Summer 2016</p>
<p>ipsum loren il advica en tu tucci el ario</p>
<div id="slideshow">
<div>
<img src="...\354\Images\trovi.jpg">
</div>
</div>
<p></p>
DIGIT Game Studios
</body>
</html>
This code works. The problem is with your link to the CSS. What is your directory structure?