So...as the tile says, I am having a bit of trouble linking my CSS file to my HTML file. I link it, but it wont do anything. Nohing that I do in my file will change or work.
Here is my HTML code:
<!DOCTYPE html>
<html lang=en_US>
<head>
<meta charset="UTF-8">
<meta name="author" content="©Isaac Guillen 2020">
<meta name="keywords" content="Christian, Discord, Christianity, server">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Christian discord server for christians who are looking to spread the word or people who are looking to expand their knowledge on Christianity">
<link rel="stylesheet" href="./CSS/style.css">
<title>Scripture Alone Official</title>
</head>
<body>
<div class="Title">
<h1 class="title-1">Welcome!</h1>
</div>
<section id="link-buttons">
<div class="button">
<a class="link-1" href="#">Home</a>
<a class="link-2" href="#">About</a>
<a class="link-3" href="#">contact</a>
<a class="link-4" href="#">Join!</a>
</div>
</section>
</body>
</html>
And just in case...this is my CSS file:
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
What am I doing wrong?
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a element in the section
External - by using a element to link to an external CSS file
To link CSS to an HTML file, we use the tag that you put in the HTML’s section. The link will look like this:
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
Here’s a breakdown of the attributes contained within the link:
rel — defines the relationship between the file that hosts this command and the file defined in the href attribute. The standard value for this attribute is stylesheet.
type — defines the content of the linked file. In this tutorial, we set this attribute’s value to text/css. However, you can skip it altogether if you’re using HTML5.
href — specifies the location of the CSS file you want to link to the HTML. If the CSS file is in the same directory as the HTML file, you only need to enter the file name. Otherwise, you need to include the folder name in which you store the CSS file (example: CSS/stylesheet.css).
media — specifies the type of media the CSS rules are optimized for. In this tutorial, we use the screen value to imply its use for computer screens. If you want to apply the CSS rules to printed pages, you can set the value to print.
Once you’ve included the above link in your HTML file, save the changes and enter your website’s URL in the browser. Styles written in the CSS file should change the look of your website.
Related
Managing multiple stylesheets in Blazor
Background
I am a backend developer creating a Blazor WASM website.
Problem
I am currently developing an application which is using MudBlazor. I am happy with MudBlazor and would like to continue to use it.
However, I would also like to use the HTML editor provided by Radzen.
The issue I am facing is that there are elements in the MudBlazor sytlesheet (I'm not sure exactly which ones) which are keeping the visuals in the Radzen HTML Editor from working at 100% (bullet points not appearing, indentation not quite right, etc).
With Mudblazor stylesheet active, the text editor does not work as expected
What I've Tried
To confirm that the issue is with the MudBlazor stylesheet, I have commented out the MudBlazor stylesheet in index.html, resulting in the html editor working as expected (but the rest of the website not having the MudBlazor styles). The image below shows the result:
With MudBlazor stylesheet commented, the text editor works as expected
I have put the Radzen Text editor into its own component, so that there are no MudBlazor components accompanying it. From there, I have been attempting to find a way of excluding the mudblazor stylesheet from the html editor component.
Investigated the use of Blazor CSS Isolation, but from what I can see this is designed for the use of custom css created by myself, not the use of stylesheets (please correct me if I'm wrong).
I read somewhere that in general html the latest stylesheet will be utilised. So, in my TextEditor.razor page, add the stylesheet in an attempt to make it the last thing read:
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
The Code:
Index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Writers Friend Web App</title>
<base href="/" />
<!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
<link href="css/app.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- Commenting the below stylesheet allows the Text Editor to work as expected -->
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />
</head>
TextEditor.razor
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
<RadzenHtmlEditor Style="min-height: 300px; margin: 1rem;"/>
#code
{
[Parameter]
public Action<string> OnTextChange { get; set; }
}
What I'm looking for
I would like a way of allowing the Text Editor component to have access to the text editor stylesheet ONLY. i.e. exclude the MudBlazor stylesheet from my component.
I'm wondering if I can remove the MudBlazor stylesheet from the index.html file and include it in the section of all the other components, but this would make it messy and I would like to avoid this if possible.
Thank you in advance!
So, I'm really new to development, but I have an assignment where I have to create a 3 page site. The thing is that the three pages share some things (header, footer, title, banner), and that's great, but there are differences in the rest of the content, so using only one CSS files requires a lod of ID's in the HTML. I was thinking that maybe I could use 1 CSS file for the elements all the pages share, and a different one for each of the pages. Right now I'm using individual CSS files for each page, but if I want to change the footer or header, I'll have to do it three times.
In case this is possible... is it a good practice?
Yes it is absolutely possible!
The same way you currently use the <link> element to reference the css for that given page.
The same way you can add multiple css files.
Now lets say you want to have one css file that takes care of all the styling shared in all pages like the header, footer etc. You can make a new shared.css file and reference it on all 3 pages In addition to the designated css file for that given page.
See example below:
PAGE 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My website</title>
<link rel="stylesheet" type="text/css" href="page1.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
<body>
</body>
</html>
PAGE 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My website</title>
<link rel="stylesheet" type="text/css" href="page2.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
<body>
</body>
</html>
PAGE 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My website</title>
<link rel="stylesheet" type="text/css" href="page3.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
<body>
</body>
</html>
You can keep the common rules of all the three pages (the header, footer etc.) in a single css file to be shared by all the three pages. After it, you can make a separate css file for each page with different rules for the contents.
In short, you will have two css files for each page => One common file with common rules and one different file for page-specific rules.
Also, if you are not having very long rules (>500 lines), and less pages, you can keep all the rules in a single file. For your reference, you can separate the common rules and page-specific rules by comments like the example below:
/**********************Common rules***************************/
common rule 1{
/*Something*/
}
common rule 2{
/*Something*/
}
/***********************Page 1 rules***************************/
page1 rule 1{
/*Something*/
}
Though this is not highly recommended, you can use any of these two methods as per your convenience.
When I open the html file in chrome or IE, the background color and font size doesn't change and I don't know why.
Is it the way I linked to the css file from the html ? Is the path wrong? Should I use / instead of \ in the path name? Is the css content of the css file ok?
This is the head section of my html document (notepad):
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/CSS3/css/styles"/>
</head>
This is the content of my .css document (I'm using notepad):
h1{
background:#B3B3B3;
font-size:150%;
}
My css file is located here --> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
My html file is located here--> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\html
Since you are using external CSS:
HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/home/bhavya/Desktop
/styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Content of styles.css document
body {
background-color: powderblue;
}
h1{
background:#B3B3B3;
font-size:150%;
}
So the reultant output will be:
Update 1:
I think there is some syntactic error in the path which you are using C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
DO CHECK YOUR PATH AGAIN, AND DONT FORGET TO SAVE YOUR CSS FILE WITH .css extension AND YOUR HTML FILE WITH .html extension
I had a folder with 2 folders in them. One named html and the other css. I fixed this by deleting the html folder and putting the html document in the folder, like this:
revised file path
I also changed the <head> link in the html file, like this: <link rel="stylesheet" href="css/style.css"> and it worked.
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.
This is the code(just a test):
<!DOCTYPE html>
<html lang = "eng">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheets" type="text/css" href="/styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
and CSS:
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.
I'm using Linux and Aptana Studio.
I've searched a lot the last 2 hours and cannot find where the mistake is.
I invite you to read this article Absolute and Relative Paths
Then we pass to your code:
<link rel="stylesheets" type="text/css" href="/styles.css">
Should be :
<link rel="stylesheet" type="text/css" href="styles.css">
Your styles.css should be in the same folder as your html file.
To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).
An other way to make your css working is to integrate it inside your page without separation:
Example:
<style type='text/css'>
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
</style>
If the other suggestions don't work, you can try re-saving the HTML and CSS sheets with "UTF-8" encoding and declare UTF-8 encoding in the HTML under the <head> with <meta charset="utf-8>"
The rel attribute should just have stylesheet in it, singular not plural as well
I had the same problem correct the correct directory structure solved my problem. This is a good visualiton on how to organize your directory structure.
http://rosebusch.net/jeff/miscellaneous/tree.html
That is, the index.html folder is on the same level as the CSS folder. If you want to put index.html in a HTML folder, to link to the CSS folder you would have to backout first by linking href="../css/stylesheet.css". The ".." will take you up a level.
Make sure style.css is in your root web directory since that is where you are calling it from
Don't put the / in front of styles.css and make sure they are in the same folder.
Try this instead:
<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
If all the above not working:
1- Make sure you have no inline/internal CSS > Delete all style code from the Html page (it ll prevent external css link)
If your CSS file are in another folder then use
<link rel="stylesheet" type="text/css" href="folder-name/styles.css">
I found out while Using Visual Studio Code and adding quotes that it was quoting automatically. So when I put in quotes and looked in the index.html of the index it was quoting the quotes (Bad News). Try link
<href=FILENAME.css rel=stylesheet type=text/css />
Hope this works! Also, if you want Multiple CSS files, organize them in a folder, if you do so in FILENAME put /FOLDERNAME/FILENAME.css
BUT make SURE it is under the main folder where your Index is!
just try tasking off the / in front of the style.css
Place your link in the head tag or body tag, it is best to put it in the head tag.