I have some HTML5 files in which I embedded XML through object element. Now, for the HTML files I have alternate stylesheets. What I want to do is to change the style for the embedded XML (because the XML file has its own stylesheet) in the same time with the HTML. So, when I choose a style for the HTML page with the help of the browser, I want the style of the XML to be also changed. Is there any way to do this?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>LondonDiamond Restaurant Menu</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" title="Standard red black white"/>
<link rel="stylesheet" type="text/css" href="../css/style_print.css" media="print" title="Print"/>
<link rel="alternate stylesheet" type="text/css" href="../css/alt_style.css" media="screen" title="Monochrome"/>
</head>
<body>
<object data="../xml/menu.xml"><span></span></object>
</body>
</html>
XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="../css/style4xml.css"?>
<!DOCTYPE menu SYSTEM "../dtd/menu.dtd">
<menu>
irrelevant
</menu>
What happens is that when I chose the alternate stylesheet for the HTML, the colors change, but the embedded XML keeps the same color (and it is normal) BUT I also want to change it in the same time with the HTML.
What I did was to apply the same default and alternative stylesheets both for the HTML files and the XML ones. And in the CSS files I have the style for the HTML and XML elements.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>LondonDiamond Restaurant Menu</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" title="Red Black White"/>
<link rel="stylesheet" type="text/css" href="../css/style_print.css" media="print"/>
<link rel="alternate stylesheet" type="text/css" href="../css/altstyle.css" media="screen" title="Monochrome"/>
</head>
.......
</html>
XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="../css/style.css" title="Red Black White"?>
<?xml-stylesheet type="text/css" href="../css/altstyle.css" alternate="yes" title="Monochrome"?>
<!DOCTYPE menu SYSTEM "../dtd/menu.dtd">
<menu>
.....
</menu>
CSS:
body {...}
header {...}
...
menu {...}
Related
I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>
How do I add line breaks when using the Thymeleaf template layout?
Here is my html base code.
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">Layout title</title>
<!-- Common -->
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/
awesomeapp.css}">
<link rel="shortcut icon" th:href="#{/images/favicon.ico}">
<script type="text/javascript" th:src="#{/sh/scripts/codebase.js}"></
script>
<!-- Add -->
<th:block th:replace="${links}" />
</head>
And this is the html main code.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>Main title</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
</head>
<body>
main content
</body>
</html>
Here is the result rendered by <th:block th:replace="${links}" />.
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"><link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui .css}">
But what I want is:
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
Making the line break like this is what I want.
How can I solve this problem?
I'm writing a CSS file for the first time. This will be simple. I'd like to know:
A) Should the file just be something like "cssStyle.css"?
B) How would I write it in the HTML so it draws from the .css file in the same folder as all my html files?
If index.html and style.css are in the same folder
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body> content </body>
</html>
If style.css is 1 level up
<link rel="stylesheet" type="text/css" href="../style.css" />
If style.css is in a folder 1 level up
<link rel="stylesheet" type="text/css" href="../folder/style.css" />
If style.css is in a folder
<link rel="stylesheet" type="text/css" href="/folder/style.css" />
For easy inclusion of small css content.
<html>
<head>
<style>
body, html {margin:0}
</style>
</head>
<body> content </body>
</html>
To draw it from your html, you want to write this:
<link rel="stylesheet" type="text/css" href="style.css">
Inbetween your head tags. eg:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
You can name it whatever you want as long as the href is the same as the file you called it including the .css.
In head
<html>
<head>
// link to css and jquery here
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
First keep both cssstyle.css file and yourhtml.html in same folder and simply set link tag in your html file
example
yourhtml.html
<head>
<link rel="stylesheet" href="cssstyle.css"></link>
</head>
The title does show up in the browser's title bar as expected, but it also shows up as text on the first line of the Web page. Here's the HTML. What gives?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
<title>User pics</title>
</head>
<body>
<img src="http:/blah.s3.amazonaws.com/1xrfnyf08goxpsda1mhs.jpg">
</body>
</html>
Try
<!DOCTYPE html>
<html>
<head>
<title>User pics</title>
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<img src="http:/blah.s3.amazonaws.com/1xrfnyf08goxpsda1mhs.jpg" alt="" />
</body>
</html>
You can not define link tag outside html tag.
If you have
*{
display:block;
}
in your CSS file make sure to remove it because that will cause the title to show up
remove css reference and check it once.. may be the issue with css
You need to properly close the link tag above.
You have
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
it should read
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8"/>
I have designed a site and my CSS is not loading in FF and IE. It works perfectly in Chrome and Safari. Can anyone help me Debug?
I am loading the CSS in the following way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site title::</title>
<!--CSS Files-->
<link rel="stylesheet" href="stylesheets/style.css" type="txt/css" />
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/dark.css" type="text/css" media="screen" />
`
style.css is missing an e in its type attribute value (txt should be text).