Skip to content

Instantly share code, notes, and snippets.

@bmakarand2009

bmakarand2009/css-embedable-example

Created September 12, 2012 18:23
Show Gist options
  • Save bmakarand2009/3708833 to your computer and use it in GitHub Desktop.
Save bmakarand2009/3708833 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Inline Style example
Raw
css-embedable-example
<!-- use html editor to try : http://htmledit.squarefree.com/ -->
<?xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Welcome , Webpage elements </title>
<!-- meta tags are used by search engines -->
<meta name ="keywords" content="java , html elements, basic html tags"/>
<meta name ="description" content=" This is a sample html page which has most of the commonly used eleemnts"/>
<style type="text/css" >
body {
background-image : url(http://l.yimg.com/bt/api/res/1.2/BOL1x4_W_dA4JiTDLQnjLA--/YXBwaWQ9eW5ld3M7Zmk9ZmlsbDtoPTE1MDtxPTg1O3c9MTUw/http://l.yimg.com/os/156/2012/08/10/awesome-animals-100812-630-04-jpg_092033.jpg.cf.png);
background-repeat : no-repeat;
background-color : #eeeeee;
}
p { font-size:1.3em;
color:#0000FF
}
h1 { font-family : arial,sans-serif;
color : #0000FF
}
.ulclass {
color:#E01B6A;
font-weight:bold
}
span { color : red;
font-size: .6em;
}
.left { position : relative ;
top : -1ex;
}
</style>
</head>
<body>
<h1> Basic Elements </h1> <!-- h1 - h6 tags are available -->
<p > Embeded Stylesheets allows us to define CSS in the header,
<span class="left"> Also, CSS allows to separate styles from content </span>/p>
<div>
Advantage of a emebeded CSS is
<ul class="ulclass">
<li> reusable in the page
<li> applied across all the elements </li>
</body>
</html>
Raw
css-float-example
<!-- use html editor to try : http://htmledit.squarefree.com/ -->
<?xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Welcome , Webpage elements </title>
<!-- meta tags are used by search engines -->
<meta name ="keywords" content="java , html elements, basic html tags"/>
<meta name ="description" content=" This is a sample html page which has most of the commonly used eleemnts"/>
<style type="text/css" >
div.topline {
background-color:#bbddff;
font-size:1.5em;
text-align:center;
padding:.5em
}
p {
text-align:justify;
margin:.5em;
}
div.floated {
background-color:#eeeeee;
padding:.2em;
margin-bottom:0.5em;
margin-left:0.5em;
text-align:right;
float:right;
font-size:2em;
width:50%;
}
div.section {
border : 1px solid #bbddff;
}
</style>
</head>
<body>
<div class="topline">Sample Resume Objective Statements </div>
<div class="section">
<div class="floated">Some Objectvies For your </div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
</div>
<div class="section">
<div class="floated"> Also, CSS allows to separate styles from content </div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>
Raw
css-inline-style
<!-- Inline style sheets have many disadvantages
-- you have to apply them individually to each element
-- not reusable
-- Only one person can work at a time or have to merge the code
-- Adds lot of confusion, clutter, not a clear separation
-->
<?xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Welcome , Webpage elements </title>
<!-- meta tags are used by search engines -->
<meta name ="keywords" content="java , html elements, basic html tags"/>
<meta name ="description" content=" This is a sample html page which has most of the commonly used eleemnts"/>
</head>
<body>
<h1> Basic Elements </h1> <!-- h1 - h6 tags are available -->
<p style="font-size: 40pt ; color: #F00060"> Inline CSS style to change the font and color</p>
<div>
common colors are #FFFFFF is while, #0000FF is red #FFFFFF is balck, other than you can find the right color, just google for hex color picker
<div> special characters are displayed as copyright &copy or &lt, for more info google on character entity references />
/body>
</html>
Raw
css-menu-example
<!-- use html editor to try : http://htmledit.squarefree.com/ -->
<?xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Welcome , Webpage elements </title>
<style type="text/css" >
div.menu { font-weight:bold;
color : white;
text-align:center;
border : 2px solid: #225599;
width : 10em;
background-color : #225599;
}
div.menu:hover a {display : block ;}
div.menu a {
display:none;
border : 2px solid: #225599;
background-color:white;
text-decoration:none;
color:black;
}
div.menu a:hover { background-color : red ;}
</style>
</head>
<body>
<div class="menu"> Menu
<ul>
<a href="#"> home </a>
<a href="#"> aboutus </a>
<a href="#"> contact </a>
<a href="#"> blog </a>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment