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?
Related
I'm trying to design a simple page about pets I would like to have. I can't seem to figure out why my HTML won't link to my CSS file. I'm using Atom.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
p {
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My Website about Pets</title>
<link rel="stylesheet" href="styles.css" type = "text/css" />
</head>
<body>
<h1> Pets</h1>
<h3> Below is a list of descriptions of pets that I would like to have. </h3>
<div class="center">
<img src="https://s7d1.scene7.com/is/image/PETCO/ball-python-1" alt="Ball Python"
height="200">
<p> A picture of a noodly boi</p>
</div>
<h2>Ball Python</h2>
<p> I would like to have a pet ball python. I don't care what gender it is, but it's name will be Goose.</p>
</body>
</html>
These files are both in the same folder on my desktop.
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 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>
HTML file:
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
</head>
<body>
<p>Red</p>
</body>
</html>
CSS file:
p {
color: red;
}
The word 'Red' does not change to red text when I open the page in a browser. If anyone would know why my CSS file isn't linking to the HTML file that would be greatly appreciated. The files are in the same directory.
The code you have provided has no errors.
Fiddle: https://jsfiddle.net/9n97Lz69/
Please copy & paste the following code into your html file and verify this works:
index.html:
<style>
.menu p {
color: red;
}
</style>
<div class="menu">
<p>This sentence should be red.</p>
</div>
Fiddle: https://jsfiddle.net/21umj65u/
Then move the CSS to mystyle.css and verify this works:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<div class="menu">
<p>This sentence should be red.</p>
</div>
mystyle.css:
.menu p {
color: red;
}
Please check the file location of mystyle.css and verify against the url in index.html:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Your code seems fine, perhaps "p" is already defined in your css file.Try this
.menu p {
color: red !important;
}
I want to link my css code with the html code for my website. I am using Aptana Studio 3. It appears to work, but when I preview it in Aptana my css styling does not show up. Here is my code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
And my css code:
.body {
font-family: cursive;
}
When I preview it, the css style doesn't show up.
All my files are saved in the same folder so I don't know why this is not working. Thanks in advance for your help.
.body refeers to a container with a body class, if you want to be applied to the body tag remove that dot
body { font-family: cursive; }
.some its applied to class="some"
#some its applied to id="some"
some its applied to <some></some>
You can not set the font family in the body.
Html code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left" class="navagation">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
Css:
.navagation{
font-family: cursive;
}