I'm pretty new to CSS and have found a nuance that I don't understand.
I'm trying to set the viewport background color, and using the color red in this example.
If I use the following code in an external .css file then add it to my html file in the 'head' section, the viewport color is NOT changing at all -- it is the standard white background:
==== my-external-css-file.css ===
root
{
display: block;
background-color:RGB(255,0,0);
}
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<link rel="stylesheet" href="my-external-css-file.css"
</head>
I am learning CSS using a book and the book uses the external .CSS file approach that does not work. So I took upon myself to abandon the external CSS file and put the root's color change directly in the "head" section of my index.html file -- if I instead put the root color I want directly inside index.html, the entire viewport background is red as expected:
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<style type="text/css">
:root
{
background-color:RGB(255,0,0);
}
</style>
</head>
Since both times I'm setting the root's "background-color" to red, and in both cases I'm doing so in the correct part of the html file, in the "head" section -- why is the external .css file's attempt to set the background color NOT working?
I'm new to CSS so I'm thinking there is some nuance here I'm not aware of? I'm using Netbeans for my development IDE and when I create a new .CSS file, Netbeans is automatically putting the "display: block" statement in the new .css file so I assumed it was needed and left that alone.
The root node of HTML is the <html> element, so the selector should be html not root.
In your external CSS, you have forgotten the : for the :root pseudo-selector. In HTML it will always be html so there is no reason to use :root AFAIK.
There is no such thing as root you can either use elements like html or body for color.
I think in your example you would set your body to:
body {
background-color:RGB(255,0,0);
}
Related
For some reason, my SCSS code does not work on my html file live server. I simply input background color to red but it does not show the correct color on live server. The script in html file for linking css file should be correct.. The post does not allow me to put too much code. Please let me know if I need to provide more code.
Someone please help!
Thanks!
Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css"/>
Here is my scss file code:
#import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,700;1,700&display=swap");
ody {
background: #d81c1c;
margin: 0;
font-family: "Poppins";
}
.navbar {
background: rgb(173, 25, 25);
}
So, you have a few issues here.
Firstly, as Akshay pointed out, your first tag in the css file is 'ody'. I'm assuming this should be 'body'.
Secondly, when setting a colour to the background you should use background-color rather than background. The background css is for assigning an image.
Finally, you havent mentioned, but scss needs to be compiled down to css. I'm assuming this scss file is main.scss and you're compiling down to main.css using visual studio?
To make sure your css is right, I would use the developer tools in Chrome. press F12 in chrome, select the correct element and then under 'Styles' add the css you're looking to use. It lets you che
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.
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.
HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>
I have an local folder with my index.html file in it. It also contains a css folder containing mystyle.css and an images folder containing all of my images. I'm trying to create a background image but it won't display. Can anyone see why?
My css is working correctly and below is what I have in my css:
/*CUSTOM*/
body {
background-image:url('..\images\red_curtain.jpg');
}
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="css\mystyle.css" />
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
Try using forward slashes instead of back slashes in your CSS like so:
background-image:url('../images/red_curtain.jpg');