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>
Related
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 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
I have a div with a custom font and I'm trying to make it so the text has the same height as the div it's inside of.
I've been trying to find a way to override the vertical alignment of text without a div with no success.
I was hoping there was something like the text-indent method for this purpose.
Here's a simple JsFiddle with my example.
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color:white;
font-size: 24px;
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
</html>
Use a line-height CSS property :
line-height : 24px;
Add a line-height with a property value that measures the height of the containing DIV
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color: white;
font-size: 24px;
line-height: 24px; /* This line solves your problem */
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
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!
I'm a profane in CSS, I don't know anything about it. I need to put HTML code and the CSS formatting for it in the same string object for an iPhone program.
I have the HTML code and the CSS code, but I don't know how to mix them together. Could you help me?
The HTML code:
<html>
<head>
<link type="text/css" href="./exemple.css" rel="stylesheet" media="all" />
</head>
<body>
<p>
<span class="title">La super bonne</span>
<span class="author">proposée par Jérém</span>
</p>
</body>
</html>
The CSS styles:
.title {
color: blue;
text-decoration: bold;
text-size: 1em;
}
.author {
color: gray;
}
<html>
<head>
<style type="text/css">
.title {
color: blue;
text-decoration: bold;
text-size: 1em;
}
.author {
color: gray;
}
</style>
</head>
<body>
<p>
<span class="title">La super bonne</span>
<span class="author">proposée par Jérém</span>
</p>
</body>
</html>
On a side note, it would have been much easier to just do this.
You can include CSS styles in an html document with <style></style> tags.
Example:
<style>
.myClass { background: #f00; }
.myOtherClass { font-size: 12px; }
</style>
Is this what you're looking for? You place you CSS between style tags in the HTML document header. I'm guessing for iPhone it's webkit so it should work.
<html>
<head>
<style type="text/css">
.title { color: blue; text-decoration: bold; text-size: 1em; }
.author { color: gray; }
</style>
</head>
<body>
<p>
<span class="title">La super bonne</span>
<span class="author">proposée par Jérém</span>
</p>
</body>
</html>
Or also you can do something like this.
<div style="background=#aeaeae; float: right">
</div>
We can add any CSS inside the style attribute of HTML tags.
There's a style tag, so you could do something like this:
<style type="text/css">
.title
{
color: blue;
text-decoration: bold;
text-size: 1em;
}
</style>
Two options:
1, add css inline like style="background:black"
Or
2. In the head include the css as a style tag block.