I have HTML file and a CSS file
and I want to add the to wix which accepts only HTML code
when I add the code of the HTML file it gives in the live website me what I want but without any design just a text.
The question is how do I emerge the HTML and the CSS files to make one HTML code & add it to wix
Here is what I get when I post the code on Wix
I need this design on wix
You can use the <style> tag and put your CSS inside. For example:
<html>
<head>
<style>
h1 {
color:red;
}
p {
color:blue;
}
</style>
</head>
<body>
...
</body>
</html>
Or you can write inline styles directly in your HTML elements, like:
<h1 style="color: red;">
Hello
</h1>
Related
I have simple problem. I have some headings in my html file. Something like
<h1>H1 heading</h1>
<h2>H1 heading</h2>
And I want to use pandoc to have it centered in generated document.
I've tried add to my html something like:
<style>
h1, h2 {
text-align:center
}
</style>
But it doesn't helped. Have you some ideas how to do it as simply as it is possible?
Many thanks to your answer
Your code should be functional, but it will depend where you positioned it.
Old Style without using .css should be inside <head>...</head>
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2 {
text-align:center
}
</style>
</head>
<body>
<h1>H1 heading</h1>
Hello World
<h2>H2 heading</h2>
Hello Space
</body>
</html>
If above is misbehaving raise a bug report with Pandoc
I am uncertain why you have used Pandoc since unless you install the large number of LaTeX dependencies then you will be using Wkhtmltox which on its own (without Pandoc) does the task.
wkhtmltox\bin\wkhtmltopdf.exe file://test.htm test.pdf
I'm working on making a dark mode for the Kaplan website tests so I don't blind myself studying.
The following HTML code is representative of the structure of the source, and the tag with id="stylish-23" is what's added by a chrome extension to change the page's CSS styling:
<html> // html 1
<html> // html 2
<html> // html 3
<html> // html 4
<div id="divQuestions"> </div> //actual tag I want to change
</html> // html 4
</html> // html 3
</html> // html 2
<style id="stylish-23" type="text/css">...</style>
</html> // html 1
I put div#divQuestions in the style tag's CSS and it does not appear to have any effect at all. Due to the nature and limitation of the extension, I'm only able to add CSS to the style tag, and the CSS appears to not be able to select HTML tags (or at least when I do, nothing happens). I've noticed that dragging the style tag into html #4 in developer console will properly apply the CSS.
The element in question's CSS from inspect:
My CSS in the style tag:
div#divQuestions {
background: black;
}
Thanks for the help!
#divQuestions selector works for me if I fix the div's closing tag (or even if I don't, as it turns out):
<html>
<html>
<html>
<html>
<div id="divQuestions"> </div>
</html>
</html>
</html>
<style id="stylish-23" type="text/css">
#divQuestions {
padding: 48px;
background: aliceblue;
border: 4px solid blue;
}
</style>
</html>
nth-of-type is a selector that matches the nth element of their "type".
So, you can do this:
html:nth-of-type(1)
html:nth-of-type(2)
html:nth-of-type(3)
...
Or, you can do this since you said "multiple nested tags":
html
html > html
html > html > html
...
I require some help. My friend sent me an HTML document and he asked me to change the background. Now I'm new to HTML and all this but changing the background should be easy but I can't find it anywhere in the HTML doc or the CSS. Any help?
Just create a new css for example for body like this if you want it to be black:
body {
background: #000000;
}
That should work.
div{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/tulips.png");
height:100px;
}
<div></div>
You can change the background by using background-color or background-image as follows:
<div style="background-color: red" >
This div has a background-color of red
</div>
The HTML file contains 2 main sections - <head>, <body>.
Head specifies attributes like page title, language, links to stylesheets (css / designs).
'Background' can be applied to any part within the <body> section of the HTML file (including body).
Background can be applied in 2 ways -
A colour - Using style="background-color: color-code;"
An image - Using style="background-image: url('img_girl.jpg')"
Here is an example of background being applied:
Approach 1: Background colour:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-color: #e6f2ff;">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Approach 2: Background image:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-image: url("/paper.gif");">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Note:
The background color / image can be applied to any element inside body, I.E., to div / h1 / p ...
More information:
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/html/html_images_background.asp
Add a style for header in your CSS file :
.header {
background: "#000000"
}
The background image can be inserted in the page using the below within body tag or by using CSS: < div style="background-image:url('[image url]');>
Also, this website contain good information to go through : https://www.wikihow.com/Set-a-Background-Image-in-HTML
I have a webpage that is a template from a company that design it for us and we have an admin panel which we can add content to the page.
This normally works fine but there is a specific page that doesn't look great. It has a lot of text on it and we want the background to be a dark brown colour, a gold border around it and the text in bold.
When we are adding content we create a content block and in this, we can add html, I have recently done a very basic course in html. I know normally the page will link to a CSS file which will provide the page style. But I also know you can add the <style> tag in and then add CSS directly into the HTML.
This is maybe a long shot but does anyone with any knowledge of template website know if it would work to add the css in this way just to change the background colour and give it a border? I presume I would need to use something like google dev tools to find out what the section names are to identify them in the CSS? According to dev tools the section I want to modify looks like this.
<div id="content">
<div class="cs-content-row">
Thanks
If you have very limited control, e.g. you can't add a <style> tag to the <head> or use a custom stylesheet, you can also resort to using inline style, and style individual elements using the style attribute.
See example of use;
<div style="background:brown; border:1px solid yellow; color:white; font-weight:bold; padding:30px;">Your text here</div>
The pros are it overrides the default styling easily, but the downside is you have to re-write code for every element you want to custom style, and if you changed your mind about the colour, you'll have to edit every instance it was used..
You mean normal css into html like this?
<html lang="en">
<head>
<style>
body{
background:red;
}
#content{
width:200px;
height:200px;
background:blue;
}
.cs-content-row{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="content">
<div class="cs-content-row">
</body>
</html>
You can use the style tag but you have to add it between the <head> tags of your page.
If your admin panel allows you to update that part of HTML you can do something like that :
According to your HTML description
<head>
<style>
#content{
/* css targeting the div with id attribute equals to 'content' */
}
.cs-content-row{
/* css targeting the div with class attribute equals to 'cs-content-row' */
}
</style>
</head>
The following is my code.
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
.mainpara {background-color: #d3e5f2;}
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
As you can see, there's a "mainpara" division. How do I specifically apply styling to it? I tried .mainpara {background-color: #d3e5f2;}, as you can see. I also tried putting it above the class.
You need to put CSS in a stylesheet, not as free text in the middle of your HTML.
Either use a style element or (preferably) put your CSS in an external file and reference it with a link element (both of which would go in the head, not the body).
There are examples of both in the specification
<style>
.mainpara {background-color: #d3e5f2;}
</style>
you can not write css code in html page without using style tag
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
<style type="text/css">
<!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
.mainpara {
background-color: #d3e5f2;
}
<!-- Changes color and font size for all p tags on page -->
p {
color: #f60;
font-size: 15px;
}
<!-- Use an id for specific p tag -->
#customParaStyleId {
color: #f60;
font-size: 15px;
}
<!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
.custParaStyleClass {
color: #f60;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
<!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
<p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
CSS should be separated from the body of your HTML Code. It can be placed in either a separate style sheet that you import/include or it can appear between a <style type="text/css"><!-- YOUR STYLES HERE--></style> tags.
TIP:
Often I begin designing and manipulating styles in the head before separating them out into a style sheet. This allows me to focus on the design without having to worry about whether I attached the style sheet properly or not.
Once I finish the page I then move the working styles to a separate sheet to provide re-usable styles across the entire site.
<style>
.mainpara {background-color: #d3e5f2;}
</style>
If you have a stylesheet file or style.css you can just insert:
.mainpara {background-color: #d3e5f2;}
inside of the style.css file