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.
Related
Novice here.
I'm creating a button however when I upload it onto the webpage it affects every other button by changing the styling to match the new button.
I don't know how to make the styling specific to only that button and have it not affect anything else on the website. Thanks!
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
you can make specific id (using #) or class (using dot . can be used multiple times in html dom if you will use button many times)
<html>
<head>
<style>
a#someId:link,
a#someId:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a#someId:hover,
a#someId:active {
background-color: #810001;
}
</style>
</head>
<body>
<a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>
</html>
You can keep class or id to resolve this issue.
<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>
Add CSS to this particular id element.
Check this : http://jsfiddle.net/wzfs238L/
You can define the styling for a class, this snippet uses class name mybutton and shows one with the class added and one without.
<html>
<head>
<style>
a.mybutton:link,
a.mybutton:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a.mybutton:hover,
a.mybutton:active {
background-color: #810001;
}
</style>
</head>
<body>
<h2>With mybutton class</h2>
<a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
<h2>Without mybutton class</h2>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
This is what you use 'classes' or 'ids' for. They help class a type of element for your page or identify a specific one you want to target in CSS. As #Rana suggested, w3schools has a page for this which might be helpful
Use id on your HTML element, and add # on the style. An id must be unique. Further reading about id click here.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
#fabulous{
background-color: yellow;
color:maroon;
margin-top:1rem;
}
#fabulous:hover,
#fabulous:active {
background-color: #fcc726;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
<a id="fabulous" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">This one is fabulous</a>
</body>
</html>
I want to apply custom css class to the HTML tags in confluence. I tried adding css class in HTML macro as well as in css Macro. but the style is reflecting only in the preview, when i save and view the page style is not available, any advice
HTML Macro:
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
Css Macro
.myClass{
padding: 18px;
background-color: Grey;
}
Preview
When i save and publish
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
I had the same problem. Simply get rid of the head section and try the below code:
<body>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
So this is my first html code and I'm having trouble with the internal style of the h1 heading although I wrote body style after h1 and it works fine and i removed all the inline styles in heading. Could someone tell me where the problem is ??
<head>
<style>
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
</body>
This is the whole code as when i ran this code snippet above it on jsfiddle it worked fine but the whole code didn't show the styling.(If it is not okay to post the whole code please tell me to delete it as I'm a newbie here.)
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
Page title
</title>
<style> <!-- Internal CSS style-->
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
body{
color: #8e0035;
background-color: Beige;
font-family:verdana;
}
a:link{
color:Purple;
text-decoration: transparent;
}
a:visited{
color:grey;
text-decoration: transparent;
}
a:hover{
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
<hr>
<p title = "Hover over the paragraph one more time!" style="color:
black;"><a href="https://www.sololearn.com target="_blank""> This link will
take you to sololearn site <br/> with a link anchored to it </a></p>
<img src="download (6).jpg" alt="An image here">
<hr>
<pre> <!-- font family in body doean't apply here -->
The preformatted tag
will preserve line breaks and spaces.
</pre>
<hr>
<!-- Formatting of text -->
<h3>Formatting of text:</h3>
<ul>
<li><b>Bold</b></li>
<li><strong>Strong</strong></li>
<li><i>Italic</i></li>
<li><em>Emphasized</em></li>
<li><mark>Marked</mark></li>
<li><small>Small</small></li>
<li><del>Deleted</del></li>
<li><ins>Inserted</ins></li>
<li><sub>Subscrpted</sub>text</li>
<li><sup>Superscripted</sup>text</li>
</ul>
<hr>
<h3>Quotations forms:</h3>
<p><ins>Small Quote:</ins><q>This one here with double quotes</q></p>
<p><ins>Block quote:</ins><blockquote>This is a large quote with
indentation</blockquote></p>
<p>This word here "<abbr title="Laughing Out Loud">LOL</abbr>" is written
using abbreviation. </p>
<p><bdo dir="rtl">This text will be written from right to left.</bdo>(Bi-
directional override)</p>
<p style="border: 1px solid crimson;"> This is a bordered Paragraph. </p>
<!--Inline CSS style-->
</body>
</html>
comments in css use of /* */ no <!-- -->.
Change :
<style> <!-- Internal CSS style-->
To:
<style> /* Internal CSS style */
what browser are you trying to open your code in and what application are you using to edit your code?
That should work fine but try adding this -
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
</body>
</html>
Well, this code works in js fiddle see:
https://jsfiddle.net/5ue1p3or/
<head>
<style>
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
</style>
</head>
<body>
<h1> My First trial of a site </h1>
</body>
However you should use external css file for styling and try not use !important when you are not force to, as there are some basics rules to follow.
Also always remember to put doctype declaration and remember to refresh your browser after changing in css files.
I want to line it up clearly but I just can't. What should I do for it?
<html>
<head>
<style type="text/css">
.article-topic-list a {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}`enter code here`
</style>
</head>
<body>
<div class="article-topic-list"> Sale of Kodi TV boxes faces <br> legal test </div>
<div class="article-topic-list"> Piracy fighters battle Kodi 'epidemic'</div>
</body>
</html>
To get the results you're asking for, designwise, you'll have to move the margin-styles to the div, and keep the color and text-decoration on your a-tag. If you simply remove the 'a' from the style tag, you won't get any color or text-decoration changes, since the style from the browser (directly on a), would take precedence.
.article-topic-list {
margin-left: 15px;
margin-top: 20px;
}
.article-topic-list a {
color: black;
text-decoration: none;
}
<body>
<div class="article-topic-list">
Sale of Kodi TV boxes faces <br> legal test
</div>
<div class="article-topic-list">
Piracy fighters battle Kodi 'epidemic'
</div>
</body>
See this example.
Instead of applying the css rule to the tag, if you apply the rule to the entire div, i believe it should line up correctly. Your style script would be like this:
<style type="text/css">
.article-topic-list {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}
</style>
And the output would be something like this.
<html>
<head>
<title>QuickLinks</title>
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</head>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>
</html>
Will Not render in chrome. Not sure about others. File is saved as google.html and it is for a directory style chrome extension and will not render anywhere within chrome.
http://validator.w3.org/#validate_by_input
use this more.
There are 7 errors I think according to the validator.
I noticed that your missing the <./style> tag. (ignore the '.').
I founded some errors in your code.
1.In your code there is no end style tag.
2. tag end with after end style tag.
I modifed your code. It's wroking fine.
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</style>
<head> </head>
<title>QuickLinks</title>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>