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>
Related
How to create a document that allow switch themes using HTML and CSS ? (without JavaScript)
I created simple HTML document :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
:root { --bg-color: lightgreen; }
* { background-color: var(--bg-color); }
/* You can add lines here. */
</style>
</head>
<body>
<div>
<h2 id="theme-1">Theme 1</h2>
Theme 1
</div>
<div>
<h2 id="theme-2">Theme 2</h2>
Theme 2
</div>
<div>
<h2 id="no-theme">No theme</h2>
No theme
</div>
</body>
</html>
with <style> tag.
I tried to insert this CSS code :
:has(#theme-1:target) { --bg-color: red; }
:has(#theme-2:target) { --bg-color: blue; }
but no one browser support :has selector.
Then I tried to insert this :
#theme-1:target { --bg-color: red; }
#theme-2:target { --bg-color: blue; }
but it doesn't change background-color of <body>. It change <h2> tags only.
So, how to switch between themes ? Is it possible at all ?
It is possible: You have to nest everything (or at least everything that should depend on theme). e.g:
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
#theme-1:target{
background: red;
}
#theme-1:target h2{
font-family: "Verdana";
}
#theme-2:target{
background: blue;
}
#theme-2:target h2{
font-family: "Times New Roman";
}
</style>
</head>
<body>
<div id="theme-1"><div id="theme-2">
<h2>Theme 1</h2>
Theme 1
<h2>Theme 2</h2>
Theme 2
<h2 id="no-theme">No theme</h2>
No theme
</div></div>
</body>
</html>
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 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>
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.