I am currently developing an educational website and as part of it want to include web accessibility as a feature.
I am trying to include a color content changer like seen here http://www.handicap-international.org.uk/OneStopCMS/Core/SelectLayout.aspx? but I cant figure out how to get the page to call several css external style sheets so that the color of the content will change when the link is clicked?
Any help is appreciated.
you have two ways to include external CSS,
Using the <link> element, or
Using the #import rule.
Using the <link> element:
To make it a persistent stylesheet:
<link rel="stylesheet" type="text/css" href="somefile.css" media="screen">
To make it a preferred stylesheet, add the title attribute:
`<link rel="stylesheet" type="text/css" title="compact" href="somefile.css"` media="screen">
To make it an alternate stylesheet, add the word "alternate" to the rel attribute.
<link rel="alternate stylesheet" type="text/css" title="compact" href="somefile.css" media="screen">
Using an #import rule:
It is possible to include one stylesheet in another using #import. This must be done at the top of any CSS before any rules are declared.
Example (in somefile.css):
#charset UTF-8
#import "someotherfile.css"
This is also possible:
<head>
<style>#import "somefile.css"</style>
</head>
This should be enough to help you understand how to include multiple external style sheets.
Take care and good luck....!!!
I assume the example you posted uses only 1 style sheet that stores multiple css properties. Once you click the link it chooses the appropriate properties for that over arching theme from that single style sheet and disregards the rest.
Given that, why would you want multiple style sheets?
Please find the CSS for anchor tag as unvisited, visited, hover and active:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Related
I've created a table with some simple styling elements such as borders, colors, etc. When attempting to print this table, the print preview does not show any of my CSS. I've seen some answers suggesting it's a bootstrap.css issue but after attempting some of the fixes, it doesn't seem to make a difference. I have also made sure that the "background graphics" option is selected in the browser during print preview.
Is there a way to access the code or css of the print preview page as opposed to my actual code? Or is there another fix that I'm missing?
If it helps, I'm using leaflet and a print plugin, everything looks right except for the table. Thank you for taking the time to read or answer this, I've attached a photo of the table in print preview.
Screenshot of my table missing styling in print preview.
You can use
<link rel="stylesheet" media="print" href="print.css" />
to style the printing preview.
I see. print css and main css is difference.
So you style it in other ways.
for example:
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />
body {
margin: 2em;
color: #fff;
background-color: #000;
}
/* override styles when printing */
#media print {
body {
margin: 0;
color: #000;
background-color: #fff;
opacity:0.3;
}
}
Add missing bootstrap classes in your css file with #media print. Example:
#media print {
.table td {
background-color: #fff;
}
}
More about media print:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
I can't figure out a way to prevent a flash of unstyled content when fading in text which is supposed to be styled with a font from Google Fonts.
It looks like fonts.googleapis.com loads when the page loads, but it isn't until the text is supposed to fade in that fonts.gstatic.com will load, which leads to a brief and unsightly flash of text in Times New Roman or whatever the default font is before it is abruptly styled properly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<!-- Static CSS -->
<link rel='stylesheet' type='text/css' href="main.css"/>
</head>
<body>
<div>
<button id="startButton">Start</button>
</div>
<div id="textDiv">
<p id="textContents"></p>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!-- Static JavaScript -->
<script src="main.js"></script>
</body>
CSS
#textDiv {
font-size: 40px;
font-family: 'Quicksand';
}
Javascript
var textDiv = $('#textDiv');
var text = $('#textContents');
var button = $('#startButton');
// handle click and add text
button.bind("click", function() {
textDiv.hide();
text.html("<p>Hello</p>");
textDiv.fadeIn();
})
https://jsfiddle.net/eshapiro42/xmf23uqw/15/
Any help figuring out how to prevent this would be greatly appreciated!
You can preload fonts when you're referencing an actual font. What you're referencing here is a stylesheet that adds #font-face to your document with different variations of Quicksand.
The solution is to go to paste the stylesheet link in your browser and grab the direct link to the font, and then load it as a reference in your html document with this:
<link rel="preload" href="ttps://fonts.gstatic.com/s/quicksand/v15/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xDwxUD2GFw.woff" as="font" crossorigin>
Use the display=block request parameter when referencing the font from Google. Full URL for your example:
https://fonts.googleapis.com/css?family=Quicksand&display=block
This in turn will cause the Google stylesheet to use the font-display: block rule in its #font-face declaration. This rule will specify that you would rather that the text remain unrendered until the font is loaded, than render the text in a local font and re-render when the webfont is ready.
Source:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#customize_the_text_rendering_delay
https://css-tricks.com/google-fonts-and-font-display/
In the CSS, you could add display: none; and the in your JavaScript add
$(function() {
$('#textDiv').css('display', 'block');
});
HTML
<head>
<style type="text/css>
#import url("style.css") //my main css file
</style>
// css file which contains only color properties.
<link href="theme_blue.css" rel="stylesheet">
</head>
<body>
Click Here to switch color
</body>
CSS (theme_blue.css)
body
{
background-color:#66ccff;
}
JS
$(document).ready(function() {
$("#theme-blue").click(function() {
$("link").attr("href", "theme_blue.css");
return false;
});
});
My problem is, when I click the link, the entire structure of the web page is lost and no color changes happen. I am very new to this technology and need some help from experts. Kindly suggest me solutions to overcome this problem.
Your problem is with your jQuery selector. You are applying the attribute href to all link elements including your main css link. I suggest you give your link and id then update your selector:
html
<head>
<style type="text/css>
#import url("style.css") //my main css file
</style>
// css file which contains only color properties.
<link id="css_theme_blue" href="theme_blue.css" rel="stylesheet">
</head>
<body>
Click Here to switch color
</body>
jQuery
$(document).ready(function() {
$("#theme-blue").click(function() {
$("#css_theme_blue").attr("href", "theme_blue.css");
return false;
});
});
Might I offer another solution that I practice.
I have my style sheets but I change the body class to reflect what I want a particular element to look like.
body.blue_theme #element_1 {
background:blue;
}
body.green_theme #element_2 {
background: green;
}
then I swap out the body class when I want themes to change:
$('#blue-theme-button').on('click', function() {
$(body).removeClass('green_theme').addClass('blue_theme');
}
This method is preferable to me because all styles are loaded at the beginning and there won't be a pause on slower machine when a new stylesheet is loaded.
Lets say you have a two css files in /Content folder.
main-theme.css :
body {
background-color:#fff;
}
blue-theme.css :
body {
background-color: blue;
}
you have a page which uses by default main-theme.css and link element has id #siteTheme, also you have clickable element with id #blueTheme
<link id="siteTheme" href="/Content/main-theme.css" rel="stylesheet" type="text/css" />
Activate Blue Theme
all you need is to write function for #blueTheme click, which changes href attribute value of link element with id #siteTheme:
<script>
$(document).ready(function () {
$("#blueTheme").click(function () {
$("#siteTheme").attr("href","/Content/blue-theme.css");
});
})
</script>
i hope this will help ;) and don't forget to load jquery before writing those scripts.
<script src="/Scripts/jquery-1.10.2.min.js"></script>
I'm trying to put a print button on a web page that will print the page's contents except images. Any ideas?
You can use CSS to disable all images on your website only when printing.
#media print {
img {
display: none !important;
}
* {
background-image: none !important;
}
}
No need to use a button, unless you want to give people the option to print images or no images.
If you just want people to print without images (which is preferred most of the time), you can just use a print stylesheet.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Then add
img {display: none;}
You need a print style sheet. There are two options for that:
Reference a separate stylesheet with the following code:
<link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>
In that stylesheet, put the following:
img {
display: none;
}
Put the following in your main stylesheet:
#media print {
img {
display: none;
}
You could use a stylesheet for print media and make a rule like below..
img { visibility:hidden; }
...
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print">
You could also use display:none as the image rule but this will not preserve the spacing and could completely change the layout of the printed page.
I get a script from a website to put it into my website, but the font color is not what I want.
The script is:
<script language="javascript" src="http://www.parstools.net/calendar/?type=2"></script>
and now I want to change the font color of it. What should I do?
I would really appreciate your help, thanks.
Examining the source of that script, it is simply writing an anchor link with document.write():
document.write("<a href='http://www.ParsTools.com/'>1389/1/31</a>");
You may want to include that script inside a <div>, and then style the anchor links within that <div> using CSS:
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
Then you should also add the following CSS class definition:
div#calendar a {
color: red;
}
The following is a full example:
<!DOCTYPE html>
<html>
<head>
<title>Simple Demo</title>
<style type="text/css">
div#calendar a {
color: red;
}
</style>
</head>
<body>
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
</body>
</html>
I assume you want to change the font colour of the HTML code produced by the script? If so, just use normal CSS in your external stylesheet and it will apply to the added content.
For example, if you want to make the text inside the element myElement a nice blue colour:
#myElement {
font-color: #0099FF;
}
If the script is not your own, then you will want to analyse the code produced by it to work out which elements you need to style in order to change the colour of the text. Many external scripts that you embed in your website contain inline CSS rules, meaning that you will have to override many elements in your external CSS stylesheet to change simple things like text colour. You may also have to add !important to the end of your CSS rule in order to override the inline styling:
#myElement {
font-color: #0099FF !important;
}