I have a Ecommerce Host that does not allow access to the Header Tag or the External .CSS file.
I have to override using inline styles.
Problem is, I have to override Pseudo Class :active
Is there way to link an external style sheet from within an inline style so that I can style the pseudo classes?
Any simple alternatives? Without access?
You don't need to put your <link rel="stylesheet" href="blah-blah.css"> tag into head to make it work, but it's a bad practice, because it works slower and looks a bit bad, but I understand your situation :) Just put <link> at the end of the <body> and it'll work fine! For example:
File styles.css
p {
color: blue;
}
File index.html
<!DOCTYPE html>
<html>
<head>
<!-- Evil host holders didn't allow access this tag. Well, okay :D -->
</head>
<body>
<p>I am blue, da ba dee da ba dai!</p>
<link rel="stylesheet" href="styles.css"/>
</body>
</html>
Related
I have a paragraph in my website in which I have to highlight few words. Instead of using div and a class, I used a tag which I name myself as follows
<html>
<head>
<style>
highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
A quick <highlight>brown</highlight> fox jumped over a lazy dog.
</body>
</html>
Here is the JSSFiddle
It seems to work fine. But is there anything wrong with this? Is it okay if I use it for a project?
There is nothing wrong in using custom tags. However, you didn't define the tags you used. Please see the links below to articles on proper ways to user custom tags/elements.
Using custom elements
Extending HTML by Creating Custom Tags
You can use this solution in a project, functionally it's ok but is advisable that you attach your tags with a common classname to define styles sheets (CSS), tags structures (HTML) and functionality (JavaScript) in differents source files.
I recommended you to put in a different file your CSS styles with a link-tag inside the head tag like this:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
In this pages you can learn much more about it:
MDN Web Docs Mozilla
Though it is alright to do that, I would suggest the following: https://jsfiddle.net/838Lrnwk/
<html>
<head>
<style>
#high .highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
<p id="high">
A quick <a class="highlight">brown</a> fox jumped over a lazy dog.
</p>
</body>
This would give the same effect; however, you can control what paragraph has the the effect in and all other tags like font,em, strong, etc and still retain the highlight.
Suppose if I have a website http://somethingsomething.com
And I have 3 css file
common.css
homepage.css
inner-pages.css
homepage.css is required for homepage and common.css is for whole site but inner-pages.css is for other pages only and it's big file. Is it possible to load inner-pages.css after homepage data download. In the same way like we use async attribute for script tag. As far as I know async attribute is only for JS not CSS
my one friend suggested to use requirejs for this http://requirejs.org/docs/faq-advanced.html#css but I don't want to use javascript to load css and even I would think upon JS way i would not use require.js just for this. So if it is not possible with CSS only. what would be the simple JS way to do this?
Async CSS with media="bogus" and a <link> at the foot
Say we've got our HTML structured like this:
<head>
<!-- unimportant nonsense -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- other unimportant nonsense, such as content -->
<link rel="stylesheet" href="style.css">
</body>
More at http://codepen.io/Tigt/post/async-css-without-javascript
You can place an iframe in your page pointing to some dummy page that serves the CSS, that should serve the CSS file async.
<iframe src="loadcss.html"></iframe>
Do note it seems pretty trivial, this causes a minimum of 2 css file transfers per page and 3 css file transfers per child page (if it isn't cached). If you were to minify the css you would only have 1 transfer regardless.
try
$.ajax({
url:'/css.css',
type:'get',
success:function(css){
$('html').append('<style>'+css+'</style>');
}
});
or
function getCss(url){
$('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}
getCss('/css.css');
ok sorry I didn't see you don't want to use javascript
how about using css #import:
<style>
#import url('/style1.css');
#import url('/style2.css');
</style>
Include your CSS in the <body> instead of <head> ... "it seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets." and add a condition for IE:
head
<head>
<!--[if IE]>
<link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
<![endif]-->
</head>
body
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload>
<!-- <![endif]-->
</body>
by Taylor Hunt #codepen.io
As suggested Require is not necessary for loading CSS assets. If you want to get your larger payloads asynchronously without relying on JavaScript you should be looking at leveraging HTTP/2 Server Push to deliver your non-critical style assets. And here's a performance technique you may find useful for delivering critical CSS payloads for browsers which works well even today.
Finally, if you are optimizing your pages for performance and don't want to pull in heavy or complicated tools like Require I've an alternative minimal asset loader you may use if you like.
So I'm going through web design more in detail and by all means the text in my page should be size 20. I don't want to use html tags or javascript to make the text size 20. I want to use css. For some reason my index.html file
http://obesechickenapps.com/myhomepage/
<html>
<head>
<link type="stylesheet" rel="text/css" href="stylesheet.css" />
<!--<style>
p{ font : 20pt Arial,geneva,helvetica;}
</style>-->
</head>
<body>
<p>left</p>
<p>middle</p>
<p>right</p>
</body>
</html>
does not pick up on the css styling in
http://obesechickenapps.com/myhomepage/stylesheet.css
p{ font : 20pt Arial,geneva,helvetica;}
a{ font : 20pt Arial,geneva,helvetica;}
When I put the styling in inline style tags then everything works. I'm so confused...
My text does show up as 20pt font Arial.
Why does the css for this page work:
http://obesechickenapps.com/3ColumnsExample/sample3ColumnsPageCss.html
but the first link I used did not?
TL;DR help with linking css stylesheets and html please.
Fixed:
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
HTML and CSS are real funny when it comes to the <link> property, if even one thing is wrong, the stylesheet won't load at all.
Is there anyway I can get the all style of a page (even the style in some linked css files) as inline style?
For example, I have my css file:
body {
background-color: red;
color: black;
}
And this HTML:
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>Hello World!</body>
</html>
So I'd like to get:
<html>
<head></head>
<body style="background-color: red; color: black;">Hello World!</body>
</html>
It would also work for me if I can get all the style in a style node.
from your comments, what you need is very different
What you are looking for is a tool that grabs an HTML page with it's own CSS styling and convert them into inline styling.
For that, plenty of tools are at your service:
http://premailer.dialect.ca/
There are more in Google, this is commonly used in Mailing as Email Client Applications do not intrepertate linked CSS but inline css.
If you are looking for a .NET solution, you might be interested in PreMailer.NET.
https://github.com/milkshakesoftware/PreMailer.Net
PreMailer pm = new PreMailer();
string premailedOutput = pm.MoveCssInline(htmlSource, false);
Old post, but I finally (2 years late!) got this up on github and in nuget:
https://github.com/lukeschafer/HtmlCleanser
Note: Premailer.Net (suggested by Arical) does not inline correctly.
i am converting over a website and using the same .css files.
its really strange as the site looks slightly different in terms of formatting (font sizes, padding, spacing, etc . )
does this make any sense because i am using the same stylesheets.
is there anything that asp.net webforms was doing that was magic. i am reviewing the actual html which is identical.
Is it possible that in your old site, the ordering of the CSS files in the HTML are different?
Let's say that, in your main CSS file (main.css), you set a font size of anything inside the body tag to be 10px, and in a page-specific CS file (thisPage.css), you set the font size of anything in the body tag to be 12px.
<html>
<head>
<link rel="stylesheet" href="main.css"/>
<link rel="stylesheet" href="thisPage.css"/>
</head>
<body>
...
</body>
</html>
In a page rendering, the font size will be 12px. The page-specific CSS will override anything that matches a rule in the main CSS (unless of course, you apply the !important rule!).
<html>
<head>
<link rel="stylesheet" href="thisPage.css"/>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
...
</body>
</html>
In this page rendering, the font size will be 10px.
This may be something to consider as, because these are cascading rules, the order is important.