I was just thinking of giving the users the feature to chose fonts from google and take the url, to use it in the template.
Is it possible to place a stylesheet link directly to a div?
Any help will be greatly appreciated!
Eg:
<div id="post" href='http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'>
</div>
Thanks in advance
No, you cannot add a separate stylesheet to an element.
You can use inline styling via the style attribute.
<div style="font-family:arial;"></div>
http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2
Better yet, dynamically add a specific class based on the user input and style it in the global stylesheet.
Related
i have an html page with alot of links using a tag. i want to open all links in different tabs, instead of setting target="_blank" in all a tags, is there anyway to do it like below in css:
a{target="_blank";}
can anyone please tell, thanks in advance.
Specify a default target for all hyperlinks and forms on a page:
<head>
<base target="_blank">
</head>
source
you can also add a small script
<script>
document.querySelectorAll('a')
.forEach(function(elem) {
elem.setAttribute('target', '_blank');
})
</script>
If all code is in a single HTML file it would be easiest to run CTRL/CMD+F and add target="_blank"to them. This would be very easy to so in Sublime Text for example.
This could also be easily accomplished with PHP.
Usually, CSS is used to style the HTML markup; therefore I see no real value in adding the target with CSS.
I suggest you think about if you actually want to use target="_blank" on all links as this is generally considered bad practice. See https://www.searchenginejournal.com/when-not-to-use-target_blank-link-attribute/19924/
Also, always use rel="noopener" or rel="noreferrer" to your target="_blank" as omitting these is a security risk! See https://web.dev/external-anchors-use-rel-noopener/
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
I have new to CSS / HTML , sorry to ask such question .
I want to have a CSS / HTML code to make the word "testing" do not have underline , but I still find the underline on the web page , would advise how to change it to make it work ?
<a style="a:link {text-decoration:none;}" href="http://example.com" >testing</a>
you need to change this
<a style="a:link {text-decoration:none;}" href="http://example.com" >testing</a>
to this
<a style="text-decoration:none;" href="http://example.com" >testing</a>
check this fiddle
http://jsfiddle.net/K6CdG/
If you add a style property to an HTML object, you don't have to add the CSS Selector. The style property in an HTML object only works for that particular object.
So in your case you only have to add style="text-decoration:none;" into the HTML object.
However, if you don't want text-decoration in every <a> objects on the page, you have to add the CSS within the <style> tags in the <head> tags.
<style>
a {
text-decoration:none;
}
</style>
You could also link to an external CSS page. Most people prefer this to keep their document structured. To achieve this you have to add the following code in the <head> tags:
<link rel="stylesheet" type="text/css" href="style.css">
Change href=style.css to the file name of your CSS file (.css file extension included).
You can do it in this way as well if you want to change it just only for this anchor tag.
<a class="myUndecoratedLink" href="http://example.com" >testing</a>
Define below style either in a external CSS file or in your HTML.
.myUndecoratedLink,.myUndecoratedLink:HOVER {
text-decoration: none;
}
Try to define style in external file instead of inline styling as you are doing to make it more manageable.
In this way you can benefit of Themes be creating different CSS files one for each theme.
For more info have a look at below post:
The 3 ways to insert CSS into your web pages
CSS How To...
I am using jsonform (https://github.com/joshfire/jsonform) in order to generate forms from json schema, and the jsonform requires his own css for the form, but i am using another css for my site's template.
Is there a way to apply a css only on a specific tag ? for example only to the html inside ?
I am using rails, so the head is not changing from page to page.
thanks.
If you're using a CSS preprocessor (i.e. SASS, LESS, SCSS, etc.) then it might be an easy job to just indent your custom css under one class/id/tag. You can check this SO question: apply CSS style to particular elements dynamically.
Try this>>>
<link rel="stylesheet" type="text/css" href="theme1.css">
<link rel="stylesheet" type="text/css" href="theme2.css">
Inside theme 1 you would link to certain classes and in theme2 you would link to other classes. Please comment back if you need more help or this is not ideal
for example html
<div id="test" class="testing"></div>
the css would be
#test{color:red;}/*for ids*/
.testing{color:red}/*for classes*/
the styling in the curly brackets can be changed to what you want and the classes and ids can be in any external css if you link your page to it using link rel=
Yes you can. You need to give an ID to the body of your HTML doc if you want to target only that page, or give an ID or class to the element you need to.
<!-- HTML -->
<div class="your-class">
Your content
In the CSS:
.your-class {
your: style;
}
or
<!-- HTML -->
<body id="your-id-name">
<div class="generic-class">
Your content
/* using CSS */
body#your-id-name {
your: style;
}
body#your-id-name .generic-class {
your: style;
}
Hope it helps ;-)
Yes, offcourse there is, that's what CSS is all about.
If you add an ID or a class to the containing element that holds the form, you can add that ID or class to all the CSS selectors in the JSONform css.
for instance:
<div class="jsonform">
{json form goes here}
</div>
and then in your jsonform css, prepend '.jsonform' to all the necessary selectors:
.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}
I had a look at that jsonform css. I'm amazed that it just uses the complete Twitter bootstrap CSS, there's quite a lot of styling in there that will definitely override your own CSS. I would try to strip out anything that's not directly needed for the form, like body, img, p and h1 declarations.
Maybe the form works fine without the extra styling; you can then apply your own CSS to the form elements...
The CSS included with jsonform is Bootstrap, but the README.md in the /deps directory states that usage of this file is optional. As long as you don't include bootstrap.css in your HTML, you can style the form controls however you'd like/avoid Bootstrap overriding your own styles.
If you want to keep using Bootstrap for jsonform ONLY, you can try "namespacing" the Bootstrap styles using LESS or SASS. Have a look at the first two answers to 'How to namespace Twitter Bootstrap so styles don't conflict' for an idea how to do that with LESS.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.