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...
Related
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.
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.
If I take css script from this example W3Schools and I put it into 2 external css file (font.css and menu.css) and then I called them in html, the arrow from Dropdown menu disappear.
The content from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css is in font.css and the entire content of tag <style> is in menu.css.
I can't include web link because I don't have access to internet where I want to create this.
The code ended like this:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="font.css" >
<link rel="stylesheet" type="text/css" href="menu.css" >
</head>
<body>
<!–– Rest of the code...-->
</body>
</html>
its not enough to copy content of https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css to your css file! since there is some linked fonts and images that directed by "Relational Path"
in this case you have to use External CSS URL replaceing with your local css file
means;
replace
<link rel="stylesheet" type="text/css" href="font.css" >
with
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
or if you want to use offline , you have to download FontAwesome toolkit from
https://fontawesome.com/download
and use it in your source code
there is sample files in downloaded archive file...
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.
Say I have an HTML page linking to an external stylesheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Whatever Title</title>
</head>
<body>
// body goes here
</body>
</html>
Now, say I want to add another stylesheet (or 2 or 3 or 500). The usual way to do this is to have more than 1 <link> tag:
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="new.css" />
<link rel="stylesheet" type="text/css" href="old.css" />
...
Or maybe #importing, but I've never really done that personally. However, is there a way to have more than 1 stylesheet for a single <link> tag, probably in the href part? Perhaps something like this?
<link rel="stylesheet" type="text/css" href="style.css; new.css; old.css" />
More generally, is there a way to do this with other attributes of other tags, like with <script> tags or <a> tags (that last one would be weird)?
By the way, in case you were wondering, the syntax I used was for HTML5, but I'm sure it would be the same with HTML 4.01.
No you cannot specify multiple locations in the href attribute. Per the spec, each <link> represents a document that is connected to your html. So by design it would be only one document.
http://www.w3.org/TR/html401/struct/links.html#h-12.3