How Do You Style Multiple Pages Individually With Css? - html

So I want to style my contact page which has its own file, so when you click on it, it brings you to a whole new page, I already got that I'm Just wondering how do I style that page Inside my style sheets without changing every other page?
i've tried
Inside Html
Inside Css
.stylec {
anything i put in here styles nothing because you cant set the body as a class
}
i havent found any youtube videos for this or anything on google other than
"Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using #import keyword."
I'm Just trying to style my contact page inside my style.css and not styling it inside its html
I just want it all to be inside my styles.css so its neat and clean!
thanks for your time!

You should make on stylesheet of CSS and give styles according to the class names.
example:-
.first_body
{
background-color: lightblue;
}
.second-body
{
background-color: cyan;
}
1st-Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>1st html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="first_body">
</body>
</html>
2nd Html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>2nd html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="second_body">
</body>
</html>

You have to assign classes and ids in the html. (You should use an id rather than a class to style the body of a document, since there will only be one per document.)
For instance in your contact.html (or whatever the contact page's file is called) change your body tag to:
<body id="contact-style">
Then in your css file you can assign special styling just for that page using...
body#contact-style {}
You can insert any styles between the curly brackets. To test this, try assigning a background color. If no other elements in your site have a background color, you will see this change right away.
body#contact-style {background-color: red;}

Okay! Your basic HTML document looks like this;
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p class="apple">This is an apple paragraph</p>
<div class="mango">This is a mango paragraph</div>
<h1 id="cat">This is a cat paragraph</h1>
<p class="dog">This is a dog paragraph</p>
</body>
</html>
Note:
Inside the <head> tag is where you import your style.css
Use this tag to import <link rel="stylesheet" href="style.css">
The "href" is used to specify the link of your css file
Example of css file:
body{
background-color: blue;
}
h1{
color: orange;
}
.apple{
color: green;
}
.mango{
color: yellow;
}
#cat{
color: beige;
}
#dog{
color: white;
}

Give the different pages an id attribute on the body tag
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
....
</body>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body id="contact">
....
</body>
In the style sheet that you link to style.css you can define styles for all pages and redefine the styles you want different on the contact page
h1 {
font-family: serif;
color: blue;
}
#contact h1 {
font-family: sans-serif;
color: tomato;
}

Related

Relational Selectors in html and css

So, I'm currently learning #html & #css and I'm on the topic of relational selectors.
In the example, the code below is suppose to display a web page with orange text. The
text is still black even after trying several variations. Can someone help?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="products">
<p>Lorem ipsum dolor sit.</p>
</section>
</body>
</html>
styles.css
body {
margin: 10px;
}
#products p {
color: orange;
}
It works just fine,but you have to link the css file using tag
<link rel="stylesheet" href="style.css">
You have to connect your CSS file to the HTML by linking to it in the <head>, like so:
<link rel="stylesheet" href="./style.css" />
(and if the CSS file is in a folder, it will be ./foldername/style.css)
There are three ways you can implement style to HTML documents:
External CSS
Internal CSS
Inline CSS
You could include your style code in the document (Internal CSS). To do so you would need to enclose it in style tags like this:
<style>
body {
margin: 10px;
}
#products p {
color: orange;
}
</style>
Hide that element in your , or at the end of your , and you should be fine. Generally, it's frowned upon to use Internal or Inline CSS, but you can do if you want to!

HTML class refuses to look in CSS file

I am trying to use a class called "secondary" in my HTML file and set it's properties in my CSS file, but it seems like
HTML:
<!doctype html>
<html>
<head>
<title> My Webpage</title>
<link href="D:\Web_developing\css\styles.css" rel="stylesheet"/>
</head>
<body>
<h1>Main webpage</h1>
<ul>
<li>page 2</li>
</ul>
<p class="secondary">this is the main page of the website</p>
</body>
</html>
CSS:
body {
color: green;
background: black;
font-family: arial;
text: white:
}
.secondary {
background: green;
color: blue
}
I expected the paragraph given the class would have the properties set in the CSS file.
After some testing with the file path I have concluded that the problem seems to be with the class. Is there perhaps any wrong syntax?
The problem seems to be with your link to the CSS file. It's always better to use relative paths when linking asset files to your web page. Try this instead...
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
Learn more about file paths here - W3Schools
Your path does not appear to be correct for the CSS file, your code appears fine other than that.
Assuming you are inside the directory Web_developing change your CSS path to this:
<head>
<title> My Webpage</title>
<link href="css\styles.css" rel="stylesheet"/>
</head>
If your root directory has the directory Web_developing then change it to this:
<head>
<title> My Webpage</title>
<link href="Web_developing\css\styles.css" rel="stylesheet"/>
</head>
If it is taking only the <body> property, try the <div> block and set the class for div, not a paragraph like "<div class = " " ...>".
Otherwise, it will take "<body>" CSS properties.

Is this what my page should look like?

So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}

Can somebody tell me how I am using the class selector incorrectly?

HTML file:
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
</head>
<body>
<p>Red</p>
</body>
</html>
CSS file:
p {
color: red;
}
The word 'Red' does not change to red text when I open the page in a browser. If anyone would know why my CSS file isn't linking to the HTML file that would be greatly appreciated. The files are in the same directory.
The code you have provided has no errors.
Fiddle: https://jsfiddle.net/9n97Lz69/
Please copy & paste the following code into your html file and verify this works:
index.html:
<style>
.menu p {
color: red;
}
</style>
<div class="menu">
<p>This sentence should be red.</p>
</div>
Fiddle: https://jsfiddle.net/21umj65u/
Then move the CSS to mystyle.css and verify this works:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<div class="menu">
<p>This sentence should be red.</p>
</div>
mystyle.css:
.menu p {
color: red;
}
Please check the file location of mystyle.css and verify against the url in index.html:
index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Your code seems fine, perhaps "p" is already defined in your css file.Try this
.menu p {
color: red !important;
}

css stylesheet not linking to index.html

I am learning to work with html and css through making an about me page. I've created a folder called blog and in there I have a file called index.html and a folder called css. In the css folder I have a file called style.css.
For some reason I can't find the error in my code that won't allow me to link my stylesheet to my index file. I am testing out the code on safari by simply opening the file.
here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Stephanie CD</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Hey! I'm Stephanie</h1>
<p>how are you doing?</p>
</body>
</html>
Here is my style.css file:
h1 {
color: blue;
}
body {
background: url("http://i.imgur.com/Gm84ZeZ.jpg?1");
background-size: cover;
background-position: center;
text-align: center;
}
I simply restarted everything, made new files, and now it works. Don't know what went wrong.
thanks
I tested my suggestion in Chrome and found that the resource in the funky quotes was not being requested.
The test is to try to load with and without the funky quotes and see which file actually attempts to load, create a HTML document with just this:
<link href=“css/style-1.css” rel=“stylesheet”>
<link href="css/style-2.css" rel="stylesheet">
and then watch the Network tab in your developer tools to see which file is actually requested by the browser.
This still may not be your specific issue but it worked for me (i.e. style-2.css attempted to load but style-1.css did not).
my case was different.
p{
background: red;
color: white;
}
h1{
background: lightblue;
color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css files\style.css" type="text/css" rel="stylesheet">
<!--**IMPORTANT** while on pc I had to mention the full relative
path to get the desired output.
link href="C:\Users\Arun\Documents\css files\style.css"
type="text/css" rel="stylesheet" THIS WORKED.-->
</head>
<body>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<p>this is a simple paragraph.</p>
<h1>hello, hi</h1>
</body>
</html>