*Good Website for html/css for beginners

w3school
*How to change the color of the scroll bar

html {scrollbar-face-color: #8AB200;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color:#53670D;
scrollbar-darkshadow-color: #53670D;
scrollbar-track-color: #D4E597;
scrollbar-arrow-color: #53670D;}


*How to add background color

body {
background-color : #ffffff;
}




*How to add background image


If you want to dress up your Web page, you might want to do more than just change the background color. You can use an image as a repeating background image. Or, using CSS, create a watermark like effect. Using standard HTML, you can define a background image like this:

<body background="/library/graphics/bg-grid.gif">

As with the bgcolor attribute, the background attribute is deprecated in HTML 4.0 and XHTML. But again, it is easy to use CSS to add background images to your Web pages. For example:

body {
background-image : url(../graphics/bg-grid.gif)
}




*Open a link in a new window to a specified size

In this example, the link is a file called yourlink.html and it will open in a window that is 300 wide by 200 tall.
You can change other attributes too.
This example will have a toolbar, no status bar on the bottom, can't be resized and will allow scrollbars.
If you do not add anything it will just open up the new window that is the same size as normal window that you are using.

<a href="yourlink.html" target="_blank" onclick="window.open('yourlink.html','name','height=200, width=300,toolbar=yes,directories=no,status=no, menubar=no,scrollbars=yes,resizable=no'); return false;" >Your Link</a>


* The above coding did not work when I tried to link to a Processing file. Also, it might not work for all browsers but this next bit of code seem to work best for me when I wanted to make my rollover open up to another link in a specific window size:


<a href="#" class="yourclassname" onclick="window.open('yourlink','newWin','width=275,height=275')"></a>

The bolded text are ones that you can change to your preference.


*Just a little note that if anyone ever get ugly purple outline around their

pictures, you can put this rule in your CSS page


a img{
border-style: none;
}


Another way to get rid of the blue underline on your links:

This is done using HTML rather than CSS.


under <head> put the following:

<style type="text/css">
<!--
a {text-decoration: none;}
-->
</style>





*Bring to Front


In the case where you are not using div tags (ie. a href links), but need the image/link to appear above, use z-index.
The range indicates position (100 being most front, and 0 being most back).

eg:
a.example
{
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 200px;
z-index: 100;
background: url(images/example.png);
}





*Centering a Div


In your css file:
margin: 0 auto;

Note: Why style all your divs to center when you can style one? If you have multiple divs, select the divs you want centered and place them in a single div.

eg:
<body>
<div class="single_div">
<div class="div_1">Blah...</div>
<div class="div_2">Blah...</div>
<div class="div_3">Blah...</div>
</div>
</body>






*Hover Link


<style type="text/css">
a:link {text-decoration: none; color: #ffc7ed;}
a:visited {text-decoration: none; color: #ffc7ed;}
a:active {text-decoration: none; color: #ffc7ed;}
a:hover {text-decoration: none; color: #ffffff;}
</style>
(change the colors and text decoration according to what you wish to achieve. Place the code in HTML)





*Image Rollover


a. switch {
position: absolute;
top: 100px;
left: 200 px;
width: 100px;
height: 50px;
background: url (images/type_up.jpg);
}

a. switch: hover {
background: url (images/type_down.jpg);
}

(change the pixel size of the image according to your desired number and the file name of the image. Place the code in CSS)


Rollover with transparency

a. switch: hover{
background: url(images/type_down.jpg);
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}

- if you want to create a transparency on your rollover, 100% opacity is equal to 1 in CSS, therefore in this example the opacity is set to 40%
- "-moz-opacity" is used so it will work in Mozilla Firefox


*A rollover with new image on mouse pressed*

.img{
position: absolute;
height: 100px;
width: 100px;
top: 100px;
left: 100px;
background-image: url(insert your image here);
}

.img:hover{
position: absolute;
height: 100px;
width: 100px;
top: 100px;
left: 100px;
background-image: url(insert your image here);
}

.img:active,.img:focus{
position: absolute;
left: 200px;
top: 100px;
width: 100px;
height: 100px;
background-image: url(insert your image here);
z-index: 100;
}

Along with the regular hover image you can allow an image to appear (on hit) when clicking on another image. (can use :active and :focus on their own or together depending on what you're trying to do; can also use :hover and :active together)
'active' allows a link to become active when clicked
'focus' accepts keyboard events and other inputs





*To Rotate Texts or Images


-webkit-transform: rotate(Xdeg);
-moz-transform: rotate(Xdeg);


(X= the number of the degree you want.
ex:
webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);

that would be rotating the image by 45 degree)

plug the code in your "CSS styles"




*TO ROTATE TEXT PUT IN THIS CODE

-ariel chaput boloten

-webkit-transform: rotate(___deg);





Horizontal Drop Down Menu
Example


ul { (defines font related specifications in menu)
font-family: Helvetica;
font-size: 15px;
margin: 0;
padding: 0;
list-style: none;
color: #5B5A5C;
}

ul li {
display: block;
position: relative;
float: left;
}

li ul {
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #5B5A5C;
padding: 5px 15px;
margin-left: 1px;
white-space: nowrap;
}

ul li a:hover {
background: #EF5828; (colour of menu)
}

li:hover ul {
display: block;
position: absolute;
}

li:hover li { (defines fonts in the drop down)
float: none;
font-size: 11px;
}

li:hover a {
background: #EF5828; (colour of drop down)
}

li:hover li a:hover {
background: #EF7460; (colour of box in drop down on rollover)
}


in html <body> ...


<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="">insert page name</a>
<ul>
<li><a href="#">insert drop down page name</a></li>
<li><a href="#">insert drop down page name</a></li>
<li><a href="#">insert drop down page name</a></li>
</ul>
</li>
<li><a href="">insert page name</a>
<ul>
<li><a href="#">insert drop down page name</a></li>
<li><a href="#">insert drop down page name</a></li>
<li><a href="#">insert drop down page name</a></li>
</ul>
</li>
<li><a href="#">insert page name</a></li>
<li><a href="#">insert page name</a></li>
</ul>




*To Centre Your Page in a Browser Window



  • you will need to add a CSS class to you HTML page or preferably, external CSS file .centered { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 60%; margin: auto; }

  • in your HTML file, just under the <body> create a new <div> tag that will encompass all your code.<div class="centered">

  • just under the closing </body> close the div you just made </div> height: 50%;

  • NOTE: you can change the percent % value to move your layout within the browser window

  • you can also centre your layout vertically, adding space above and below your layout within the browser window. Simply add this line to your centered class


Vertical Centering Text with Line-Height

If you want to vertically center text within a containing block who’s height is fixed, simply set the line-height of the text to be the same as the height of the containing block
The HTML:
<div id="container">some text here</div>
<span style="display: none;">some text here
 
</span>
The CSS:
  1. div#container {height: 35px; line-height: 35px}
<span style="display: none;">div#container {height: 35px; line-height: 35px}
</span>



==

How to do border-radius

#example1 {
border-radius: 15px;
}
==


==

how to create a basic speech bubble with a few enhancements.


external image 0902244.jpg


/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}


How to do a pop up window without open another window

Chick hereto see how it look

The CSS

#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;

The Javascript File Click Here To Download the CSSPopUp.js file.

toggle(div_id) – This simply toggles the inserted div name from being displayed (display:block) to being hidden (display:none).
  • blanket_size(popUpDivVar) – This resizes the blanket to fit the height of the page because there is not height=100% attribute. This also centers the popUp vertically.
  • window_pos(popUpDivVar) – This centers the popUp vertically.
  • popup(windowname) – This function contains the other three to make life simple in the HTML file.

The HTML

<div id=”blanket” style=”display:none;”></div>
<div id=”popUpDiv” style=”display:none;”>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Me To Close</a>
</div>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Here To Open The Pop Up</a>


How to do CSS large background image:

Web designer wall

This blog teaches you how to apply a large background image in your web design step by step. Please see the link below.
http://webdesignerwall.com/tutorials/how-to-css-large-background


Fade in fade out animation

<html>

<head>
<title>final website</title>
<style type=”text/css”>
Body{
Background:#000000
}
Img{filter:BlendTrans(duration=3);
Border:none;
</style>
</head>
<body>
<script language=”javascript”>
Function img1(x){
This. Length=x;}
iname=new imgl(5)
iname[0]=”photo/01.jpg”;
iname[1]=”photo/02.jpg”;
iname[2]=”photo/03.jpg”;
iname[3]=”photo/04.jpg”;
iname[4]=”photo/05.jpg”;
war i=0;
function play1(){
if(i==4){i=0;}
else{i++;}
tp1.filters[0].apply();
ty1.src=iname[i];
tp1.filters[0].apply();
mytimeout=setTimeout(“play1()”,4000);
</scrip>
<p><img src=”photo/04.jpg”name=”tp1”></p>
<script language=”javascript”>play1();</scrip>
</body>
</html>





*I-FRAME (How to frame another page on a page)



Want to show another page on the same page (within a frame)?
Here is a link that can help generate a code to your preference; super easy to use!


http://www.htmlbasix.com/iframe.shtml



*jQuery



An easy way to explore some interesting interactive functions on your website by plugging in your own preferences into already-made code!



Here are some more examples: 50+ Amazing Jquery Examples- Part1