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>
Related
*That's the file index.html*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles\styles.css" rel="stylesheet" type="text\css">
<title>24/7-Clanshop.de</title>
</head>
<body>
<h1>24/7-Clanshop</h1>
<p>The official shop for your 24/7 streetstyle!</p>
<ol>
<li>Hoodies</li>
<li>Jogginghosen</li>
<li>Socken</li>
<li>Accessoires</li>
</ol>
<p>Look up to the Channel</p>
<img src="pictures\testpicture.jpg" alt="My test picture">
</body>
</html>
*That's the file styles.css*
p, li, h1 {
color:#ff0000;
width: 500px;
border: 1px solid black;
}
When i run this programm, neither the picture nor the font color can be displayed. Is it due to my browsersettings or am I overlooking something completely different?
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;
}
I'm creating a navbar. I'm trying to remove the text decoration from the nav links. However, even though my "font-family" of "Roboto" is being applied, "color" and "text-decoration" isn't. Please find my code below
li {
font-size: 0.75rem;
font-family: Roboto;
font-weight: 700;
color: #303133;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hello">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<header class="header">
<a href="index.html" class="logo">
<img src="img/logo.png">
</a>
<nav class="navlinks">
<ul>
<li>HOME</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4
</ul>
</nav>
</header>
<a> tags have their own styling applied by the browser so they actually look like links, so you usually need to target them directly to apply your own styles.
Font properties are usually inherited in the browser styles, so they style links like:
a {
font-size: inherit;
font-family: inherit;
}
Or similar, so they will apply the font properties you specify on parent elements, but the color and text decoration are not inherited, they usually have a specific blue color and underline decoration; since they aren't inheriting them from the parent, you need to target the <a> tag element directly to override these values;
li a{
font-size: 0.75rem;
font-family: Roboto;
font-weight: 700;
color: #303133;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hello">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<header class="header">
<a href="index.html" class="logo">
<img src="img/logo.png">
</a>
<nav class="navlinks">
<ul>
<li>HOME</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4
</ul>
</nav>
</header>
I'm getting a little problem with my HTML page. I would like to set my horizontal line to the left side.
Up to now, my line is always situated in the center of my page and I don't reach to move this line between my text.
This is my little HTML script :
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
margin:left;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
(variable)
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
(variable)
</div>
</html>
And my HTML page looks like :
Do you have an idea ?
You can try set display: inline-block; to your <hr> to render the horizontal line as an inline element with block properties.
Also make sure that your markup and CSS is valid! E.g. a CSS rule margin: left; is wrong. Right would be: margin-left: 10px;.
Plus: It's not recommended to use inline styles, as the code becomes less maintainable. Try defining the rules in the CSS section of your HTML document or a separate CSS file.
.header {
line-height: 80%;
}
hr {
width: 10%;
display: inline-block;
}
<div class="header">
<h3> Département </h3>
<p>(variable)</p>
<hr>
<h3> Commune </h3>
<p>(variable)</p>
</div>
Just add (variable) text inside any HTML element. So that hr tag will come below it.
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
<span>(variable)</span>
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
<span>(variable)</span>
</div>
</html>
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?