------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#Div1{
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
#Div1:hover #Div2 {
display: block;
}
#Div1 img {
width: 100%;
height: auto;
}
#desc {
padding: 15px;
text-align: center;
}
<!-- DIV AND DIV2 HAS SAME CODE -->
#Div2{
<!-- margin: 5px; DISABLE MARGIN CODE-->
border: 1px solid #ccc;
float: left;
width: 180px;
}
#Div2{
display:none;
}
</style>
</head>
<body>
<div id="Div1">
<a target="_blank" href="img_5terre.jpg">
<img src="https://www.w3schools.com/css/5terre.jpg" alt="5Terre" width="600" height="400">
</a>
<div id="desc">Add a description of the image here</div>
<div id="Div2">
<a target="_blank" href="img_forest.jpg">
<img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div id="desc">Add a description of the image here</div>
</div>
</div> <!-- WRITE DIV2 HTML CODE UNDER DIV1
-->
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
BUTTON SHOW HIDDEN DIV AND MAKE DROPDOWN MENU
1)HIDDEN DIV CSS CODE
2)BUTTON HOVER SHOW HIDDEN DIV
3)HTML DIV CODE WRITE INTO BUTTON OR WRITE THIS HTML
<div id="SecondMakeShowingInvisibleDivButton">START
<div id="FirstMakeInvisibleDivWithCssHavingLiTag">
<li>Coffee<li>Tea<li>Milk
</li></li></li></div></div>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type='text/javascript' src="style.js"></script>
<style type='text/css'>
/* ADD CSS COMMENTS */
body{border:5px solid black; font-size:13px}
</style>
<script type='text/javascript'>
//<![CDATA[
//]]>
</script>
</head>
<body>
<!-- ADD HTML COMMENT-->
<a href="http://fbgadgets.blogspot.com" style=" border: solid; padding: 10px; display: inline-block; "> LINK 1</a>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
<style>
#FirstMakeInvisibleDivWithCssHavingLiTag{
display:none; /* or use opacity: 0; */
list-style-type:none; //LI BULLET SHOW NONE//
}
#SecondMakeShowingInvisibleDivButton:hover #FirstMakeInvisibleDivWithCssHavingLiTag{
display:block; /* or use opacity: 100; */
}
</style>
<div id="SecondMakeShowingInvisibleDivButton">START
<div id="FirstMakeInvisibleDivWithCssHavingLiTag">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</div>
</div>
-----------------------------------------------------------------------------------------------------------------
<style>
div{
display:none;
}
button:hover div{
display: block;
}
</style>
<button>BUTTON
<div>BUTTON1</div>
<div
onclick="location.href='http://fbgadgets.blogspot.com/'">FBGadgets</div>
</button>
-----------------------------------------------------------------------------------------------------------------
<style>
div{
display:none;
position:absolute;
border: 2px solid Red;
min-width: 160px;
background-color:Yellow;
z-index: 1;
}
button:hover div{
display: block;
}
</style>
<button:hover div{CSS CODE😊><button>BUTTON
<div{CSS CODE😊><div>BUTTON1
<div onclick="location.href='http://fbgadgets.blogspot.com/'">FBGadgets</div>
</div>
</button>
---------------------------------------------------------------------------
DIV RELATIVE AND DIV ABSOLUTE AND DROPDOWN MENU
---------------------------------------------------------------------------
<style>
.RELATIVE{
display:inline-block;
}
.ABSOLUTE {
display:none;
position:absolute;
background-color:#f9f9f9;
min-width:160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
padding:12px 16px;
z-index:1;
}
.RELATIVE:hover .ABSOLUTE{
display:block;
position:relative;
}
</style>
<div class="RELATIVE">RELATIVE
<div class="ABSOLUTE">ABSOLUTE1</div>
<div class="ABSOLUTE">ABSOLUTE2</div>
</div>
----------------------------------------------------------------------------------------------------------------------------------------
CSS INLINE CODE
---------------------------------------------------------------------------------------------------------------------------------------
<textarea rows="4" cols="50" style="color:red;background-image:
url(https://www.w3schools.com/tags/smiley.gif);
background-repeat:x-repeat;background-color:Almond;">
At
w3schools.com you will learn how to make a website.
</textarea>
---------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
<style>
a,p{
background-color:#4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
div{
display: none;
position: absolute;
background: lightblue url("https://www.w3schools.com/cssref/img_tree.gif")center;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
button:hover div{
display: block;
}
</style>
<button>BUTTON
<div>
<p>Hello World!</p>
<a href="https://www.w3schools.com">FbGadgets</a>
</br>
</br>
<p>Hello World!</p>
<a href="https://www.w3schools.com">FbGadgets</a>
</div>
</button>
-----------------------------------------------------------------------------------------------------------------
HOW TO MAKE DROP DOWN MENU BY TWO DIV
MAKE INVISIBLE DIV 2 CSS PART BUT DIV2 HTML PART UNDER DIV1
MAKE INVISBLE DIV2 BY DIV1
http://smashinghub.com/25-free-dropdown-menus-in-html5-and-css3.htm
-----------------------------------------------------------------------------------------------------------------
CODE:
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#Div2{
background-color: Green;
color: White;
/* DIV AND DIV2
SAME CODE BUT THIS BLUE DIFFRENT PART */
width:auto;
line-height:35px;
border: 2px solid Red;
list-style-type: none;
text-align: center;
}
#Div2{
display:none;
}
#Div1{
background-color:Yellow;
height:20px;
width:130px;
border: 2px solid Red;
list-style-type: none;
text-align: center;
}
/* #Div2
USE NUMBER "# " SIGN IN CSS CODE BECAUSE ITS ID */
#Div1:hover #Div2 {
display:
block;
}
</style>
<!-- /*
* STEP:1 MAKE INVISIBLE DIV DROPDOWN CONTENT PART
#Div2
* STEP:2 MAKE VISIBLE DIV DROPDOWN CONTENT PART
#Div2 BY #Div1
* STEP:3 WRITE INVISIBLE DIV DROPDOWN CONTENT PART
#Div2 UNDER #Div1
* STEP:4 DIV1 & DIV 2 USE NUMBER "# " SIGN IN CSS CODE
BECAUSE BOTH DIV USE IDS
* STEP 5 #Div2 USE NUMBER "# " SIGN IN
CSS CODE BECAUSE ITS ID
*/ -->
</head>
<html>
<body>
<div id="Div1">BUTTON
<div id="Div2"> BUTTON</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
IMAGE CHANGE INTO BUTTON
A TAG LINK ON IMAGE TAG
-------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>IMAGE CHANGE INTO BUTTON </title>
<style>
</style>
</head>
<body>
<a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image">
<img border="0" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100">
</a>
</body>
</html>
---------------------------------------------------------------------------------
SOME DIV TAG WITH STYLE CODE HIDDEN IMAGES IN SHOPIFY DEBUT THEME
LINE 717
---------------------------------------------------------------------------------
<div
id="FeaturedImageZoom-product-template-11008677118045"
style="padding-top:126.6666667%;"
class="product-single__photo product-single__photo--has-thumbnails"
data-image-id="11008677118045"
>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"
</div>
---------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
A TAG LINK ON BUTTON TAG
-------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>LINK CHANGE INTO BUTTON </title>
<style>
</style>
</head>
<body>
<a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image">
<button>CLICK ME</button>
</a>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------
ONE CLICK DROP DOWN MENU
1) CHANGE HOVER WORD INTO FOCUS IN CSS CODE
2) ADD TAB INDEX CODE EQUAL TO ZEO IN HTML CODE
http://www.script-tutorials.com/demos/133/index.html
http://koen.kivits.com/articles/pure-css-menu/
--------------------------------------------------------------------------
<style>
button{
height:30px;
width:130px;
display: block;
}
button{
display: none;
}
#YELLOW{
background-color:yellow;
height:20px;
width:130px;
border: 2px solid red;
list-style-type: none;
text-align: center;
}
<!-- /*REPALCE HOVER WORD WITH FOCUS */ -->
#YELLOW:focus button{
display: block;
}
</style>
<!--USE
TAB INDEX = 0 IN DIV TAG -->
<div tabindex="0" id="YELLOW"> HOME
<button>BUTTON</button>
<button>BUTTON</button>
</div>
-----------------------------------------------------------------------------------------------------------------
CODE:
CSS CODE INLINE:
http://fbgadgets.blogspot.co.uk/2016/10/css-inliner.html
http://fbgadgets.blogspot.co.uk/2016/09/inline-html-page-layout.html
PADDING BUTTON
http://fbgadgets.blogspot.co.uk/2016/10/padding-button.html
-----------------------------------------------------------------------------------------------------------------
<font size="6">Type some HTML here:</font></b></p>
<FORM name="K">
<P style="margin-top: 0; margin-bottom: 0">
<TEXTAREA NAME="ta1" rows="15" cols="50">
<!-- /*
* AFTER TEXT AREA TAG PASTE HTML CODE
*
*/ -->
<html>
<head>
</head>
<body>
<div id="Div1"
style="
background:Green;height: 100px;
width: 100px;border: 5px solid black;
border-color: red"
>
</div>
</html>
</TEXTAREA>
</FORM>
<BUTTON TYPE="button" NAME="test5" ONCLICK="r=window.open();r.document.write(document.forms.K.ta1.value)">
Generate Page
</BUTTON>
</p>
-----------------------------------------------------------------------------------------------------------------
FB GADGET BUTTON WITH LINK CODE
GOOGLE CHROME DOWNLOAD 48 VERSION
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
FbGadgets{
border-radius: 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 14px 7px 14px 7px;
width: 210px;
max-width: 210px;
font-family: "Open
Sans","Helvetica Neue",Arial;
margin: 0;
display: block;
background-color: #007ee6;
text-align: center;
}
</style>
</head>
<body>
<FbGadgets
onclick="window.location.href='https://www.dropbox.com/s/pz8trpmeewgbpiu/Chrome32_48.0.2564.97.exe?dl=0'"> DOWNLOAD
</FbGadgets>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
-----------------------------------------------------------------------------------------------------------------
<style type="text/css">
button,a{
text-decoration: none;
}
</style>
<button>
<a href='http://fbgadgets.blogspot.co.uk'>FbGadgets</a>
</button>
-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
CODE DIV WITH NUMBER
DIV NUMBER USE ENGLISH ALAPHABET LETTER LIKE A,B,C
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#Div1{
background-color: Yellow;
}
.Div1{
background-color: Red;
}
</style>
</head>
<body>
<div id="Div1"> #Div1{ = id="Div1" </div>
<div class="Div1"> .Div1{ = class="Div1" </div>
</body>
</html>
-------------------------------------------------------------------------
CODE WITH DIV ID
--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
/* BUTTON CODE NOT USE AS ID OR CLASS */
/* MAKE BUTTON AND MAKE BUTTON INVISIBLE */
button{
background-color:LimeGreen;
height:30px;
width:130px;
border: 2px solid red;
display: block;
}
button{
display:none;
}
/* DIV CODE NOT USE AS ID OR CLASS */
#yellow{
background-color:yellow;
height:20px;
width:130px;
border: 2px solid red;
list-style-type: none;
text-align: center;
}
#yellow:hover button {
display: block;
}
</style>
</head>
<html>
<body>
<div id="yellow">HOME
<button>BUTTON</button>
<button>BUTTON</button>
</div>
</body>
-----------------------------------------------------------------------------------------------------------------
CODE WITHOUT P DIV CODE:
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
/* BUTTON CODE NOT USE AS ID OR CLASS */
/* MAKE BUTTON AND MAKE BUTTON
INVISIBLE */
button{
background-color:LimeGreen;
height:30px;
width:130px;
border: 2px solid red;
display: block;
}
button{
display:none;
}
/* DIV CODE NOT USE AS ID OR CLASS */
div{
background-color:yellow;
height:20px;
width:130px;
border: 2px solid red;
list-style-type: none;
text-align: center;
}
div:hover button {
display: block;
}
</style>
</head>
<html>
<body>
<div>BUTTON
<button>BUTTON</button>
<button>BUTTON</button>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
USE CODE WITH NOTEPAD++ STREAM COMMENT OPTION:
USE GREEN COMMENTS BY NOTE PAD ++
https://www.youtube.com/watch?v=Abqwpg5mp_U
4 mins ago - Uploaded by SAVE MONEY
http://fbgadgets.blogspot.co.uk/2016/08/button-change-into-dropdown-menu.html.
https://www.youtube.com/watch?v=Q4yfMqPFSYE
16 mins ago - Uploaded by SAVE MONEY
http://fbgadgets.blogspot.co.uk/2016/09/edit-html-source-code.html ...
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<!-- /*
* CSS COMMENT BOX
* ID OR CLASS USE ENGLISH LETTER
* FB GADGETS
*
*/-->
<head></head>
<body>
<style>
#A1{
background-color:Yellow;
}
#a1{
background-color:Red;
}
</style>
<!-- /*
* HTML COMMENT BOX
* I USE Stream Comment OPTION NOTEPAD++ FOR THIS GREEN COMMENT
* GO TO Edit>Comment/UnComment>Stream Comment
* FB GADGETS
*
*/ -->
<div id="A1"> A1 </div>
<div id="a1"> a1 </div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
CSS CODE CAN USE ALSO STREAM COMMENTS
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<!-- /*
* CSS COMMENT BOX
* ID OR CLASS USE ENGLISH LETTER
* FB GADGETS
*
*/-->
<head></head>
<body>
<style>
<!-- #A1{
background-color:Yellow;
}
#a1{
background-color:Red;
} -->
</style>
<!-- /*
* HTML COMMENT BOX
* I USE Stream Comment OPTION NOTEPAD++ FOR THIS GREEN COMMENT
* GO TO Edit>Comment/UnComment>Stream Comment
* FB GADGETS
*
*/ -->
<div id="A1"> A1 </div>
<div id="a1"> a1 </div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
CSS FONTS
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Rock+Salt" />
<style>
.h1 {
background-color: yellow;
font-family: "Rock Salt";
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
</style>
</head>
<body>
<div class="h1"> RED </div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
READ MORE:
http://www.cssfontstack.com/Web-Fonts
CSS HTML ENTITY CODES
-----------------------------------------------------------------------------------------------------------------
<html>
<style>
ul li.green > a {color: #78AB46;
}
ul li.red > a {color: red;
}
ul li.orange > a {color: Orange;
}
ul li.orange > a:after {content:' \2665 ';
}
</style>
<body>
<ul>
<li class="green"> 💚 <a href="#">Green</a></li>
<li class="red"> 👫 <a href="#">Red</a></li>
<li class="orange"> ♛ <a href="#">Orange</a></li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
TEXT DECORATION AND LINE STYLE NONE IN CSS CODE
LI TAG CHANGE INTO BUTTON
-----------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
ul button.green a{
text-decoration: none;
}
</style>
</head><body>
<ul>
<button class="green"><a href="#">Green</a></button>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<style>
ul{
/* LINE STYLE REMOVE LIST DOT */
list-style: none;
}
ul li.green a{
/*
TEXT DECORATION REMOVE TEXT UNDER LINE */
text-decoration: none;
background-color:Green;
Color:Red;
height:20px;
width:130px;
border: 2px solid red;
list-style-type: none;
text-align: center;
}
</style>
<body>
<ul>
<li class="green"><a href="#">Green</a></li>
</ul>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
//http://fbgadgets.blogspot.co.uk/2015/12/simple-css-layout.html
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
a{
background-color:Green;
}
ul li:nth-child(1) {
background-color: red;
}
/*------------ OR USE THIS CODE ------------------*/
ul li:nth-child(1) {
background: Red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHFM8SF8ct1pw_PoGRdIF1p3kJp-YG40TM8t52TmkqXa8lx23aPw88MdweTJAiw8mD7p7ieLCRuD-f-wHDq958pFCQYlFXLWoBRS31BtiLOG1ao5Z1vo4UpXjuIm_DpjFk_LDBpGjKWM/s1600/home.png)no-repeat;
height:40px;
width:40px;
position: absolute;
}
</style>
</head>
<body>
<ul>
<li><a> menu 1</a></li>
<li><a class='home-item tooltip' href='/' title='Go home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHFM8SF8ct1pw_PoGRdIF1p3kJp-YG40TM8t52TmkqXa8lx23aPw88MdweTJAiw8mD7p7ieLCRuD-f-wHDq958pFCQYlFXLWoBRS31BtiLOG1ao5Z1vo4UpXjuIm_DpjFk_LDBpGjKWM/s1600/home.png'/></a></li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
SIMPLE CSS LAYOUT
http://fbgadgets.blogspot.co.uk/2015/12/simple-css-layout.html
http://www.w3schools.com/css/css3_buttons.asp
www.w3schools.com/css/css_dropdowns.asp
Create a dropdown box that appears when the user moves the mouse over an element ... The :hover selector is used to show the dropdown menu when the user ...
www.w3schools.com/howto/howto_js_dropdown.asp
Create a dropdown menu that appears when the user clicks on a button. ... Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> ...Change color of dropdown links on hover */
How To Create a Hoverable Dropdown Menu - W3Schools
www.w3schools.com/howto/howto_css_dropdown.asp
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a ...Change color of dropdown links on hover */
www.w3schools.com/html/html_comments.asp
Well organized and easy to understand Web building tutorials with lots of examples of how to useHTML, CSS, JavaScript, SQL, PHP, and XML.
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
omments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:
Example
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
Conditional Comments
You might stumble upon conditional comments in HTML:
<!--[if IE 9]>
.... some HTML here ....
<![endif]-->
Conditional comments defines some HTML tags to be executed by Internet Explorer only.
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<style>
ul{
/*BULLET POINTS REMOVE */
list-style-type: none;
}
ul li.green > a {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
ul li.red > a {
background-color: Red; /* Green */
border: none;
color: white;
padding: 15px 38px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
ul li.orange > a {
background-color: Orange; /* Green */
border: none;
color: white;
padding: 15px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<body>
<ul>
<li class="green"><a href="#">Green</a></li>
<li class="red"><a href="#">Red</a></li>
<li class="orange"><a href="#">Orange</a></li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
Proper CSS to change color of text in parent
LI of nested UL
INLINE/IN LINE CSS CODE
<button style=" ADD HERE CSS CODE " > BUTTON </button>
<button style="Background-Color:Red;Color:Gold" > BUTTON</button>
-----------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
-------------------------------------------------------------------------------------------------------------------
<a href="http://fbgadgets.blogspot.com/2013/12/button-css-examples.html" style=" border: solid; padding: 10px; display:
inline-block; "> LINK 1</a>
<a href="http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html" style=" border: solid; padding: 10px; display:
inline-block; "> LINK 2</a>
<a href="https://www.youtube.com/watch?v=150RVuS_kAM" style=" border: solid; padding: 10px; display:
inline-block; ">LINK CHANGE INTO BUTTON IN HTML -
YouTube</a>
-------------------------------------------------------------------------------------------------------------------
I cannot figure out how to change the color of text in a parent LI (the text "Black") from a child UL nested within the LI. Here is my HTML code:
<nav>
<ul class="nav-main">
<li class="dropdown"><a href="#">Etc</a></li>
<li class="dropdown active"><a href="#">Black</a></li>
<ul class="dropdown-menu">
<li class="green"><a href="#">Green</a></li>
<li class="red"><a href="#">Red</a></li>
<li class="purple"><a href="#">Purple</a></li>
</ul>
<li class="dropdown"><a href="#">Etc</a></li>
</ul>
</nav>
And here is the CSS:
nav ul.nav-main li.active > a,
nav ul.nav-main li.active > a:hover {
color: #000000;
}
nav ul.nav-main ul.dropdown-menu li.green > a {
color: #78AB46;
}
nav ul.nav-main ul.dropdown-menu li.red > a {
color: #ff0000;
}
nav ul.nav-main ul.dropdown-menu li.purple > a {
color: #7D26CD;
}
And here is the JSFiddle:
What I would like to happen is that when the mouse hovers over any LI in the child UL "dropdown-menu", that the parent LI "dropdown active" text ("Black") turns from its current color black, to the color blue. I'm not sure how to climb up the parent/child ladder to edit the parent's text color. I only know how to edit the text color of the class the mouse is currently hovering over (not its parent).
I've tried editing my CSS for a couple of hours, and cannot come to any conclusion.
Thank you in advance!
-----------------------------------------------------------------------------------------------------------------
JS MENU CODE CHANGE IN CSS CODE 1:
www.w3schools.com/howto/howto_css_dropdown.asp
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
a {
display:none;
}
.button:hover a {
display: block;
}
</style>
</head>
<body>
<button class="button">Dropdown
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</button>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
JS MENU CODE CHANGE IN CSS CODE 2:
www.w3schools.com/howto/howto_css_dropdown.asp
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
/* BUTTON CODE USE AS CLASS */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/* PAGE LINKS CODE NOT USE AS ID OR CLASS */
/* PAGE LINKS NOT SHOW */
PageLinks{
display:none;
}
/* BUTTON HOVER EFFECT UNDER SHOW PAGE LINKS */
.button:hover
PageLinks {
display: block;
}
</style>
</head>
<body>
<!--WRITE PAGE LINKS UNDER BUTTON DIV -->
<!-- BECAUSE BUTTON DIV SHOW OR HIDE PAGE LINKS UNDER -->
<!-- PAGE LINKS USE BUTTON CSS CLASS -->
<!-- U CAN USE DIFFRENT PAGE LINKS CSS CLASS FOR SHOW
DIFFRENT COLORS -->
<button class="button">BUTTON
<
PageLinks href="#">Link 1<
/PageLinks>
<
PageLinks href="#">Link 2<
/PageLinks>
<
PageLinks href="#">Link 3<
/PageLinks>
</button>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
15+ Best CSS Drop Down Menu Tutorials for Web Designers
http://wordpressthemes2016.com/2014/11/css-dropdown-menu-tutorials/
------------------------------------------------------------------------------------------------------------------------
CHANGE SPAN TAGS WITH fbGadgets TAG
-----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
fbGadgets{
background-color:
#4CAF50;
color:
black;
padding:
12px 16px;
text-decoration:
none;
display:
block;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<fbGadgets>Mouse
over me</fbGadgets>
<div class="dropdown-content">
<fbGadgets>Hello
World!</fbGadgets>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------
DROP DOWN HTML BRIEF CODE
-------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn{
position: relative;
display: inline-block;
background-color: #3e8e41;
color: white;
width: auto;
padding: 12px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
color:Black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropbtn:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropbtn">Button
<div class="dropdown-content">Link1
</div>
</div>
</body>
</html>
15+ Best CSS Drop Down Menu Tutorials for Web Designers
November 12, 2014
Most menu of websites have submenu that makes it essential to create a drop down menu for easy access of web pages. Wed designer may have little or lack knowledge on how to create CSS drop down menu. CSS drop down menu tutorial provides detailed illustration of creating drop down menu. These tutorials are simple step by step guide to building a great CSS menu on your website. The most common drop down menu is the simple CSS drop down menu, when is easy to use. You can attain pure and hierarchical overview of submenus of a menu using these drop down menu tutorials.CSS drop down menu tutorials are renowned for their remarkable use in creating drop down menu for various websites. Every tutorial has its unique features that have specific roles when creating the CSS menu. Care should be taken when you as a web designer are selecting a tutorial. There are several drop down tutorials in various tutorials. Here are the best tutorials for creating great drop down menu. CSS Drop Down Menu Tutorials for Web Designers.
Line25 CSS Dropdown Menu Tutorial
Line25 uses advanced selectors to easily create the dropdown menu. This tutorial is equipped with illustrations that will guide you through the whole process.
View Tutorial
Another Simple Drop Down Menu
The CSS box shadow, transition and text shadow are used to come up with the best user interface and interaction.
View Tutorial
Menucool Drop Down Menu Tutorial
Menucool is a multi-level CSS drop down menu that has different HTML and CSS sources codes. This CSS drop menu is supported by the major browsers.
View Tutorial
Pure CSS Drop Down Menu Tutorial
This tutorial is a step by step guide for creating pure drop down menu that provides a hierarchical overview of the submenus of the menu item.
View Tutorial
And Or CSS Dropdown Menu
And Or drop down menu tutorial gives you how to create the menu and some extras you may need to add.
View Tutorial
Wikihow Dropdown HTML CSS Menu
Search Results
https://www.youtube.com/watch?v=Sqztci8kzfk
8 mins ago - Uploaded by SAVE MONEY
IMPORT SQL FILE IN PHP MY ADMIN - Duration: 7:39. SAVE MONEY 3 views · 7:39 · How to Convert a ...
Wikihow provides you the most understandable and easy tutorial that you can use to create the desired drop down menu within seconds.
--------------------------------------------------------------------------------------------------------------
PADDING CHANGE INTO WIDTH X HEIGHT
https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button
padding: 16px; CHANGE INTO Width:104.94px;height:50px;
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
Width:104.94px;
height:50px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
color: Black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
CSS3 Drop Down Menu Tutorial
This is a resourceful tutorial as it addresses the various layout challenges you encounter in IE. It uses CSS3 transitions to come up with gentle menu slide down.
View Tutorial
Free CSS Drop Down Menu Framework
Free CSS Drop-Down Menu Framework is a perfect tutorial as it enables you to create a cross browser drop down menu that is easily deployable and fast.
View Tutorial
Code Tricks CSS Menu Template
Code Tricks tutorials provide precise illustration of how to create a drop down menu without scripting like JavaScript.
View Tutorial
Handy HTML Simple CSS Drop Down Menu
Handy HTML has the best tutorial to guide you how you can integrate a drop down menu in an existing website.
View Tutorial
Perishable Press CSS Menu Template
The tutorials show how you can create a pure drop down menu in WordPress websites. Perishable Press is a step by step tutorial that requires you to be able to access and edit WordPress theme files and have basic understanding of HTML and CSS.
View Tutorial
Pure CSS Menu DropDown Tutorial
Pure CSS Menu tutorial provide a guide to create and SEO friendly drop down menu and has advanced styling.
View Tutorial
UvumiTools Drop Down Menu
UvumiTools employs Mootools JavaScript Framework. It guides you how to create a simple, multi-level and lightweight menu that you can easily update.
View Tutorial
Stu Nicholls Drop Down Menu
Explore the various possibilities you can use to create a perfect drop down menu that is compatible with themajor browsers.
View Tutorial
Chrome CSS Drop Down Menu
Chrome Menu is a hybrid of CSS and JavaScript drop down menu. Web designers will find it easy to configure menu using this tutorial.
View Tutorial
Superfish CSS drop-down Menu
Superfish uses the enhanced Suckerfish-style menu jQuery plugin, which adds drop down menu that is compatible with touch devices, animations, menu delay timeout on mouseout that can be customized.
View Tutorial
JQuery CSS Menu Tutorial
The detailed tutorial jQuery Menu provide can enable you create a simple menu, a flyout menu for smaller hierarchical list of options and a linked beadcrumb to let users to reverse back up the hierarchy.
View Tutorial
Picnic Website Code Tutorial
Picnic Website Code Tutorial provides you a detailed guide to create single drop down menu, double drop down menu, triple drop down menu and nonuple drop down menu.
View Tutorial
Inspirational Pixels Menu Tutorial
Get the best tutorial for your website development project. Inspirational Pixels provides a well-illustrated guide for designing a perfect drop down menu.
View Tutorial
READ MORE:
Here is a list of web based ready to use inlining tools, a couple have been mentioned previously. If there are any I've missed, feel free to edit and add them. I can't promise each works as advertised, so drop comments, but don't shoot the messenger...
And here is one that works in reverse (un-inlining your css)
http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css
<a
href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'"
>Text</a>
<a
href="abc.html"
onMouseOver="this.style.backgroundColor='Red'" onMouseOut="this.style.backgroundColor='Yellow'"
>
Text</a>
Read more: http://wordpressthemes2016.com/2014/11/css-dropdown-menu-tutorials/#ixzz4JaKsjNfl
How to download full Website-Offline Browsing
https://www.youtube.com/watch?v=tQL7oEGKq8c
https://www.httrack.com/page/2/en/index.html
----------------------------------------------------------------------------------------------------------------
BLANK OR DUMMY IMAGE GENERATOR
BROKEN IMAGE WITH WRONG DOMAIN LINK
GOT THIS CODE DUMMY IMAGE GENERATOR
BLANK OR DUMMY IMAGE GENERATOR
https://dummyimage.com/
https://dummyimage.com/300/09f/fff.png
https://dummyimage.com/100x100/ff0303/35f513.png&text=IMAGE
https://plchldr.co/i/1070x90?text=Width=1070xHeight=90
https://plchldr.co/i/1070x200?bg=CE86ED
https://plchldr.co/i/970x50
<div class="owl-carousel owl-theme">
<img src="https://fakeimg.pl/300/">
<img src="https://fakeimg.pl/250x100/">
<img src="https://fakeimg.pl/250x100/ff0000/">
<img src="https://fakeimg.pl/350x200/ff0000/000">
<img src="https://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="https://fakeimg.pl/350x200/?text=Hello">
<img src="https://fakeimg.pl/200x100/?retina=1&text=こんにちは&font=noto">
<img src="https://fakeimg.pl/350x200/?text=World&font=lobster">
</div>
BROKEN IMAGE
http://www.pageresource.com/trouble/timage.htm
Broken Images
Troubleshooting image problems
So, you have images on your page that just will not show up, and you are ready to have some choice words with your computer. You don't really want to mess up your computer, do you? Well, maybe this little guide will help you figure it out!
Let's start out by checking out what a broken image may look like. In older versions of Netscape, you get the little grey paper with the bottom corner torn and some colorful shapes on it. In IE, you get a little white box with a red "x" inside of it. Below is what they might look like:
 |  |
| Broken Pic in Netscape | Broken Pic in Internet Explorer |
Now, to get rid of these little "broken image" symbols, we need to figure out what is causing the problem. Well, let's start with a Web page that you have live on the Web. We will work with pages that are offline a little later.
---------------------------------------------------------------------------
<html debug="true">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1"/>
<title>35f513.png&text=IMAGE (100ױ00)</title>
</head>
<body style="margin: 0px; background: rgb(14, 14, 14);">
<img style="user-select: none; background-position: 0px 0px, 10px 10px; background-size: 20px 20px; background-color: white; background-image: linear-gradient(45deg, rgb(238, 238, 238) 25%, transparent 25%, transparent 75%, rgb(238, 238, 238) 75%, rgb(238, 238, 238) 100%), linear-gradient(45deg, rgb(238, 238, 238) 25%, transparent 25%, transparent 75%, rgb(238, 238, 238) 75%, rgb(238, 238, 238) 100%);" src="https://dummyimage.com/100x100/ff0303/35f513.png&text=IMAGE"/>
</body>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/>
</html>
---------------------------------------------------------------------------
BROKEN IMAGE IN GOOGLE CHROME BY WRONG IMAGE LINK
----------------------------------------------------------------------------------------------------------------
<html debug="true">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1"/>
<title>35f513.png&text=IMAGE (100ױ00)</title>
</head>
<body style="margin: 0px; background: rgb(14, 14, 14);">
<img style="user-select: none; background-position: 0px 0px, 10px 10px; background-size: 20px 20px; background-color: white; background-image: linear-gradient(45deg, rgb(238, 238, 238) 25%, transparent 25%, transparent 75%, rgb(238, 238, 238) 75%, rgb(238, 238, 238) 100%), linear-gradient(45deg, rgb(238, 238, 238) 25%, transparent 25%, transparent 75%, rgb(238, 238, 238) 75%, rgb(238, 238, 238) 100%);" src="http://fbgadgets.blogspot.co.uk/100x100/ff0303/35f513.png&text=IMAGE"/>
</body>
</html>
---------------------------------------------------------------------------
SVG IMAGE SVG.svg IN NOTEPAD
----------------------------------------------------------------------------------------------------------------
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"/>
</svg>
----------------------------------------------------------------------------------------------------------------
DROPPED DOWN MENU CSS
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoZyfJ1ycji3x2nOdBb5dwv6GYmE_h3liP5rN744hi7GueatTeCFX7Bfncr1bOGYDMEMP6WnHo67XgVYAvWzPRKGALFP5HjRmGY24Or5mmm1V-MYVz4psBtNMEhQoC3D2ghstrU1WW9Yz/s1600/10X60.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvp9VD1wPbGct1GbXAq91iFKTgbHoFr1wkv2lY3Emuc-p8MxkeYjr0Z-YA4u8C7Pk4S3wm39ec1Bqd3qkc0dTRfLTxSBZxMi_6lEJCHdHZg66HjKvJ9e80dvoPF-GysTet6vhTNr41EtOz/
--------------------------------------------------------------------------------------------------------------
MULTI COLORS AND COLOR CHARTS
READ MORE:
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#mainnavigatation {margin: 0px;padding:
0px;clear: both;height: auto;width: 100%;display: block;background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoZyfJ1ycji3x2nOdBb5dwv6GYmE_h3liP5rN744hi7GueatTeCFX7Bfncr1bOGYDMEMP6WnHo67XgVYAvWzPRKGALFP5HjRmGY24Or5mmm1V-MYVz4psBtNMEhQoC3D2ghstrU1WW9Yz/s1600/10X60.png);background-repeat:
repeat-x;background-position: left center;}
#dropmenu, #dropmenu ul
{list-style-type: none;margin: 0px;display: block;width: 100%;height:
auto;padding: 0px;clear: both;}
#dropmenu li {list-style-type:
none;text-align: center;width: auto;display: block;float: left;height:
auto;margin: 0px;padding: 0px;list-style-image: none;background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-vDse5m08XYHMN0MZx6Muz0r8H8dzrsBleKq_kwyQb9NMqvaRaQs4jIjgJ18GTenfvUNXLmkxt08NU5VSFPfAHFhhrdb_RbTvYRLh1n19cCLLMyuzAVS2iKogyRXzeYmMK0xQny5wqAK/s1600/navbg-border.png);background-repeat:
no-repeat;background-position: right center;}
#dropmenu li li {margin: 0px;padding:
0px;float: left;list-style-type: none;width: 10em;text-align:
left;background-image: none;border-bottom-width: 1px;border-bottom-style:
solid;border-bottom-color: #B64F1D;}
#dropmenu li li:hover
{background-image: none;}
#dropmenu li a {list-style-type:
none;display: block;width: auto;text-decoration: none;font-size: 11px;height:
auto;color: #FFFFFF;text-transform: uppercase;border-top-width:
0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width:
0px;border-top-style: none;border-right-style: none;border-bottom-style:
none;border-left-style: none;margin: 0px;font-weight: bold;text-shadow: 0px 1px
1px #000;padding-top: 13px;padding-right: 10px;padding-bottom:
13px;padding-left: 10px;}
#dropmenu li a:hover, #dropmenu li#home
a, #dropmenu li#home a:hover, #dropmenu li.current_page_item a, #dropmenu
li#page_item a, #dropmenu li.menu-item-home a, #dropmenu li.current-menu-item a
{background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijttN07B4t0vP606wzIQeSd4aXht-zxhoU3DkAny0_jMFt3H0exoIvVnN3lfwdackmU2bj8JdzWsG3EJEFryU9KtZheZKQXTGsDOOO8PZcOYNRh9MnF7llpd8nlj9m2VLkTha2YDfQ0BMJ/s1600/navbg-hover.png);background-repeat:
repeat-x;background-position: left center;color: #4d3123;text-shadow: 0px 1px
1px #fff;}
#dropmenu .current_page_item li a,
#dropmenu #page_item li a, #dropmenu .menu-item-home li a, #dropmenu
.current-menu-item li a {background-image: none;}
#dropmenu li li a {padding-top:
8px;padding-bottom: 8px;}
#dropmenu li li a:hover
{background-image: none;text-shadow: 0px 1px 1px #000;color:
#FFFFFF;background-color: #B14E1D;}
#dropmenu span {}
#dropmenu ul {position:absolute;width:
10em;left: -999em;z-index: 9999;background-color: #CF5B21;margin: 0px;padding:
0px;border-top-width: 1px;border-right-width: 1px;border-left-width:
1px;border-top-style: solid;border-right-style: solid;border-left-style:
solid;border-top-color: #B64F1D;border-right-color: #B64F1D;border-left-color:
#B64F1D;}
#dropmenu ul ul {margin-top:
-1.95em;margin-right: 0;margin-bottom: 0;margin-left: 10em;}
#dropmenu li:hover ul ul, #dropmenu
li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {left: -999em;}
#dropmenu li:hover ul, #dropmenu li
li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {left:
auto;}
</style>
</head>
<body>
<div id='mainnavigatation'>
<div class='section' id='navmenu'><div class='widget HTML' data-version='1' id='HTML2'>
<ul id='dropmenu'>
<li class='home'><a href='/' title='Home Page'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvp9VD1wPbGct1GbXAq91iFKTgbHoFr1wkv2lY3Emuc-p8MxkeYjr0Z-YA4u8C7Pk4S3wm39ec1Bqd3qkc0dTRfLTxSBZxMi_6lEJCHdHZg66HjKvJ9e80dvoPF-GysTet6vhTNr41EtOz/s1600/ico-home.png'/></a></li>
<li><a href='http://www.easytuts4you.com/search/label/Basics'>Basics</a>
</li>
<li><a href='#'>Video Tutorials</a>
<ul>
<li><a href='http://www.easytuts4you.com/p/c-programming-video-tutorials-hindi.html'>C</a></li>
<li><a href='http://www.easytuts4you.com/p/cplusplus-programming-video-tutorials.html'>C++</a></li>
<li><a href='http://www.easytuts4you.com/p/java-programming-video-tutorials-hindi.html'>Java</a></li>
<li><a href='http://www.easytuts4you.com/p/html-programming-hindi.html'>HTML</a></li>
<li><a href='http://www.easytuts4you.com/p/easytuts4you-news.html'>Site News</a></li>
<li><a href='http://www.easytuts4you.com/p/motivational-videos-hindi.html'>Others</a></li>
<li><a href='http://www.easytuts4you.com/p/tech-tutorials-hindi.html'>Technology</a></li>
<li><a href='http://www.easytuts4you.com/p/data-structures-tutorials-hindi.html'>Data Structures</a></li>
</ul>
</li>
<li><a href='http://www.easytuts4you.com/p/easytuts4you-news.html'>Site News</a>
</li>
<li><a href='http://www.easytuts4you.com/2013/01/online-project-development-for-bcamcabe.html'>Project Training</a></li>
<li><a href='http://www.easytuts4you.com/p/blog-page_8.html'>Contribute</a></li>
<li><a href='http://www.easytuts4you.com/p/about-me_16.html'>About Me</a></li>
<li><a href='http://www.easytuts4you.com/p/buy-programming-tutorials-dvds.html'>Buy DVDs</a></li>
<li><a href='http://www.easytuts4you.com/p/contact-us_2.html'>Contact Us</a></li>
</ul>
</div></div>
<div style='clear:both;'></div>
</div><!-- /mainnavigatation
-->
</body>
</html>
------------------------------------------------------------------------------------------------------
HOW TO WRITE ID AND CLASS TOGETHER
<p id="Blue"class="Red">
https://css-tricks.com/multiple-class-id-selectors/
http://www.html-seminar.de/class_und_id.htm
http://www.htmldog.com/guides/css/intermediate/classid/
-------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#Blue{
color:Blue;
}
.Red{
background-color:Red;
}
#one.two { color: red; }
</style>
</head>
<body>
<p id="Blue"class="Red">
HOW TO WRITE ID AND CLASS
</BR>
http://www.html-seminar.de/class_und_id.htm
http://www.htmldog.com/guides/css/intermediate/classid/
</p>
<h1 id="one" class="two">This Should Be Red</h1>
https://css-tricks.com/multiple-class-id-selectors/
</body>
</html>
--------------------------------------------------------------------------------------------------
HOW TO WRITE ID AND SPACE CLASS TOGETHER
GET CSS CODE IN GOOGE CHROME
https://www.youtube.com/watch?v=rnB0ITUKSRA
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
div#pt_menu6.pt_menu.nav-2{
background-color:yellow;
}
</style>
</head>
<body>
<div id="pt_menu6" class="pt_menu nav-2">
<a href="#">HOW TO WRITE ID AND SPACE CLASS TOGETHER</a></li>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------
Read More:
https://www.w3schools.com/howto/howto_css_alert_buttons.asp
-----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------
CODE:
FOR REMOVE SPACE BETWEEN BUTTONS CODE
.btn {
float:left; /* FOR REMOVE SPACE BETWEEN IN BUTTONS */
}
---------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<!--[COPY FROM]>
https://www.w3schools.com/howto/howto_css_alert_buttons.asp
<![COPY FROM]-->
<title> CSS ALERT BUTTON </title>
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
.success {background-color: #4CAF50;}
/* Green */
.success:hover {background-color:
#46a049;}
.info {background-color: #2196F3;} /*
Blue */
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;}
/* Orange */
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} /*
Red */
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7;
color: black;} /* Gray */
.default:hover {background: #ddd;}
</style>
</head>
<body>
<h1>Alert Buttons</h1>
<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>
</body>
</html>
------------------------------------------------------------------------------------------------------------
DIV CLASS WITH SPACE
DIV WITH SPACES
edit css style of an element with a space in its class name
https://stackoverflow.com/questions/4695812/edit-css-style-of-an-element-with-a-space-in-its-class-name
<li class="post quote">
{other code}
</li>
.post.quote { .... }
------------------------------------------------------------------------------------------------------------
<html>
<body>
<style>
.swatch-option.image{
Width:100px;
Height:100px;
}
</style>
<img src="https://www.w3schools.com/tags/smiley.gif" class="swatch-option image">
</body>
</html>
------------------------------------------------------------------------------------------------------------
HTML CODE CONVERT INTO CSS CODE BY GOOGLE CHROME
USE GOOGLE CHROME INSPECT TOOL AND CLICK PROPERTIES
https://www.w3schools.com/w3css/w3css_references.asp
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------
CSS CODE USE IN HTML
-------------------------------------------------------------------------
<!-- CSS CODE IN HTML -->
<img src="https://www.w3schools.com/tags/smiley.gif"
style="
border-color:Red;border-style:solid;
border-width:6px;width:400px;height:400px
">
------------------------------------------------------------------------------------------------------------
0 comments:
Post a Comment