Hello Stack Overflow Community,
I would like to ask for help regarding my concern on CSS not showing in my HTML Display. I am still new to the Programming World. Please bear with me. I am doing a tutorial course in HTML YouTube by PinoyFreeCoder.
Here is the HTML that I made:
<title>PinoyFreeCoder Blog</title>
<style type="text/css">
body{background-color: #F5F5F5; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<link rel="icon" href="Images/John Canero Logo.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="Style.css">**
</head>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
Here is the Style.css that I made:
*{
font-family: Arial, Helvetica, sans-serif;
}
#main-header{
text-align: center;
background-color: black;
color: white;
padding: 10px;
}
Thank you!
Here if you are applying styling in HTML page itself. Then, whatever CSS you want to give to your webpage you can mention it betweeen <style></style> tag.
<title>PinoyFreeCoder Blog</title>
<style>
body{background-color: red; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px;
font-family: sans-serif;}
</style>
<body>
<header id="main header">
<h1>PinoyFreeCoder.com</h1>
</header>
</body>
And if you are using external CSS then you have to attach the <link rel="stylesheet" href="styles.css"> between your <head></head> tag. Then only all the CSS written in your external stylesheet will be applied.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<h2>I am formatted with a linked style sheet.</h2>
<p>Me too!</p>
</body>
</html>
styles.css
body{
background-color: red;
}
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
In my head I want to use the "Your Image is More Important Than Ours" with an emphasis on More Important.
I also want that to be underlined and shadowed to match a red background (white shadow). That emphasis also I'm debating if it should blink or fade in.
For some reason, my css isn't working on it.
HTML CODE:
<!-- This is a HTML Document-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<body>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
CSS So Far:
header {
width: 100%;
height: 200px;
}
header:h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header:em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
Nothing's working. Probably something stupid on my end. Thanks for the help in advance.
You should put header tag inside yout body tag.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<body>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
and also change your css selector
header {
width: 100%;
height: 200px;
}
header h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
note the space between header and h1.
It will result like this (darkgreen background added to show italicized text which is white).
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.