I am currently making a website for my college project and I want to make it as good as possible. I basically want to have several HTML pages for my website which I have setup but I want to use only the one CSS page. So basically if I edit one page, for example my second page, how do I change the look of it without editing any of the CSS for my first page. I have tried several things but I honestly have no idea.
Any help is appreciated and thank you in advance.
You cannot just change the layout of each page in CSS, CSS is not aware of what the page you are at.
Either do you change the layout by changing the whole CSS file. Or you try to put the CSS special functions for that page inside the page elements.
Otherwise you can't do that!
For example:
You can create a single CSS file and link it as:
<link rel="stylesheet" href="site.css" type="text/css">
Then in each page, where you want the style to be different you can change the style inline:
<element style="property: value; property_2: value_2;"></element>
Like this!
How about adding a class to the body tag on the second page, then specifying the style that are just for that page by using the class.
Page one:
<body>
<p>This page is boring</p>
</body>
Page two:
<body class="page-two">
<p>That's a mighty fine body</p>
</body>
Then your CSS could be
p {
background: white;
}
.page-two p {
background: red;
}
If you have a lot of extra CSS to apply to the second page, then you might consider using LESS or something similar to make your life easier.
Your best method is to have an app.css file that has global settings like height, width... and then have specific page files index.css, portfolio.css.. that have specific styles like colors.
You can specify your button general style in your app.css, and then more specific styles in each page css file.
app.css:
button{
height: 30px;
width: 150px;
border: 1px solid purple;
color: purple;
}
index.css:
button{
border: 1px solid black;
color: black;
}
Add the app.css to each html file, and then only the specific page css file to each html file. This will make it easy to expand in the future.
You need to create a template for your HTML pages and then link an external style sheet in your <head> section of each page like this:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Then for any special cases that are not part of the template, you can link additional style sheets. Just a side note, embedding styles in elements directly is harder to maintain than linking multiple CSS files.
If you are allowed to use JavaScript, you might like to use a JavaScript template engine like Handlebar.js.
The beauty of template engines is that you can define sections and create dynamic HTML. This may be more complex than what you're wanting here, but it is very cool.
A large list of template engines can be found here: http://garann.github.io/template-chooser/
Related
I am using a template (A). This has some CSS files and I want to inlcude an other template (B) in this template and the other template has also some CSS files. By including the css of template B in A, some forms are looking different because of the new CSS of template B.
How can I inlcude all CSS files of both template without replacing some forms.... Can I set a priority to one CSS? Or is there a tool where I can put more CSS files which will compress all CSS files to one?
Or can I use one CSS file to only one DIV?
CSS means "Cascading Style Sheets". Here "Cascading" means that If something is found two times than the last has priority. So link the CSS file at last which you want to give priority. You can also use !important to give priority. For instance:
color: red !important;
Here red will be used overall.
I’m not completely sure what you are trying to do.
However assuming you want to link more than 1 css file to page. You could play with priorities of CSS selectors. An ID for example has more priority than a Class. You could also make them more specific.
For example:
body ul li span {
Color: red;
}
Span {
Color: blue;
}
Here the span should be red
You should try to include the CSS you want for your login page only (template (B)) into your login page HTML only, like for instance:
index.html file :
<link rel="stylesheet" href="templateA.css">
login.html file :
<link rel="stylesheet" href="templateB.css">
The objective if simply to avoid conflicts between both template, you cannot use both of them on the same page it will cause a lot of bugs and slowdown your website a lot.
Please feel free to ask me in the comment if I'm not clear about anything.
I include bootstrap link in my website like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
And right below, I include my own css stylesheet like this:
<link href="css/header.css" rel="stylesheet" type="text/css">
But as I included bootstrap, I could no longer edit the website's style through my original stylesheet in header.css. I can still edit the website's appearance through <style="....">, but I'd like to integrate every style in the css file. Does anyone know how to solve the problem? Thanks.
CSS stands for Cascading Style Sheets, which may sound a bit arbitrary, but it's very important to understand that it functions exactly as the name states. The styles "cascade" down the file. You can easily override any attribute you want if you put it further down the file. If you don't want it overwritten, you give it more weight, or more accurately, more Specificity.
Many bootstrap styles are notoriously specific, and require heavier selectors to overwrite.
So first of all, make sure you're loading you header.css file _after your bootstrap.min.css, and make sure you're using specific enough selectors.
Take a look at this snippet: If you want the .alt div to be black, you'll need to make sure you're using a heavier selector if your library is using a really specific one, even if your selector comes afterwards.
/* Library.css */
div {
background: #0095ee;
color: #fff;
}
div + div.alt {
background: #ee3d96;
}
/* Custom.css */
.alt {
background: #000
}
<div>I'm the first div</div>
<div class="alt">I'm the second div</div>
<div>I'm the third div</div>
I read an article online for tips using CSS and one of the pointers was:
Use a master stylesheet. “One of the most common mistakes I see
beginners and intermediates fall victim to when it comes to CSS is not
removing the default browser styling. This leads to inconsistencies in
the appearance of your design across browsers, and ultimately leaves a
lot of designers blaming the browser. It is a misplaced blame, of
course. Before you do anything else when coding a website, you should
reset the styling.”
Could anyone point me to any tutorials (or even help on here) as to how I can setup a Master CSS Page for my website, and also how I can call classes from the Master CSS Page to objects in my webpages.
For example if I set some styles in my Master CSS page,
I could set class on a div to class="main-header-blue" and it would call that style from my Master CSS Page and apply it to my div (and I could call this class from any of my web page)
Any help or advice is appreciated. Thank you in advance.
I think what you're looking for is Normalize.css. By including this asset prior to your own custom styles, it will help to remove browser inconsistencies with things like margins and padding on the document.
Otherwise, just style as you would normally and you should just be fine. Let me know if you have any other questions!
I hope my interpretation is your answer:
CSS is applying styles from a top-down perspective. This means, if you insert two stylesheets, the top one is applied first and then the second one overrides the first stylesheet
That means that:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle2.css"> // this one overrides the first
That applies to styles too:
div {
background-color:green;
}
div {
background-color:red;
}
// the background color is red.
That could mean that the first stylesheet is the master stylesheet. That one is containing the 'master styles' and the second one is for 'overriding the defaults'. This is useful when you import a stylesheet from 3rth parties (e.g. Bootstrap).
A second interpretation is SASS. Within SASS you can create a master stylesheet containing the variables that will be applied in the other stylesheets. So, in the master stylesheet you say this:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
Then in your other stylesheets you use those:
body {
font: 100% $font-stack;
color: $primary-color;
}
The basic way of setting a "master" stylesheet is the following:
Assume you have a folder structure like this:
webpage (folder)
css (folder)
style.css (file)
index.html (file)
Lets say you have a file called index.html at the root of your project folder. You need to include/reference the stylesheet (style.css) in the index.html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mydiv">Your content</div>
</body>
</html>
Then you can have this in your style.css file:
.mydiv {
width: 300px;
height: 300px;
background-color: red;
}
This will make the <div>inside the <body>to have a width and height of 300 pixels and a background-color of red. And you can call this style anywhere inside the webpage by giving a <div> the class mydiv.
That is it simply put.
Let's say I have 5 webpages and on each webpage I want the background color to be different. I am using only 1 css file. Each webpage will be accessed like this: domain.com/page1
Do I simply using 5 different CSS files and just change the background-color in the body or is there a more simpler way to achieve this?
Add different class to your <body> on each site, and then use that class to get proper background color.
Of course, you don't have to multiply code, that is common to all sites.
For example:
On "page1":
<body id="page1">
On "page2":
<body id="page2">
Your CSS:
body#page1 {
background: red;
}
body#page2 {
background: blue;
}
well if all pages use the same css file the same background will be used to all...
one easy way to do it is to overrule existing background-color in body. so if you have like a css file containing:
body
{
background-color: aqua;
}
then below that (after the css file is implemented) and on the page you need to have a new color you can just overrule it with following:
<style type="test/css">
body
{
background-color: blue;
}
</style>
How about adding a simple inline style to the body tag of each page such as this?
Page 01
<body style="background-color:#111;">
Page 02
<body style="background-color:#222;">
Page 03
<body style="background-color:#333;">
Bare in mind that in regards to design, such proposed variation in colour scheme is often a bad idea. There might be some function behind your idea which would make sense but otherwise I would recommend minimalism coupled with consistency throughout the design process.
How do i give default color for text in html ? To explain more in detail...We have dreamweaver or notepad++ or dojo tools or visual studio or any other tool...when we start typing anything..by default it gives color for specified text..Another good example is stack overflow..when some one asks a question...there will be blue color for some text and red for some text and so on...
same like that,i have an web page where when user clicks a button, a message pops up with some html code..so for tags like its should represent one color and content text should be in other color.
hoe do i go about this.?
Thanks in advance
Thanks for reply..Currently we have 5 to 10 lines of html code..but in future as per requirement we might have 1000 or more lines of code..so for each tag i nned to css class ?
Cascading Style Sheets sound like what you're looking for. You can use CSS to define not only colors, but the entire appearance of your page.
The most basic CSS selectors are just the names of HTML tags, so you could write a simple stylesheet like this:
body {
color: blue;
}
h1 {
color: red;
}
p {
color: purple;
}
What you can do is have a master css file and include it in all your html pages. In the master css file you define all your html tags so that they represent what you want the users to see. Once you include the master css file in your html page, it will look same as your other pages. This way you dont need to write css in all the files. You will just need to add a link attribute to all your html files.
<LINK href="master.css" rel="stylesheet" type="text/css">