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.
Related
I am working on a home page that links to several of my projects. I am trying to link to another html that has a different style than the home page. The images and text I have for the second html works fine, but it takes on the style of the home page, and not its own design which is different. My question is is it possible to link to another html that has a different style? If so, how do I input this? When I try putting the style for the second html in the home page's folder, it won't let me since there's already another style.css I used for the main home page. I tried changing the name of the second style file and it still does not work.
If I understand you correctly, you have two HTML pages and you want a different CSS style for each page.
You can have several CSS files but you cannot have two with the same name.
Create two different CSS files. For example home.css and secondpage.css
Create two different HTML files. For example home.html and secondpage.html
Go to the <head> of home.html and add <link href="home.css" type="text/css" rel="stylesheet" />
Go to the <head> of secondpage.html and add <link href="secondpage.css" type="text/css" rel="stylesheet" />
Make sure the html files and css files are in the same folder.
If you have trouble finding the <head>, see the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Yes, it is possible to use different style for diffrent html pages. There are mainly two easy way
Either you use different css files for each html page (Which is not recommended):
Let say for homepage.html you use mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
So for other html page you can use secondpage.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="secondpage.css">
</head>
</html>
and make sure you specify path correctly
Other way which is recommended is you give diffrent class name for the html attributes, So that you can specify the all styling in single stylesheet. which will reduce your page loding time too.
Lets say this is home.html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="homepage">
// Other content here
</div
</body>
</html>
So in Second html file you can use different class
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="secondpage">
// Other content here
</div
</body>
</html>
so now yourstylesheet will look like :
.homepage{
//your style here
}
.secondpage{
// your style here
}
Hope so this helps.
Could anyone tell me why my page isn't linking to the CSS? I have both HTML and CSS file in the same folder.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type = "text/css" href="style.css">
<title> Flying Fish Painting Company </title>
</head>
<body>
<h1> Flying Fish Painting Company </h1>
</body>
</html>
And this is my CSS:
h1{
color:blue;
}
It works fine for me.
If I put both files in the same folder then it also works
<link rel="stylesheet" type="text/css" href="style.css">
if you put your CSS file in a different folder that time.
Syntax:
<link rel="stylesheet" type="text/css" href="foldername/filename.css">
You should write:
<link rel="stylesheet" type="text/css" href="css/style.css">
Could you check the spaces:
type = "text/css"
change to:
type="text/css"
Is this your exact html code or just an example?
There are a couple of spaces before and after your = on the type you should remove.
Personally I find it better to put all css in a subfolder. It shouldn't make a difference however it makes for easier organization.
For a single css style like that I would just put it in line the html unless this is something you want across several html files.
There is nothing wrong with this code except the spaces mentioned above. Works fine for me. Check for typos and make sure it is in the same folder.
I'm using difference CSS (almost 10) and I have a web page that contains multiple webpages and each page with thier specified CSS but the result gives me Headache all the CSS mixed with each other, I tried to declare the CSS separately in the head of each pages like this:
<head>
<title>My web page</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
but it doesn't work, any idea how to make a CSS local declaration so I can use it in a specific elements without recreate all the HTML by class=" " . I want to apply different CSS style in a webpage that contain multiple webpages any declaration to do that?
I'd suggest you come up with a common CSS for all the pages (though you might not even need it) - sets of rules that all of them would use, like defining body styles, reset rules for some elements, etc... Then, in every page you would include that CSS first, and then the webpage-specific CSS after. Like this:
Page 1
<head>
<title>My web page 1</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page1.css"/>
</head>
Page 2
<head>
<title>My web page 2</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page2.css"/>
</head>
etc...
Google's suggested the Optimize CSS Delivery method according to the below document link:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI
According to the Google document I have divide the CSS into two separate CSS files.
a) small.css - Critical CSS
b) common.css - Other normal CSS
Then I've place the critical CSS end of code.
eg: <html>
<head>
<link href="/css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
content
</body>
<html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
However when view the page, that particular critical CSS(small.css) style is not applied to the HTML page. Please help me to solve this Optimize CSS Delivery method issue.
I think you misunderstood a couple of things:
The <noscript> tag will only display contained content if
Javascript is disabled or not available.
What google is explaining is that inline CSS displays faster than CSS
in external files.
inline CSS looks like:
<head>
<style>
.blue{color:blue;}
</style>
</head>
while external files with CSS are included like this:
<head>
<link rel="stylesheet" href="small.css" type="text/css">
</head>
Now to answer your question, your CSS is not displayed because it is contained in the noscript tag. Here is the correct way to do it:
<html>
<head>
<link rel="stylesheet" href="small.css" type="text/css">
<link href="/css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
content
</body>
<html>
Or if you are following googles recommendation:
<html>
<head>
<style>
//Copy content of small.css here
</style>
</head>
<body>
//content with inline styling
</body>
<html>
Why do you have the noscript tag ? Its only for identifying if the JavaScript is not present , so the css will not be loaded .
Also , CSS can be on the top of the code , need not be below . Try only keeping the js code below.
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.