how to give css link to HTML code? - html

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

Related

Font awesome icon does not show up when I use it with other css file

I have a situation where my font-awesome is not working as expected.
I have my style sheet and the one from the font-awesome
<head>
<title> Millionique Square </title>
<script src="https://kit.fontawesome.com/e9148616db.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
If I comment this line:
<link rel="stylesheet" type="text/css" href="style.css">
It works. How can I fix this issue?
Github Repo: https://github.com/rjain09/formValidation.git
You have to load scripts in after body not in head.
<html>
<head>
<title> Millionique Square </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Your body content -->
</body>
<script src="https://kit.fontawesome.com/e9148616db.js" crossorigin="anonymous"></script>
</html>
Try this
<head>
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
</head>
It’s because you didn’t import your index.js script file
So no code added the success or error class to form-control which would override the visibility
.form-control i {
visibility: hidden; /* <- hide the icon*/
position: absolute;
top: 40px;
right: 10px;
}
here

Does having a separate CSS file have an effect on the code running?

I am learning CSS and HTML, and I was creating a template locally, first time I had a separate local CSS file, in this file the body will not be styled but a div was, the second time I tried to include the CSS in the HTML body and not in a separate CSS file and everything worked fine.
First time, the div was styled but the body was not.when a separate CSS file was created:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
</style>
</body>
</html>
<!-- separate CSS file-->
body {
background-color:black;
}
div {
background-color:yellow;
}
Second time, everything was styled as required when the CSS was inside the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Quote Machine</title>
<script src="scripting.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div>hello</div>
<style>
body {
background-color:black;
}
div {
background-color:yellow;
}
</style>
</body>
</html>
You need to include your stylesheet after the bootstrap one for it to override the default bootstrap styling.
What's happening in your first example is it's loading your stylesheet, then loading the bootstrap stylesheet.
In the second example, it's loading your stylesheet, then the bootstrap stylesheet, then overriding the bootstrap stylesheet with the styling you've declared in the html.
In addition to M P's answer, in your second example, using elements as child tags of tags is not proper html. They elements belong in the section.
Your style.css is comimg before your bootstrap file . This needs to be the other way around . The reason your style is working internally is because the dom is compiled last and will override any external styles that do not include !important .
Example
4rd Priority
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
3rd Priority
<link href="style.css" rel="stylesheet" type="text/css">
2nd Priority
<head>
<style></style>
</head>
1st Priority
<div style="color:red;"></div>
All work in this order .
Hope this helps

Referencing a CSS File in the HTML Head

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>

Linking html file to a css file which is in a subdirectory doesn't work

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!

Why is my HTML page's title showing up as plain text on the page?

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"/>