I have a school project that requires me to not use inline style or embedded styles. I have finished the whole thing and figured that out so now I need to move stuff to my external css. I even uploaded it to my school cwp page and it isn't working as is.
There are a few parts to this:
Firstly, create an external style sheet ('style.css' - or whatever)
You must reference this .css file in the head of your HTML document
You must accurately reference / move all inline styles to the external .css file
Firstly, create an external style sheet ('style.css' - or whatever)
You can do this by creating a new Notepad solution & hit 'Save As'. Ensure you save it with the extension '.css'. If you're unsure how to do this, refer here: Save As Other File Type Notepad
You must reference this .css file in the head of your HTML document
This can be done like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Refer here for more information: Reference External Style Sheet.
Please note, if the 'style.css' file is not in the same folder as your .html file & is instead in a folder called 'Folder', you will need to reference it like this instead:
<link rel="stylesheet" href="/Folder/style.css">
You must accurately reference / move all inline styles to the external .css file
You can add identifiers to your tags, i.e. you can add an 'id' or a 'class' attribute to any tag, these will help reference your item in css.
You can add an id to a tag like so:
<label id="lblMyLabel">Example Text</label>
You can add a class to a tag like so:
<label class="lblMyLabel">Example Text</label>
You can reference an id in css like so: #lblMyLabel { font-weight:bold; }
You can reference a class in css like so: .lblMyLabel { font-weight:bold; }
For more examples how to reference an ID see here: CSS ID Selectors
For more examples how to reference a class see here: CSS Class Selectors
This article gives a good overview of the conversion as well: How To Add CSS
Here are examples of before & after the conversion for your reference:
BEFORE
<label style="color:green; font-weight:bold;">I am your heading</label>
AFTER
#lblHeading {
font-weight:bold;
color:green;
}
<label id="lblHeading">I am your heading</label>
BEFORE
<label style="color:green; font-weight:bold;">I am your heading</label>
AFTER
.lblHeading {
font-weight:bold;
color:green;
}
<label class="lblHeading">I am your heading</label>
BEFORE
<div style="padding-top:10px; background-color:green;">
<div style="padding-top:2px; background-color:red;">
<label style="font-weight:bold;">Example</label>
<img src="" style="height:10px;"/>
</div>
</div>
AFTER
.outerDiv {
padding-top:10px;
background-color:green;
}
.outerDiv .innerDiv {
padding-top:2px;
background-color:red;
}
.outerDiv .innerDiv #lblMyLabel {
font-weight:bold;
}
.outerDiv .innerDiv #imgMyImage {
height:10px;
}
<div class="outerDiv">
<div class="innerDiv">
<label id="lblMyLabel">Example</label>
<img id="imgMyImage" src=""/>
</div>
</div>
If you have any questions or want to supply some of your code, I'm happy to help show you a few conversions!
Use <link rel="stylesheet" href="styles.css"> in HTML file
I put a link for tutorial to learn how to use css, I hope it will help your study
https://www.w3schools.com/html/html_css.asp
<!DOCTYPE html>
<html>
<head>
// Link to your external css
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Related
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>
I want to put a background in my web im just staring with a tutorial my code is like this
<html xmlns="http:/www.w3.org/1999/xhtml">
<head>
<title>PARIS DROP OUT</title>
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header1">
<h1>THE DROP OUTS</h1>
</div>
<div id="#container_div">
<img id="drop" src="img/SHOCK.jpg" />
<background-image: src="img/background" />
<p class="red">ESTA PAGINA ES DE LOS LOCOS</p>
<p> Nowadays it's easy to put together a web presence using social media and a personal landing page, but if you want to actually make your own web site you're going to need to learn HTML and CSS. Fortunately, we can help. </p>
</div>
</body>
MY CSS LOOKS LIKE THIS:
<code> #container_div {
width:1800px;
height: :1800px;
background:red;
I try putting an image it doesn't work either
I have the exact same code that its on the tutorial and I don't see a background no matter what I change
Your div should be <div id="container_div"> (note: without the #)
The CSS selector #container_div means "any element with the id="container_div"
Enjoy!
css code to change background color
Background-color:red;
css code to change background image
Background-image:url();
your css class:
#container_div {
width:1800px;
height:1800px;
Background-color:red;
}
It seems that my external style sheet is not working for the body part. Here’s my code:
all.css:
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3 id="h3">
<a class="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div></a></br>
<a class="a" href="assign.php"><div class="div" style="left:210px"><center>Assign Employee</div></a></br>
<a class="a" href="accounts.php"><div class="div" style="left:400px"><center>Accounts</div></a>
</h3>
</div>
</body>
You have several flaws in your HTML code:
<style></style> - Empty style blocks, not really an issue
<center> tags don't seem to have a closing tag. This tag is deprecated, and you should consider using the CSS style text-align: center instead.
id="div" - Having multiple ID's with the same value is not recommended because it can have unexplained results. The purpose of these is make them unique.
</div> inside <a> tags - In HTML4, having block-level elements inside inline elements was not allowed. This has changed in HTML5, keep aware.
style="left:###px" - Having 'left' as a style property does nothing by itself. That element needs to have the associated position property set too, whether it's set to "relative", "absolute", "fixed", or even "static"
Fixing these issues are probably your top priority, because the structure of your page is messed up beyond repair that the browser doesn't render your (correct) CSS properly.
Also, make sure that your "texture1.jpg" is in the parent directory of all.css, which seems to be one directory above your home.php file. Try removing the "../", and you should be good if it's all in the same directory.
To be a little more elaborate, this is how your application sees your folder structure:
???
|--public_html <--- Root HTML directory
| |-- all.css <--- CSS File you provided
| |-- home.php <--- HTML file you provided
| |-- assign.php
| +-- accounts.php
+--picture1.jpg <--- Picture file? CSS/HTML file cannot access above public_html
If by your comment you say it's in the same as the HTML file, then inside all.css, change the line to just url('picture1.jpg').
As a rare favor, I'll see if I can fix everything from the information you've provided and all 3 files (CSS, HTML, JPG) are in the same directory. You don't seem to understand the concept of how classes and IDs work together.
home.php HTML (complete):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3>
<a class="active" href="home.php">Work Load</a><br />
Assign Employee<br />
Accounts
</h3>
</div>
</body>
</html>
all.css CSS (with added styles, some sample):
body {
background: url('texture1.jpg');
background-size: 600px 500px;
background-repeat: repeat;
}
#main {
background-color: lightpink;
}
.active {
color: green;
}
h3 {
text-align: center;
}
I've created a working JSFiddle with this info and I hope you can use it as a learning lesson to see how selectors work in CSS and how it correlates to your HTML structure.
just add
{}
before body, it worked for me
Change lke this
<head>
<style>
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
<!--html page-->
</style>
<link rel="stylesheet" type="text/css" href="all.css"><style>
</head>
<body>
<div id="main">
<h3 id="h3">
<a id="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div> </a></br>
<a id="a" href="assign.php"><div id="div" style="left:210px"><center>Assign Employee</div></a></br>
<a id="a" href="accounts.php"><div id="div" style="left:400px"><center>Accounts</div></a></h3>
</div>
</body>
I am trying to learn how to use Cascadding Style Sheets. I have a little test html page as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
<INPUT TYPE=text NAME="userID" id="userID" Size=20 >
</body>
And the external css file looks like this:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
This all works fine. But when I look at style sheets created by other members of my team, they have style tags bracketing the content. So it makes me think that the CSS file really should look like this:
<style type="text/css">
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
</style>
However, when I put the style tag in disables the CSS. What am I doing wrong?
Thank you for your help.
Ellliott
The <style> HTML tag is for when your CSS is in your HTML file.
If it's an external CSS file, you do not use them, as it's not an HTML file.
The <style> tag is an HTML tag that you can use to include CSS directly in the page. An external CSS file should just contain the CSS declarations, and not be wrapped in HTML.
For example (taking your HTML):
<html>
<head>
<style type="text/css"> <!-- style is an HTML element -->
body { background-color: gray; }
</style>
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
<INPUT TYPE=text NAME="userID" id="userID" Size=20 >
</body>
According to the HTML spec, your method is best:
To specify style information for more than one element, authors should
use the STYLE element. For optimal flexibility, authors should define
styles in external style sheets.
I am working with a django setup HTML and I want the first part of my html page to be determine by the first CSS stylesheet. The rest I want to be controlled by a different one. Is this possible. I put an HTML CSS link (below) above the code I want it to control. It doesn't seem to work and it looks like it gets applied to all the HTML. Is there a way to specify the CSS link to just the code I want.
<link href="folder/to/css/style.css" rel="stylesheet" type="text/css" />
Why don't you use different classes for the elements below? Also make sure you understand CSS specifity
No, you can't do that. You could use an iframe that has its own CSS.
You could use a specific section class, and link to both css stylesheets, for example:
<!-- Represents a first CSS file. -->
<style>
.section1.customclass
{
background-color: red;
}
</style>
<!-- Represents a second CSS file. -->
<style>
.section2.customclass
{
background-color: blue;
}
</style>
<div class="section1">
<input type="text" class="customclass" />
</div>
<div class="section2">
<input type="text" class="customclass" />
</div>