I have a master page which has an exteral css page in the header. Includes the height of the pages, however only one page needs to be longer. So I figured inline css would be the best option over creating a whole other master page or creating a new css page that only has one line different.
I looked through this site for an answer but ive only found how to change the external css link to one page, but like i said i dont want to add a whole new different page, I only need the hight property of the pages to be changed so is there a way to just override it by something similar to inline css? or is a new css page the only option?
If you are trying to add in the HTML page (seattle.html) then use the below code
<!--MS:
<style type="text/css">-->
#contentBox{ margin-left: 0; margin-right:0; width:100%; min-width:0; } #contentRow{padding-top:0;}
<!--ME: </style>-->
If you want a certain page to have just one difference, you don't need to copy and paste the whole stylesheet over to a different stylesheet. As long as it is included after (i think) the first stylesheet being included, all you need to put is the changes you want.
If you want to put a small bit of CSS on a HTML page without having a stylesheet, simply put it in
<style type="text/css">
css code here
</style>
I hope this works,
-Ben
First of all, you're talking about master pages, which are part of asp.net, not classic asp, so I'm retagging your question accordingly.
asp.net allows you to give the style tag the runat = server property. In header of am aspx page you could add
<style type="text/css" id="sitestyle" runat="server"></style>
In the codebehind you can then populate this as follows
sitestyle.InnerHtml = (your server generates css styles here);
Edit - master page with two content placeholders
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" %>
<html>
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
If You want to use the Inline css then you can use that inside the <style> tag.
But Inline and Internal css is not the good option.
Because being as a good developer It is always a good practice that you use External css.
It will really help you to reuse your css.
&
Biggest Advantage is it will make your code more maintainable.
I hope this will help you.
Related
I wanted to create a contact-us page with HTML(no CSS document is allowed to use), then I found what I wanted but the code is written in 2 documents, HTML code is written in HTML document and the styles are in the CSS document. I'm looking for a way to use the CSS codes inline in the HTML document. Could you help me, please?
<html>
<head>
<style>
p {
color: green
}
</style>
</head>
<body>
<p>All your custom CSS can go in the head section of the HTML</p>
</body>
</html>
You will want to use a style tag like this: <style> </style> and inside will go the CSS.
It's good practice to keep your CSS in a seperate file to make the code look cleaner
I have a index.html page and a style.css file.
I have a style class called .slider and a style class called .logo. Should I put both .slider and .logo inside the style.css page or should i put .slider in index.html and .logo inside .css?
im asking this because i dont know if I should put styles only related to one page inside a global style.css or should i just put it inline in the page it applies to?
Typically you embed css that is page specific. Here is how I do my css:
Global css (seperate file(s)):
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
NOTE: In today's web world we use a ton of plugins/themes and these plugins/themes tend to roll out newer versions so when you override these plugins/themes make sure you create a css file specific to that theme.
For instance,
Bootstrap 3.1
<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css">
Create this for all your bootstrap overrides so you can use the latest version when it comes out.
<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css">
Page specific css(embedded):
<head>
<!-- last element in head //-->
<style type="text/css">
.pageSpecific
{
color: red;
}
</style>
</head>
When I am in development stages or the html element does not require css classification.
Simple style format (inline):
<th style="min-width: 65px;">Column Header</th>
You may have print specific css as well:
<link href="/css/print.css" rel="stylesheet" type="text/css">
and inside this file wrap your css as such:
#media print{
<!-- print specific css here//-->
}
Keep in mind that you may want to use a css classifcation at a later date when at the time it may seem page specific. Always code for reusability!
Finally:
I like to use css minifier when I put my file(s) into production. I do the same with my javascript files using UglyJs. There is also LESS css that you can use but for now I would stick to these simple conventions or something similar.
Styles can go in one of three places.
Inline on the element itself
In the html page
In a separate file
I would suggest either putting it in a <style> tag in the <head> of your html or putting it in a separate file, either will work just as well. Obviously having the styles in a separate file means you could reuse those styles on another page if needed.
Either way, it won't make a difference. Personally, I like to have all of my CSS in one place, but you can do whatever you want. If you do put all of your CSS in one document, use comments to separate it into groups, so everything will be easy to find.
You should NEVER have inline or on-page CSS. It should all go in the stylesheet (of which you should only have one per media-type) - why? Because stylesheets are cached, and the cache is way better to hold it than the HTML-files (which may also be cached, by all means, but with dynamic content, they often load quite more often than CSS).
Second, it's a nightmare to update and change, if not everything is in one file.
I am doing a project which is building a website for my CS 205 class. I have made it using notepad++ for the html files and notepad for the css files. My site has a home/index.html page as well as 5 other content pages. What I did was created each each page in notepad++, with each page having its own css file.
What I'm having trouble with is it must have 1 css file that maintains a consistent look across your site / or link all pages to the same css external file. I'm not totally sure if those two mean the same thing that's why I list both of them.
I already have a style sheet in each html page that links to its css file. But I must have one css file for the entire site. Could I just copy and past each css file into one without it changing how each page looks? I would really appreciate it if someone could explain how I do this without it messing up the setup I have for each page.
Having all of your styles be consistent across the website is ideal. To achieve this, you have a single stylesheet and link all your pages to it using the <link> tag in the <head>.
It's a good practice to reuse as much CSS as you can, it'll save you time in the future and that's kinda the goal of a stylesheet versus inline styles.
To answer your question, yes you can combine all of our stylesheets together into a single stylesheet provided you do not have any duplicate class names. Notice in my example how I have a .class-for-index that is used in index.html but not in page.html and similarly for .class-for-page.
styles.css (your single stylesheet with all your classes)
body {
background-color: cyan;
}
.class-for-index {
color: red;
}
.class-for-page {
color: blue;
}
index.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-index">
Page 1
</body>
</html>
page.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-page">
Page 2
</body>
</html>
You've learnt an important lesson of the DRY principle - Don't Repeat Yourself. Maintaining many CSS files creates overhead - how many places do you want to define/change the styling for H1 for example? This is why you've been asked to have a single file.
I'd recommend taking the largest of your css files and making it the master. For each of the other files, add those elements that are missing from the master. It's tedious, but that's the problem you created ;)
You could just copy and paste each file into a single master file and it would work (this is css and the last definition will win), but it's poor practice and you'll just have problems editing it when you have to find the actual definition you are using.
Others have already explained how to link to a single css file from many pages.
I am assuming you aren't using PHP at all.
Maintaining consistent look across all your webpages is quite easy if done correctly.
basically you have two options:
1. Put all CSS blocks into a single file and link it to all pages
For example: add this to all HTML pages, this single style.css file has rules for all the HTML pages as well as the overall layout.
<head>
<link href="style.css" rel="stylesheet">
</head>
This style.css file can get messy and large if you have a lot of HTML pages.
2. Put CSS blocks that are related to overall design in one file; add individual page-specific CSS rules into new files and link these to their respective pages
For example: add this to a login page, the main.css file will give the overall layout like body background-color, font-family, font-size etc. etc. while the login.css is specifically tailored to the login.html page.
<head>
<link href="css/main.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
</head>
I personally prefer the 2nd approach because it's more easy to maintain and I have more control over my CSS without breaking other styles.
However if you decide to follow the 1st technique, it is advisable to separate strictly page specific CSS (styles that are being only used by as single page) by comment lines. This makes the file more readable.
I think a single css file to be created and linked to all pages. You can create multiple css files too but one css file would be easy to maintain and once your index.html loads the css file would get cached in the browser.
Each file within your solution just needs to link to that one unified external stylesheet via a link tag in the head of the document:
<link rel="stylesheet" type="text/css" href="/path-to-mystyle.css">
Google "create external stylesheet" for many resources on this!
You can create a separate CSS file and put all of your "common" CSS into that, call it main.css for example. This is CSS for tags such as p, h1, h2, ul, li etc to set fonts and margins etc across the whole site since these should not really change between different pages.
You can include that file on all of your pages.
Then beneath that file you can include a page specific CSS file with CSS for that page only. That will have CSS which is for the layout of that specific page like background-images etc.
This is creating external css file:
In Index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Other pages,
Page-1.html:
Put the same css file,
<link rel="stylesheet" type="text/css" href="mystyle.css">
Same as put css file for page-2.html and likewise..
Note: Latest of html, no need to put type="text/css" for create external css file.
It isn't fantastic practice to have 1 CSS file for all pages in a site, especially if you are styling selectors like h1, a, p etc... very differently per page.
But allejo has a great, simple approach to it.
Since the project calls for 1, just make sure you don't override the styles of elements on pages you want styled differently. If it means adding some additional divs to encompass tags on multiple pages to not lose points then go for that.
IE:
.about_page h1{
...}
.home_page p{
...}
etc...
I have the following code in the project's MasterPage.master file :
<%= ConfigurationManager.AppSettings("System").ToString() %>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="Stylesheet" href="/App_Data/Styles/Site.css" type="text/css" />
</asp:ContentPlaceHolder>
<%
If (ConfigurationManager.AppSettings("Mode").ToString() = "TEST") Then
%>
<style type="text/css">
body {
background: #99cccc;
}
</style>
<%
End If
%>
I do not want to do this:
<%--<div style="text-align:center">--%>
rather I want to be able to do this:
<div class="masterpagediv">
The CSS file contains:
.masterpagediv {
text-align: center;
}
I am not sure if the location of the CSS us being correctly identified in the href which could be the reason that the rule is not being applied to the tag.
The project did not use CSS before I started working with it. Am I supposed to enable something to be able to use the CSS?
Thanks.
Does your other styling work?
Try setting the background color on the class to make sure it's being applied to what you want.
From the markup you posted, there's no div with that class applied. You may want to double check that you're applying the style in the tag.
One more thing that just got me the other day - I had to set the CSS MIME type up in IIS. There's no error when this happens, you just won't get styling. Otherwise IIS doesn't know how to serve the file. (Strange, I know, but true)
I see that multiple HTML tag file is correctly rendered by the browser. I mean like two html files merged and concatenated. But if I put a STYLE region into each of the HTML parts and the classes or id's are the same I get the last css rules applied also to the first part. I ask how to make css rules acting just on the part they are inserted, even the classes and ids are the same. I need this special thing, so I am looking for a solution or a trick.
Having more than one html tag in a document is not valid HTML code. The browser will try to render the content anyway, but the separate html sections will simply be mashed together into a single document.
You can't apply separate styles to seperate html sections, because the browser will not keep the html sections separate. Anything after the first html section will just be thrown in at the end of the previous body, and the browser tries to make some kind of sense out of the complete mess.
I think multiple html-Tags in one document are not allowed.
I do not see any advantages for doing so.
When you have multiple documents, consider to use the frame or better iframe-tag
HTML Tags and CSS rules are entirely different in behavior. So, if u merge html files also, it will all act as a single file. Try PHP include function and include a HTML page inside another. Once rendered, it will act as a child of parent.
So for a Single HTML file if you write multiple CSS rules with same name, it will surely crash.
You can do this by replacing the classes/ids with inline code.
Consider the following 1st html file:
<html>
<head>
<style>
.aclass{
color: #fff;
}
</style>
</head>
<body>
xyz
</body>
</html>
And this 2nd html file:
<html>
<head>
<style>
.aclass{
color: #000;
}
</style>
</head>
<body>
abc
</body>
</html>
Now you can make the styles inline in both the files and then merge them, and final results should look like:
<html>
<head>
</head>
<body>
xyz
abc
</body>
</html>
Having multiple elements with same id is very error prone. Breaks on more than one occasion like
On javascript: document.getElementById('idname');
You can't put two html tags in one css file. But you can put the style tag in every html file and from there you can refer the html tag.
For example : consider I have two files home.html and login.html
So In css in can make entry of one html tag for one file while in other html file I can simply put it in tag.
This is one css I have made for both the files.
html {
background: #ffffff;
}
So I am keeping entry of html tag of home.html in css while for other I can write in its own html file like this
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="FeedbackManagement.css"/>
<style>html{background: green;}</style>
Hope this helps. Please see the background color for both of these files.
Home.html file
login.html file