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
Related
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>
Relatively new to LESS and trying out how nesting works. I have read the things on the less page.
HTML
<!DOCTYPE html>
<html>
<head class="Setup">
<link rel="stylesheet/less" type="text/css" href="../LESS/core.less"/>
</head>
<div class="Test">
<span id="Test1" class="Test2"></span>
</div>
</html>
LESS
.Test2 {
display: block;
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
}
but if I were to write it without the nesting it works
.Test2 {
display: block;
}
#Test1 {
.background1;
width: 40px;
height: 1000px !important;
}
.background is just {background: red;}. Is the concept just messed up in my head?
Nesting Issues and Mismatched Markup
Nesting generally indicates that a particular element will appear beneath another element, so your current code has the right idea.
Currently your nesting example would attempt to target an element with an id of "Test1" that was nested below an element with the class "Test2", which isn't the same as your markup.
If you wanted to use the same markup to target your element, consider changing your outermost .Test2 selector to .Test instead :
/* This will target an element with id "Test`" below an element with class "Test" */
.Test {
display: block;
#Test1 {
width: 40px;
height: 1000px !important;
}
}
You can see how this is translated to CSS below :
Background Check Your Syntax
Additionally, there appears to be an issue with your .background selector that you were using. Did you mean to target an additional style below your "Test2" element like the following example?
.Test {
display: block;
#Test1 {
.background{
width: 40px;
height: 1000px !important;
}
}
}
which would compile as follows :
In the HTML below, there are three <style> blocks. The second block is the unwanted one, which makes the image disappears when mouse hover. The first two blocks are un-editable. We have to use the third block to cancel out the effect of the second block. Given an example of the third block below, but that does NOT work.
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
a:hover {
background-image: inherit !important;
}
</style>
</head>
<body>
</body>
</html>
Thanks very much for you inputs.
Note that, (sorry, i didn't make it clear enough), this is just an example. In the real case, there are many <a> with the first block setting them to different images. Just Only One second block ruins them all. As there are many (unlimited in fact, as it is a dynamic page) <a>, it is impossible to handle them one by one. I wish to have only one third block, that can revert the effect of the evil second block. Thanks a lot.
write:
<style>
a:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
It's a typo: you have one extra } in your style, remove this.
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
it should like this:
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
And also provide background-image url because inherit just inherits from it's parent not previously defined.
I think I understand you now.
Each anchor has a different background image.
Some guy went and set that url to none on hover. (and you obviously have no access to the markup)
Now you want to return that url on hover.
Well, sorry, but as far as I know you can't do this in CSS.
CSS has no 'undo' in this context.
See this SO answer.
If this is the only block of anchor elements you could use nth-child to target the second one.
a:nth-child(2):hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
The anchor element in question must have a value for href so you could target that via the attribute selector
a[href="http://your-website"]:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
If you hover over the second element in the above fiddle, you'll see that hovering over it doesn't make it disappear.
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
.toggle-a:hover {
background-image: inherit !important;
}
.toggle-a a{
float: left !important;
}
.bg-hover{
background-image: inherit !important;
}
</style>
</head>
<body>
<div class="toggle-a">
<a class="overwrite" href="http://www.w3schools.com/"></a>
<div>
<script>
$(function(){
$('.overwrite').mouseover(function(){
$(this).addClass('bg-hover');
}).mouseout(function(){
$(this).removeClass('bg-hover');
});
});
</script>
</body>
I want an image to slightly grow in size when hovering over it. I know it's pretty simple, but I have looked for a good hour over other examples and cannot seem to figure out what I am missing. I appreciate the help. These images are saved to my computer.
Scope
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img style = "position:absolute; top:300px; right: 0px; z-index:1"
src="computer.jpg"/>
<IMG ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px;
WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/>
</body>
</html>
And here is the stylesheet.css
#grow:hover {
width: 100px;
height: 150px;
}
Inline styles have priority over CSS i believe.
Change your CSS and HTML to the following:
#grow {
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover {
width: 100px;
height: 150px;
}
HTML:
<IMG ID="grow" SRC="icon2.gif"/>
The inline style which declared in the HTML element has a higher priority than other css rules. So consider make your rules !important or move the inline style out.
Anyway, the !important rules are not recommended to use regularly. So you have better remove your inline styles and put them in .css files (or at least <style> element inside <head>)
Try this style
#grow:hover {
width: 100px !important;
height: 150px !important;
}
Because you have written inline styles. In order to override it you need to add !important to the styles. Also try to write the html in lowercase and avoid unwanted spaces.
The best thing you can do is avoid inline style and write style as below:
#grow
{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover
{
width: 100px;
height: 150px;
}
I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle