Im building a responsive website. Using a w3schools demo as a template to start with. Ive been having trouble with the fonts tho. Im trying to get the h1 to be Roboto Bold. Any help would be greatly appreciated.
Here is a fiddle: https://jsfiddle.net/08ggqgom/
#welcome{
font-family: "Roboto", sans-serif;
font-weight: bold;
If anyone could help with the font and also maybe cleaning it up a bit like separating the css and html that would be greatly appreciated as i keep breaking something when i try. ( or cleaning up all the class ids from w3schools)
You have assign welcome as a an id with # when in your HTML file you will add welcome in a class. So in the css file try this:
.welcome {
font-family: "Roboto", sans-serif;
font-weight: bold;
}
Now run code snippet, Your needed font added into your document, bold font is working. Remove "body{background-color:gray}" from my code, I have added dark background to show white text/content in document.
body{background-color:gray}
*{
margin: 0;
padding: 0;
}
.welcome{
font-family: "Roboto", sans-serif;
font-weight: 700;
}
h1{
font-size:30px !important;
}
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style>
body, html {height: 100%}
.bgimg {
background-image: url('images/bg.png');
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
<div class="w3-display-middle">
<h1 class="welcome">Welcome to Launchpad</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p class="w3-large w3-center">35 days left</p>
</div>
<div class="w3-display-bottomleft w3-padding-large">
Powered by w3.css
</div>
</div>
</body>
</html>
The problem is that in your css you are triggering the id #welcome but you have to write it as a class .welcome and everything works fine :)
So it looks like that
.welcome {
font-family: "Roboto", sans-serif;
font-weight: bold;
}
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">
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 was just messing around with CSS & HTML and added a header with a background color to the top of my website. Then I saw that there was lots of white space on top of the header's background color and to the sides of it. How do I get rid of this white space using CSS? Here is my code along with a picture of how the website looks right now:
<!DOCTYPE html>
<html>
<head>
<title>
Website
</title>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
.typeofvirus{
font-family: 'Open Sans', sans-serif;
}
br {
line-height: 2%;
}
#topheader{
background-color: #2c3e50;
width: 100%;
color: white;
margin-top: -1%;
}
html, body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p></p>
<section id = "topheader">
<div id = "topheaderdiv">
<h1 style = "font-family: 'Baloo Bhaina', cursive; text-align: center;"><big>Hello</big><br><small><small><small style = "font-family: 'Nunito', sans-serif;">This is a webpage</small></small></small></h1>
</div>
</section>
<h2 class = "typeofvirus">What are Microbes?</h2>
<p></p>
<h3 class = "typeofvirus"><big>Types of viruses caused by microbes in the bathroom</big></h3>
<ul>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Dermatophitic fungi</big></i>: Caused by people walking barefoot in bathrooms</li>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Gastrointestinal viruses</big></i>: Caused by contact with a toilet. This can remain on a solid surface for over a week. This causes stomach ailments.</li>
<li style = "font-family: 'Open Sans', sans-serif;"><i><big>Residual fungi</big></i>: which can cause asthma or allergies. This is caused by the mold in the bathroom due to lack of cleaning.</li>
</ul>
</body>
</html>
You need to reset your body and html margin and padding too:
Add this to your CSS:
html, body {
margin: 0px;
padding: 0px;
}
I would go with anned20's answer but for the sake of academic curiosity you can also add
overflow: hidden;
to body and html. Or manually give the element a negative upper margin and a 100% width like this
#topheader{
background-color: #2c3e50;
width: 100%;
color: white;
margin-top: -1%;
}
But, again, anned's solution is ideal.
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).
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