I've gotten this code to work propely,
<img src="forest.gif" class="magnify" border="0" />
but I do not want to add class="magnify" to each img. I want to make it part of my style sheet, and have it effect all images. Is that possible?
You'll have to use JavaScript if you want to add it at a time after the page is loaded.
In JQuery:
$(document).ready(function(){
$('img').each(function(){
$(this).addClass('magnify');
});
});
change
.magnify {
color: red
blabla...
}
to
img {
color: red
blabla...
}
that gives style to all images.
Try defining TAG specific style sheet definition. Define your own CSS class to override it on specific image tag when needed, you can even combine more than one CSS class.
img {
border: 0;
attribute1: 1abc;
.
.
.
attributeN: nABC;
}
Including example:
<style type="text/css">
img {
margin: 10px 10px 10px 10px;
border: 2px 2px 2px 2px
}
h1, h2, h3 {
font-size: 12pt;
}
</style>
Including additional example:
<style type="text/css">
img.magnify.magnifyEx {
border: 2px;
}
</style
Related
I have an aspx page with 3 Telerik RadGrids on it. On one of them I need to override the default styling which I have done with this code:
<style type="text/css">
.RadGrid .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
.rgAltRow, .rgRow {
cursor: pointer !important;
}
</style>
The problem is that this is applying the to all the radgrid controls. How could this code be changed to apply it to only the radgrid control called Radgrid1?
You should prefix the selectors with the grid's id
<style type="text/css">
#Radgrid1.RadGrid .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
#Radgrid1 .rgAltRow,
#Radgrid1 .rgRow {
cursor: pointer !important;
}
</style>
Depending on the resultant HTML you may need to change the first selector to #Radgrid1 .RadGrid .rgHoveredRow notice the extra space
"radgrid control called Radgrid1" you mean it's its name? if so -
.RadGrid[name=Radgrid1] .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
Presentation
I'm trying to build a web site available in multiple cultures, with different reading direction.
To do so, I simply add the dir="rtl" attribute on my root HTML element.
My issue is that I have some CSS rules that are specific to one direction or the other (margins or paddings, most of the times).
Unsuccessful try with attribute selector
I though that I could simply use the attribute selector but the dir attribute is only set on the root element, so this wouldn't work :
selector {
&[dir="ltr"] {
// LTR specific
}
&[dir="rtl"] {
// RTL specific
}
}
For instance, on this demo, the title should have a margin of 5px on the right if the application is in rtl or on the left if it's in standard ltr.
Other idea
I've noticed that the direction is rightfully set at rtl, is there a way to use that rule within a CSS or Sass selector ?
Edit and precisions
It seems that I've forgotten an important point. I'm building the web site using Vue.js, the dir attribute is bind in the main component (App) and the RTL/LTR specific CSS rules can be in the same component or in other self-contained component.
Following your css code you could do this with SASS at-root directive DEMO. So this:
#app {
width: 300px;
height: 100px;
border: 1px solid red;
h1 {
#at-root {
[dir="rtl"]#{&} {color: green}
}
#at-root {
[dir="ltr"]#{&} {color: red}
}
}
}
It will compile to this css.
#app {
width: 300px;
height: 100px;
border: 1px solid red;
}
[dir="rtl"]#app h1 {
color: green;
}
[dir="ltr"]#app h1 {
color: red;
}
You could style everything LTR, and only adjust some elements styling for RTL. Might this work for you?
[dir="rtl"] {
&selector {
// RTL specific
}
&selectorN {
// RTL specific
}
}
Use below scss to get expected output
#app {
width: 300px;
height: 300px;
background: red;
&[dir="ltr"] h1{
margin-left: 10px;
}
&[dir="rtl"] h1 {
margin-right: 10px;
}
}
Probably you are going a little in the wrong direction.
Most of the time, you can achieve this automatically, no need for specific selectors.
Margin, for instance:
Just set it both for left and right margin. The browser will choose the correct one for you
#app {
width: 300px;
background: tomato;
margin: 10px;
}
h1 {
margin-left: 15px;
margin-right: 5px;
}
<div id="app" dir="ltr">
<h1>
margin left 15
</h1>
</div><div id="app" dir="rtl">
<h1>
margin right 5
</h1>
</div>
I have this element:
<span class="input" tabindex="1">€<input type="text"></span>
With this CSS:
.input {
background: #FFF;
padding: 5px 10px;
}
.input input {
border: 0;
background: #FFF;
padding-left: 5px;
}
.input input:focus {
outline: none;
}
.input:focus {
outline: 1px solid yellow;
}
My problem is that if I click on the border of the element or on the € symbol, the element is outlined, but if I click inside the input box, the element is not outlined.
There is a CSS-only way to fix this problem?
PS:
If I wanted a JS solution I would used this as I'm doing at the moment:
$(".input input").focus(
function() {
$(this).parent().addClass("focus");
}).blur( function() {
$(this).parent().removeClass("focus");
}
);
But I'm looking for a pure-css solution.
As far as I know it is not possible with plain CSS. What you want is a "parent" selector, which doesn't exist in CSS2 or CSS3. According to this answer there is a possibility to define a subject in the CSS4 specs, until these are available in all (major) browsers you will have to use JavaScript.
A jQuery way to do it could look like this:
$('.input input').focus(
function() {
$(this).parent().css("outline", "1px solid yellow");
}).blur(
function() {
$(this).parent().css("outline", "none");
}
);
jsFiddle
i need to know what the proper term for this code is. someone sent this to me and it was what ii was looking for, but i need the proper term so i can learn it myself. what i'm looking for is the multiple colors on a webpage.
<!doctype html>
<html>
<head>
<title>I am Awesome!</title>
<style type="text/css">
body, #nav, #header, .white-box, .blue-box {
width: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
h1{
margin: 0;
padding: 150px 0;
}
#nav
{
height: 60px;
color: #fff;
position: fixed;
background: darkblue;
}
#header {
background: red;
text-align: center;
}
#header, .white-box, .blue-box {
height: 400px;
}
.white-box {
background: #ccc;
}
.blue-box {
background: lightblue;
}
</style>
</head>
<body>
<div id='nav'>Navigation</div>
<div id='header'>
<h1>Some Cool Image!</h1>
</div>
<div class='white-box'>Content!</div>
<div class='blue-box'>More Content!</div>
<div class='white-box'>And Something Else!</div>
<div class='blue-box'>Redundancy!</div>
</body>
</html>
There is no proper term for having multi-colors on a web page. You have a simple css code defining various classes with various colors for different parts of your site. So be easy, Not every thing needs to have a name. If its still confusing, let me know in commnents
The proper term for this is Cascading Style Sheets, also known as CSS. CSS is used to style an HTML document and make it look fancier and do formatting changes that HTML cannot do (i.e change the color of the text or change the font size)
CSS can be edited in programs such as JSfiddle.
To insert CSS into an HTML document, the tag can be used or you can reference the CSS stylesheet using href.
CSS can be applied to 3 different things:
By element type (i.e. p{}
By ID: #main{} OR
By class: .button{}
The CSS code is put inbetween the curly braces.
For example, to change the color of element p to blue I would use
p {
color:blue;
}
It's Cascading Style Sheets, otherwise known as CSS. There are a few different ways to apply the styles:
By element type: body { ... }
By ID: #nav { ... }
By class: .white-box { ... }
You can read more about it online; one example is here: http://w3schools.com/css/css_syntax.asp
Is it possible to give a whole set of styles supreme importance?
Ie, early on you might have the following default css:
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
and inside it has
body {
background: #000;
}
h1 {
color: #fff;
}
But then(!) you decide to make things exciting and have some more css inside the tag that is the same but different:
<style type="text/css">
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
For whatever reason, the styles inside style.css that are linked in take importance over the ones I'm putting in statically.
What I'd like to know is, is there a way of umbrella'ing a whole bunch of styles so they take the highest importance? The best I know is
<style type="text/css">
body {
background: #fff !important;
}
h1 {
color: #000 !important;
}
</style>
Which starts to get a bit tedious if there are many styles.
add a single class to body, ie body class="stylecatcher" or whatever
then you can style (and override default styles) easily
<style type="text/css">
body.stylecatcher {
background: #fff;
}
.stylecatcher h1 {
color: #000;
}
</style>
I didn't find it to be a good practise to use the !important selector.
What you need is called specificity. From the w3 here and here and adobe link
Typically in CSS if you add a selector that is the same further down in the document, the one closest to the end (the highest line number) will be taken into effect.
<style type="text/css">
body {
background: #000;
}
h1 {
color: #fff;
}
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
The background would be white and the font color black.