Community post
CSS for multiple HTML pages, one HTML page change
Hi Steemians, it's me again. If anyone could help me with an IT question, I'd be forever happy and my problems with my project will finally be solved!
I am creating a website which has 5 seperate HTML pages, all connectig to a single CSS file.
I need to know how I can make one page different than the others, I want to make some of the content bold and in italics, but I don't want to ruin any of the other pages.
How do I code this in CSS and how do I code it in HTML?
Please don't refer me to any online websites like for example w3schools or csstricks. I have searched their websites and only wasted my time- I could never find what exactly I was looking for- all of the results simply made me more frustrated.
Replies (6)
You have a minor misspelling in the following sentence:
It should be separate instead of seperate.In your css file, add some classes, like
.bold { font-weight: bold; } .italic { font-style: italic; }And then in your HTML, use the classes
<p class="bold">This is bold</p>Good luck!
Thanks Kenny, as always.
My only question now though is: where do I add these classes in the css? In the body{} or somewhere further down the page? Or can these classes simply go anywhere?
You can put your css in a separate text file. Then that file is typically put in a folder called css which is in the same folder where the HTML is. Then add a line to the
<head>section of your HTML file to let it know where to find the css stlyes, like this:<link rel="stylesheet" type="text/css" href="css/style.css">which should work if your css is in a file called style.css
OR you could just put the styles in a
<style>tag in the<head>tag of your HTML file, like<style> .red { color: red; } </style>It might be better to put all your styles for all your HTML pages into one css file because then you can reuse some of the styles on different pages.
I have one external css file, in the same folder as the htm pages. I know how to link them together. However, what I don't know how to do, is how to change ONE html file, while using the same css file for ALL pages.
I simply don't know where to insert tags such as font weight or font style (normal, italics...).
How do I manage to change one single page without messing up the other four pages?
Again, I would appreciate anybody's help!
You can set up one external css file with all the style definitions for all the classes you can then use on any element of any HTML file.
Once you have defined styles in your css file for things like, for example, heading, menu, footer - then you can do things like
<div class="heading">A Heading</div><div class="footer"><The footer</div>Now if you want to have different styles for different headings on different html pages, then you could create a style of heading1, heading2, etc and use a different class on a different page to make it look different.
Your first html page might use an element with class heading1 while your second html page might use the one called heading2. Then you could change the definition of either of those classes without affecting the other.