i have html code
<pre>
line 1
line 2
line 3
</pre>
how can i put some css style to the "lines" inside <pre>, without adding other wrapper into it?
what i mean is something like
pre lines{ color: red}
i'm having difficulties on finding the css selector for that. Thanks in advance.
You can use this little CSS3 trick, with gradients. This will create automatically, without extra spans, a "zebra" effect:
background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image: -moz-linear-gradient(#555 50%, #505050 50%);
background-image: -ms-linear-gradient(#555 50%, #505050 50%);
background-image: -o-linear-gradient(#555 50%, #505050 50%);
background-image: linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;
Try different CSS "line-height" so that the text appears correctly.
see: http://www.dte.web.id/2012/03/css-only-zebra-striped-pre-tag.html#.UUoV6lugkoM
If you want add color to all lines in pre, just add
pre {color: red;}
But if you want to add color to some lines, you need extra markup:
<pre>
<span>Line1</span>
line2
<span>Line3</span>
</pre>
pre span {color: red;}
Related
So i am tasked with creating a <span> element with the background that does not cover the entire text. Like this: It should stop about halfway up the text. Is there any way to do this?
I have investigated using :after pseudo element to no luck, and wondering if this is possible with css. I am fairly limited on wrapping the span in another element but let me know if this is the solve
CSS
span {
#include blog-styles;
background-color: $yellow;
}
NOTE: The span will be multiline
Try This.
span {
background: linear-gradient(180deg, #ffffff 50%, #ffff00 50%);
}
<span>Hello<br>Hi</span>
maybe like this?
span {
background: linear-gradient(180deg, yellow 50%, #fff 50%);
}
https://jsfiddle.net/3f5b48xy/
try with this
span {
height: 100px;
background: yellow; /* For browsers that do not support gradients */
background: linear-gradient(180deg, #fff 50%, yellow 50%); /* Standard syntax (must be last) */
}
I'm trying to give an icon a gradient background. How can I do that?
I tried putting the ion-icon into a ion-chip, like this:
<ion-chip class="my-chip">
<ion-icon name="basket></ion-icon>
</ion-chip
And then in the .css file:
.my-chip{
color: linear-gradient( 0deg, #color1 0%, #color2 100%) !important;
}
But this didn't work. Color one and color two are obviously given in hex code.
You should use background-image
In your .css file,
.my-chip{
background-image: linear-gradient( 0deg, #color1 0%, #color2 100%) !important;
}
I have a pre element with the following styles:
pre {
background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image: -moz-linear-gradient(#555 50%, #505050 50%);
background-image: -ms-linear-gradient(#555 50%, #505050 50%);
background-image: -o-linear-gradient(#555 50%, #505050 50%);
background-image: linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;
color: #fff;
font-size: .8em;
line-height: 2.25;
margin: 0 -2.25em 2.25em;
overflow: auto;
padding: 2.25em;
}
Why, when scrolling the pre element, is the right padding being ignored? I don't want long lines to wrap, I want this behavior (it is not expected behaviour based on the specification, but seems to work in webkit): http://jsfiddle.net/joshnh/Ly5kz/
Here is a link to a live example: http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/#step1
That's not quite how padding works. If your content is being forced past the edge of the box it will continue on without being covered by the background. Padding is room around the inner section of the box. All text that fits in the box will have x amount of space between it and the box edge.
In order to have a padding-like matte/box/border you'll need to have a wrapper div that has the border and padding and add your other styles to the pre.
http://jsfiddle.net/ktJ3g/
pre elements are white-space:nowrap by default, you need to set some sort of wrap attribute. Here are your options: http://www.w3schools.com/cssref/pr_text_white-space.asp
Try white-space: pre-wrap; - Also, I think your kind of abusing the lang attribute by using it to identify the content as containing html or css. I believe it should be used to indicate the language encoding of the content, i.e. en_US, fr_FR, etc
A note for prism.js-based <pre> elements:
You can use the normalize-whitespace plugin:
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
https://prismjs.com/plugins/normalize-whitespace/
https://github.com/PrismJS/prism/tree/master/plugins
I am in the process of learning HTML.
What is the best way to create a gradient background for an HTML page?
So far this is what I have as a background:
body style="background-color:Powderblue"
I know this is not a gradient.
This cannot be done in html but it can in css (specifically css3).
You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.
Here is a simple example on a div: http://jsfiddle.net/8fDte/
You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="PathToCss.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="MyGradientClass">
</BODY>
</HTML>
CSS
This code can be generated by a css gradient generator like the one linked above.
.MyGradientClass
{
height:200px;
background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(113,61,62)),
color-stop(0.63, rgb(147,92,93)),
color-stop(0.82, rgb(177,120,121))
);
}
Edit:
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.
It's not possible to make a gradient with HTML alone. There are new features in CSS3 which allow you to create a gradient, however these are not fully supported by all browsers.
If you'd like to read some more about CSS3 gradients, read this article
There is also a handy online tool which will create the CSS code to create a gradient of your specification, here.
Styling in external sheets is a much easier, faster and more efficient way to style your web pages especially if you have several pages that link to your style sheet(s). This allows you to change the entire styling of all of your pages at the same time with one line of code. It is ok however if you have a single page that you have up or if you need a simple page to look different by itself, inline styling is sufficient but not common. See below for quick example.
(inline styling for each page)
<!doctype html>
<html>
<head>
<title>THIS WOULD GET AGGRAVATING IF DONE ON 10 PAGES!</title>
<style="text/css">
body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
h1 {text-align: center, font-weight: bolder;}
p {text-indent: 20px; line-height: 25px;}
</style>
</head>
<body>
</body>
</html>
....or it would b like this
<!doctype html>
<!doctype html>
<html>
<head>
<title>THIS CHANGES SAME PARAMETERS ON 100 PAGES WITH SAME LINK INSTANTLY!</title>
<link rel="stylesheet" href="/cssfolder/yourcssheet.css" />
</head>
<body>
</body>
and your "yourcssheet.css" style sheet would look like this
/*BEGINNING OF STYLESHEET, NO OTHER CODING NECESSARY BUT SOME MIGHT PUT #meta charset utf-8 AT THE TOP BUT IS NOT NEEDED TO FUNCTION*/
body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
h1 {text-align: center, font-weight: bolder;}
p {text-indent: 20px; line-height: 25px;}
/*END OF STYLESHEET*/
Now instead of going through every style on each individual page head, you can simply change it all with a simple external sheet all linked together by the following.
Hope this helps. jhawk2k14#gmail.com
Use this http://www.colorzilla.com/gradient-editor/
CSS should be applied in a separate stylesheet... never apply styling inline.
There are many online tools that create Gradients. Either you can use them or you can create your own
Simply check here: http://www.cssmatic.com/gradient-generator
Also you can create your own by this way
CSS
background-image: -webkit-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -moz-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -ms-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -o-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
I have a general rule which gives all DIVs a background image.
I have one div (with id='a') which I don't want it to have the background image.
What css rule do I have to give it?
Try:
div#a {
background-image:none
}
div#a {
background-image: none;
}
div#a {
background-image: none !important;
}
Although the "!important" might not be necessary, because "div#a" has a higher specificity than just "div".
div#a {
background-image: url('../images/spacer.png');
background-image: none !important;
}
I use a transparent spacer image in addition to the rule to remove the background image because IE6 seems to ignore the background-image: none even though it is marked !important.
Since in css3 one might set multiple background images setting "none" will only create a new layer and hide nothing.
http://www.css3.info/preview/multiple-backgrounds/
http://www.w3.org/TR/css3-background/#backgrounds
I have not found a solution yet...
When background-image: none !important; have no effect.
You can use:
background-size: 0 !important;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center top, #fff 0%, #fff 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #fff 50%);
for older browsers.. if you have defined css in some framewokrk.css like select2.css in IE9 background-image: -webkit-gradient etc. and you want it via another .css rewrite with "background-image: none !important" not works. I used same color to color gradient like page background color.
If your div rule is just div {...}, then #a {...} will be sufficient. If it is more complicated, you need a "more specific" selector, as defined by the CSS specification on specificity. (#a being more specific than div is just single aspect in the algorithm.)
HTML :
<div id="a" class="mydiv"></div>
CSS:
div#a {
background-image:none;
}
Another Way:
div:not(#a) {
//all rules goes here
//add image here
//div with id a not effected by these rules
}
Multiple (not pseudo)
div:not(#a):not(#b):not(#c) {
//all rules goes here
//add image here
//div with ids not effected with these rules
}
Doesn't this work:
.clear-background{
background-image: none;
}
Might have problems on older browsers...
Replace the rule you have with the following:
div:not(#a) { // add your bg image here //}