I want to embedded some styles into my website, however, the right style didn't show up, and I don't know why.
My code is here:
<head>
...
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"/>
<style type="text/css">
#bd { font-family: 'Neuton', serif; color:#646464; font-size:16px; line-height:21px; font-weight:200;}
...
</head>
<body>
...
<div class="container" id="bd">
I want to use the font "Neuton' here. But I fail to do it..
</div>
</body>
Can anyone help me with this :(?
*******update**
I still can't find the reason, let me give more context:
I'm practicing using HTML/CSS to write a portfolio, and here is all of my code:
<head>
<title> XXXXX </title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Neuton:200" rel="stylesheet" type='text/css'/>
<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:300" rel="stylesheet" type="text/css"/>
<style type="text/css">
body { padding-top: 40px;}
#bd { font-family: 'Neuton', serif; color:#646464; font-size:16px; line-height:21px; font-weight:200;}
#bd a {
text-decoration: none;
border-bottom: 1px dotted;
color:#646464;
}
#bd a:hover { text-decoration: none; border-bottom: 1px dotted; color:#646464; background-color:#c0f4ff; }
h1 {
font-family: 'Terminal Dosis', sans-serif;
color:#646464;
padding:0px;
margin-top:-14px;
margin-bottom:0px;
font-weight:300;
font-size:15px;
}
#sections { font-family: 'Terminal Dosis', sans-serif; color:#7a7a7a; padding:0px; font-weight:300; font-size:80%; line-height:15px;}
#name { font-family: 'Oswald', sans-serif; font-size:20px; color:#7a7a7a; padding-bottom:7px;}
.dashbar { border-top: 1px dashed #bbbbbb; margin-bottom: 35px; margin-top:00px; }
#active { background-color:#c0f4ff; color:#646464; width:100%;}
#navlist li { color:#7a7a7a; font-family: 'Oswald', sans-serif; font-size:15px; display: inline;
list-style-type: none; float:right; padding-left:74px; padding-top:2px; padding-bottom:0px; }
a { text-decoration: none; color:#7a7a7a; }
a:hover {color:#646464; text-decoration: none; background-color:#c0f4ff; } /*color:: the color displayed when you mouse over the link*/
a:visited { text-decoration: none; ;}/* mouse over link */
a:active { background-color:#c0f4ff; color:#646464; } /*the one that is activated */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4" id="name">My Name</div>
<ul id="navlist">
<li>
PROJECTS
</li>
<li>
<a id="active" href="index.html">HOME</a>
</li>
</ul>
</div>
<div class="dashbar"></div>
<div class="container">
<div class="row">
<div class="span-one-third" id="bd">
<!-- content-->
<h1>ABOUT</h1>
***I want to use the font Neuton Here***
</div>
<div class="span10" style="margin-left: 30px;">
<!-- put an image here -->
</div>
</div>
</div>
</div>
</body>
I don't know about that bootstraper , however I think you should import the fonts, I used google api. jsFiddle
It is probably because you missed out </style> tag. Your code doesn't show it.
for some point you should clear the browsing history for css to work if the css code has been change
There may be two problems:
Did you close that <style> tag? (</style>)
Where are you getting that font from? Is it installed on your computer? If not you need to use #font face.
If you have closed the <style> tag and/or used #font face, you better include it in your code, there will be a lot of people telling you to do that.
Thanks for reading!
Related
I am trying to create a navigation bar with a search box. When I insert the elements in the navbar and set the display to inline-block in css, the navigation bar's background color is not being displayed.
My HTML navbar,
*{
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-weight: normal;
color: white;
background-color: rgba(0,0,0);
margin:0;
}
.main_nav{
background-color: rgba(255,255,255.1);
}
.main_nav li{
display: inline-block;
padding: 0 10px;
}
{%load static%}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{%static 'css/styles.css'%}">
</head>
<body>
<header>
<nav class="main_nav">
<ul>
<li><img width="80" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/1200px-IMDB_Logo_2016.svg.png"></li>
<li>Menu</li>
<li>
<form method="GET" action="{%url 'search-view'%}">
<input type="search" name="query" id="query" placeholder="search movie">
<button type="submit">Search</button>
</form>
</li>
</ul>
</nav>
</header>
<section>
{%block content%}
{%endblock%}
</section>
<footer></footer>
</body>
</html>
The .main_nav background color doesn't seem to be working. I am also open to a better way to give the same output with the background color.
instead of using * for background-color,separate it to body tag, try below
*{
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-weight: normal;
color: white;
margin:0;
}
body {
background-color: rgba(0,0,0);
}
.main_nav{
background-color: rgba(255,255,255.1);
}
The problem you are facing is due to the asterisk (*) rule set
*{
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-weight: normal;
color: white;
background-color: rgba(0,0,0);
margin:0;
}
Asterisk (*) is known as the CSS universal selectors. It can be used to select all types > of elements in an HTML page.
To solve the issue, remove background-color: rgba(0,0,0); from the universal selector.
I'm attempting to break my html into separate php files and have an error I can't seem to crack. Here is the first file, index.php
.topheader {
background-color: #404040;
color: white;
padding: 16px;
}
.footer {
background-color: #404040;
color: white;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
As of right now, only .topheader is applying to the html. I understand that both classes are identical, I plan to expand on each once I confirm they are applying individually. Can someone please take a look and advise why .footer wouldn't be applying to the sheet?
Here is a sample of the output on my machine
Seems working for me, .topheader and .footer having different styles
.topheader {
background-color: #404040;
color: blue;
padding: 16px;
}
.footer {
background-color: #404040;
color: red;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
<h1>I AM RED</h1>
</div>
This is Applying to your file, both .topheader and .footer class contain same style. just change the style values, you can see the difference
.topheader {
background-color: #404040;
color: white;
padding:16px;
}
.footer {
background-color: #FFEE00;
color: Red;
padding:16px;
}
Check this code once and in your code check once href of your stylesheet.
<!DOCTYPE html>
<html>
<head>
<style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
As many on here pointed out, the code itself was fine. I did not realize that Chrome would cache the CSS file. I've spent all night updating the file without seeing any changes because Chrome was using an older version.
As you can see from the attached screencap, I disabled the cache and everything is working perfectly now.
I'm building a simple website, and discovered that the while the CSS works fine in Chrome (which I usually work with), it doesn't at all in Firefox or IE. As in it's a blank white page with pictures and text, like I hadn't written any CSS. The HTML loads fine, but it's obvious that the CSS isn't being used at all.
Here's all of my HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Apple Tree House</title>
<link rel="stylesheet" type="css" href="stylesheet.css" />
<link rel="shortcut icon" href="root/icon.ico" type="image/ico" />
</head>
<body>
<div id="container">
<header>
<img src="root/logo.png" id="logo" width="300px" height="300px">
<h2>New Bed and Breakfast</h2>
<h1>Opening January 2015</h1>
<h4>Apple Tree House, Farndon Road, Woodford Halse, Northamptonshire</h4>
</header>
<div id="textcontainer">
---Basic text info here---
</div>
<footer>
<img src="root/footer.png" id="footbanner">
</footer>
</div>
</body>
</html>
And my CSS:
html, body{
margin: 0;
padding: 0;
}
body {
background-color:#85A366;
font-family:Arial, Helvetica, Sans-serif;
font-size:12pt;
margin:0 auto;
padding-left:10px;
padding-right:10px;
}
#container{
width:80%;
height:100%;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
padding-top:0px;
text-align:center;
color:black;
background:#FFFFEE;
margin:0 auto;
font-family: Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif;
font-weight:600;
font-style:italic;
font-size:13pt;
color:#7D5833;
}
h1, h2, h3, h4, h5, h6 {
color:#472400;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h4 { font-size: 24px; }
#textcontainer{
width:45%;
text-align:center;
margin:0 auto;
top:auto;
}
footer{
text-align:center;
height:100px;
}
#footbanner {
max-width:100%;
max-height:100%;
}
#media screen and (max-width:420px) {
table{
font-size:8pt;
}
#container {
width:100%;
}
}
Anything you can see in there that's making it work in Chrome but not at all in other browsers?
<link/> type should be text/css not just css as shown below:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
i'm no expert here, but it caught my eye that you used 'css' instead of 'text/css'.
perhaps that will fix the issue?
although strangely enough this does work for me:
http://prntscr.com/58m1fi
I have a span class that I’m attempting to target the H1 in to style however its not working.
Here is my html.
<div class="col-md-9">
<span class="testimonial"><h1>Testimonial</h1></span>
</div>
and my css
.testimonial h1 {
font-size: 16px;
font-weight:bold;
}
Am I not using the CSS correctly?
try this :
.col-md-9 .testimonial h1 {
font-size: 16px;
font-weight:bold;
}
Might be a specificity issue have you tried:
div.col-md-9>span.testimonial>h1 {
font-size: 16px;
font-weight:bold;
}
Are you linking fine css file?
It worked for me, and it's exactly your code:
<html>
<head>
<style type="text/css">
.testimonial h1 {
font-size: 16px; font-weight:bold;
}
</style>
</head>
<body>
<div class="col-md-9">
<span class="testimonial">
<h1>Testimonial</h1>
</span>
</div>
</body>
</html>
Sorry to ask the same question many before me have asked... I have read lots of these and they all say change
margin: 0;
There is a gap between the two divs (div class ="heady" and div class="menus") I just can't seem to get rid of the white space, hopefully it is clear enough, let me know if its not.
Thanks James.
html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>website</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<link rel="stylesheet" type="text/css" href="CSS/style1.css" />
<body>
<div class="heady">
<br></br>
<h1><a class="header" href="index.html">website</a></h1>
</div>
<div class="menus">
<ul>
<il><a class="list" href="x.html">About</a></il>
<t> | </>
<il><a class="list" href="y.html">Beginners</a></il>
<t> | </>
<il><a class="list" href="z.html">Advanced</a></il>
<t> | </>
<il><a class="list" href="contact.html">Contact</a></il>
</ul>
</div>
</body>
</html>
CSS
/*general rules*/
html,body {
font-size:11pt;
font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
background-color: white;
padding-top: 0px;
margin-top: 0px;
}
h1 {
font-size: 25pt;
margin-left:10px;
margin-bottom:0;
padding-bottom: 0;
}
a:link, a:visited {
color: white;
}
a:hover, a:active {
color: grey;
}
/*header section rules*/
div.heady {
height: 200px;
width: 760px;
padding: 0;
background-color: grey;
background-repeat:no-repeat;
margin: 0;
}
a.header {
text-decoration: none;
}
a.header:link, a.header:visited, a.header:active,a.header:hover {
color: red;
margin:0;
}
div.menus {
padding: 0;
margin:0;
background-color:black;
width: 760px;
text-align: center;
font-size:12pt;
}
a.list {
margin:0;
}
Here is a link to a jsFiddle.
Browsers apply default styles to ceratin elements. In this case it's ul that gets some margin. Note that this margin separates the divs even though the divs themselves have no margins.
Use
ul { margin: 0; }
or include a reset stylesheet
Are you using the Firebug plugin for Firefox? Even if you don't already use firefox, you should download it along with the firebug plugin. With Firebug you can look at an element in your source code and see the styles that are being applied, the layout (width/height, padding, margin), and even manipulate the styles to view what a change in your CSS would do.
I HIGHLY recommend it!
Download Firefox
Download Firebug
.heady { display:block; }
.heady { margin:0; padding:0; }
.heady { line-height:100%; /* or even 0 (if no text present) */ }
the content can fool here, but 1 or all 3 of those should tame the beast across browsers.
google for a "css reset" too