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>
Related
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?
my code
<html>
<head>
<title></title>
<link rel="style" href="style.css">
<script language="javascript" src="JS/CommonCharFunction.js"> </script>
</head>
<body>
code
</body>
</html>
but my code is not working.i have to include style to html form
how to include inline css
If you want to add css inline, you can try the style tag inside the head tag: http://www.w3schools.com/tags/tag_style.asp
You can include inline style by adding a style attribute to an element like so:
<body style="background-color: white;">
But I think you need to ask about how to add an external style sheet.
<link rel="stylesheet" type="text/css" href="Content/style.css">
Of course you can also use the embedded style
<title></title>
<style>
body{
background-color:white;
}
</style>
<html>
<head>
<title></title>
<link rel="style" href="style.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" src="JS/CommonCharFunction.js"> </script>
</head>
<body>
code
</body>
</html>
Pay attention to the link-tag
<link rel="stylesheet" type="text/css" href="style.css" />
the attribute rel must have the value stylesheet
the attribute type must be given and the value must be text/css
My HTML and CSS files will not link up. Both files are in the same folder.
HTML (Home.HTML)
<head>
<link rel="stylesheet" type= "text/css" href="/Webpage/Stylesheet.css" />
<title>Webpage</title>
</head>
<body>
</body>
</html>
Stylesheet (Stylesheet.css)
body{
backround-color: #7894D6;
}
If the files are in the same folder, then the href should just be:
href="Stylesheet.css"
try this:
<link rel="stylesheet" type= "text/css" href="Stylesheet.css" />
I have a folder with my loginform.html and a CSS subdirectory with a simple CSS file:
<!DOCTYPE HTML>
<html>
<header>
<title>Login Forms</title>
<link href="CSS/LoginForm_CSS_1.css" rel="stylesheet">
</header>
<body>
</body>
</html>
The problem is that I cannot link them, and I cannot understand why, I tried:
<link href="CSS/LoginForm_CSS_1.css" rel="stylesheet">
and
<link href="/CSS/LoginForm_CSS_1.css" rel="stylesheet">
and
<link href="../CSS/LoginForm_CSS_1.css" rel="stylesheet">
but nothing works, when I put the LoginForm_CSS_1.css file in the same directory as the html file and use <link href="LoginForm_CSS_1.css" rel="stylesheet"> everything are ok. Any idea what I am doing wrong?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/LoginForm_CSS_1.css" rel="stylesheet">
</head>
<body>
</body>
</html>
head tag is for root, header tag should be in the body!
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"/>