Videos
I feel stupid and like I have taking 3 steps back in my learning. I am trying to figure out the 3 different implementations of css. Doing External now. Just trying this super simple code, the colors did not show up in the browser like they did on w3schools.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Is it because I don't have a css file on my computer? Do I need to download one? Copy and paste from somewhere? I don't get it. I prefer building with the css and html on the same document because I haven't learned how to do anything else yet. I have been able to follow tutorials fine but for some reason, now it's not clicking.
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>