For whatever reason, my the HTML and CSS for my page will not link. CSS is in the same directory. I have ran the page through a validator and no issues have come up, so there is no reason this shouldn't work? I'm not stupid, never had this problem before either, so I'm quite confused. It just has no effect.
https://jsfiddle.net/4ocpjL1v/
maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
You have to use # for IDs (or . for classes) before the name.
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
this will work for sure....u have put font after css, it should be before css.
See Live https://jsfiddle.net/subodh_saraswat/4ocpjL1v/1/
Related
Hello so I'm having trouble with css, I'm trying to move it around and change the background color however I cannot seem to do so but I'm able to change other properties of it like center it and weight
python file:
from flask import Flask, request, render_template
app = Flask(__name__)
#app.route('/homepage')
def homepage():
return render_template('homepage.html')
if __name__ == "__main__":
app.run(debug=True)
html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='homepage.css')}}">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<div class="navbar">
<h1 id=home>Home <h2>
<h1 id=about>About <h2>
<h1 id=location>Location <h2>
</div>
<h1 id=logo>4/12</h1>
</head>
<body>
<h1> welcome to the homepage</h1>
</body>
css page:
background-color: #333333;
}
#logo{
position: relative;
}
#home{
font-family: 'Raleway', sans-serif;
text-align: center;
}
#about{
font-family: 'Raleway', sans-serif;
}
#location{
font-family: 'Raleway', sans-serif;
}
Place your Nav in the body all HTML code shown on screen goes in the body.
Next place a body tag on your background color in CSS.
body{
background-color: #333333;
}
#logo{
position: relative;
}
#home{
font-family: 'Raleway', sans-serif;
text-align: center;
}
#about{
font-family: 'Raleway', sans-serif;
}
#location{
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='homepage.css')}}">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<h1> welcome to the homepage</h1>
<div class="navbar">
<h1 id=home>Home <h2>
<h1 id=about>About <h2>
<h1 id=location>Location <h2>
</div>
<h1 id=logo>4/12</h1>
</body>
I am trying to make the header equal width its meant to be like the graphic below but its not turning out like that.
It should look like the following This is just for my own learning from a random psd on the web. Also would my code be acurate is it right to use px should I be using percentages also I should be using bootstrap more with the likes of a header.
This is what is looks like with the code below
css used style.css
.header-text
{
font-size:30pt
font-family: 'Roboto', sans-serif;
font-weight: bold;
width: 220px;
margin-left:40px;
margin-top:54;
text-align: center;
float:left;
}
.header
{
height:240px;
}
div>div.header-logo
{
background-image: url("logo.png");
width: 240x;
height: 270px;
background-repeat: no-repeat;
margin-left: 600px;
margin-top: 30px;
}
div>div.expert-reviews
{
float:left;
font-size:30pt
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
body > div > div:nth-child(3)
{
float:right;
font-size:30pt
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
html
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-text">100+ Years Of Combiend Industry Expierence</div>
<div class="header-logo"></div>
<div class"expert-reviews"> Expert Consumer Reviews and Ratings</div>
</body>
</html>
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.
I'm creating a website for my school programming class and my css won't show up past my homepage, my pattern of creating css doesn't change, and so far 5 people in my class have checked and none know the reason
Homepage
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "mainpart">
<div class="statement">
<p>
WHATS UP BROTENDOS
</p>
</div>
<div class= "god">
<center> <img src= "god.png" alt="ranch dude"> </center>
</div>
<div class= "statement2">
<p>
RANCH IS THE #1 MOST RARE RESOURCE EVER!!!! THAT MEANS OUR GOVERNMENT IS LIMITING IT FOR DUDES LIKE THIS!!!!!
</p>
<p>
THIS NEEDS TO BE ADDRESSED AT THE NINTENDO CONVENTION!!!!!
</p>
</div>
<div class= birdup>
<center><img src= "birdup.jpg" alt= "bir ddup"></center>
</div>
</body>
CSS
body {
width: 100%;
margin : auto;
}
.container {
width: 960px:
margin: 0 auto:
}
.header {
background: #94DD6E;
height: 100px;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Helvetica";
font-size: 15px;
margin-left:15px;
padding-top:10px;
}
a {
text-decoration: none;
color: #fff
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
margin-right: 15px;
}
.nav {
float: right;
padding-top: 10px;
}
.content {
background: #e7e8e1;
}
.statement {
padding-top: 100px;
text-align: center;
font-family: "Helvetica";
font-size: 25px;
}
.statement2 {
text-align: center;
.god {
text-align: center;
}
.pimplepete {
margin-top: 50%;
text-align: center;
color: orange;
}
.mainpart {
background-color: #F5F6E9;
}
.video {
padding-top: 25px;
}
.donation {
text-align: center;
font-family: "Papyrus";
font-size: 50px;
}
Page that the CSS isn't working on
<!doctype html>
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "video">
<center>
<iframe width="640" height="360" src="https://www.youtube.com/embed/0V7FGCtnoJo" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class= "donation">
<p>
OUR MOVEMENT IS GROWING!!! SPORT SOME <i>RANCHY</i> MERCH
</p>
<p>
LEGAL RANCH MERCH
</p>
</div>
</body>
Don't worry I know that the formatting isn't good.
Your CSS is linked relatively.
<link rel= "stylesheet" href="css1.css">
If your other pages are perhaps in different folders - folders that don't also have a css1.css alongside the html files inside them, it won't understand the reference to css1.css.
Try adding a leading slash /css1.css if you're accessing the site via a URL, rather than the filesystem, and the css is in the web root.
If you're loading the pages via the filesystem, adjust the reference to the css based on the file calling it. You might traverse up a level by referring to it as ../css1.css, instead.
To illustrate further, given a filesystem like:
public_html/
- index.html
- css1.css
- about/
- index.html
public_html/index.html knows about css1.css because they live in the same directory.
However, in public_html/about/index.html, if the <link> tag references css1.css, the browser will look for a file called public_html/about/css1.css, which I imagine doesn't exist.
I tried using different editors and IDEs (netbeans and visual studio code) along with different browsers (firefox developers edition), yet, I can't seem to get the css sheet to apply to the main html file.
The style sheet editor is saying that there is no style sheet attached to the html file
Here's the html file:
<!DOCTYPE html>
<html>
<head>
<title>The Animal Game</title>
<meta charset="utf-8"/>
<link href="animalgame.css" type="text/css" rel="stylsheet" />
<script src="animalgame.js" type="text/javascript"></script>
</head>
<body>
<h1>The Animal Game</h1>
<p>Think of an animal, then let me guess it!</p>
<div id="container">
<fieldset>
<legend>Questions</legend>
<p id="questions"></p>
</fieldset>
<fieldset id="answer">
<legend>Answer</legend>
<button id="yes">Yes</button>
<button id="no" >No</button>
</fieldset>
</div>
</body>
</html>
CSS style sheet:
body {
font: 12pt "Century Gothic", "Helvetica", "Arial", sans-serif;
}
button {
font-size: 20pt;
font-weight: bold;
margin: 15px auto;
}
#container{
margin: auto;
width: 520px;
}
fieldset {
background-color: #F0F0F0;
float: left;
height: 150px;
margin-right: 15px;
text-align: center;
}
h1, p {
text-align: center;
}
#questions {
font-size: 16pt;
text-align: center;
width: 300px;
}
EDIT: problem solved! There was a typo. Thank you for all hints
You have a typo in rel="stylsheet" it should be stylesheet