212 lines
8 KiB
HTML
Executable file
212 lines
8 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<!--
|
|
To change this license header, choose License Headers in Project Properties.
|
|
To change this template file, choose Tools | Templates
|
|
and open the template in the editor.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="style.css" type="text/css"/>
|
|
<link href="/_img/_juyounglee.tk/favicon.ico" rel="icon" type="image/x-icon"/>
|
|
<title>CSS Tutorial</title>
|
|
<!--CSS Style Rule: selector { property: value } -->
|
|
<style type="text/css">
|
|
*{font-size: 20px;}
|
|
h1{color:#36cfff;}
|
|
h2{color:yellow;}
|
|
ul li{color:blue;}
|
|
input[type="text"]{color:red;}
|
|
p[lang="en"]{color:green;}
|
|
|
|
h3{color: #36c;
|
|
font-weight: normal;
|
|
letter-spacing: .4em;
|
|
margin-bottom: 1em; /* each "em" unit would be 12pt; */
|
|
text-transform: lowercase;}
|
|
|
|
/*
|
|
*The universal selectors : *{ }
|
|
*The class selectors: h1{color:#36cfff;} means that I want to make h1 to be in color #36cfff.
|
|
*Stye rule will apply to <li> element only when it lies inside <ul> tag.
|
|
*input[] e.g.1: p[lang] - Selects all para elements with a lang attribute
|
|
e.g 2: p[lang="fr"] - Selects all para elements whose lang attribute has a value of exactly "fr"
|
|
e.g 3: p[lang~="fr"] - Selects all para elements whose lang attribute contains the word "fr"
|
|
e.g 4: p[lang|="en"] - Selects all para elements whose lang attribute contains values that are exactly "en", or begin with "en-".
|
|
*/
|
|
/* end of style rules*/
|
|
|
|
a:link {color: #000000}
|
|
a:visited {color: #006600}
|
|
a:hover {color: #ffcc00}
|
|
a:active {color: #ff00cc} /* See "Links" */
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div style="text-align:center;font-size:25px; font-family:arial">
|
|
Created by Juyoung. Built this site while I was teaching myself HTML and CSS.
|
|
<hr/></div>
|
|
<a href="newhtml.html">Click Here to go to second page</a><br>
|
|
<a href="secondhtml.html">Click Here to go to third page</a>
|
|
<h1>This is head 1 paragraph.</h1>
|
|
<h2>This is head 2 paragraph.</h2>
|
|
<h3>This is head 3 paragraph</h3>
|
|
<p>This is a paragraph.</p>
|
|
|
|
<ul><li>1st</li>
|
|
<li>2nd</li>
|
|
<li>3rd</li>
|
|
<li>4th</li>
|
|
<li>5th</li></ul>
|
|
|
|
<p>Links</p>
|
|
</br>
|
|
<a href="newhtml.html">Black Link</a>
|
|
</br>
|
|
<a href="newhtml.html">Click this Link</a>
|
|
</br>
|
|
<a href="newhtml.html">Bring Mouse Here</a>
|
|
|
|
<form action="http://www.facebook.com/jylee.2ju0" method="get">
|
|
Id:
|
|
<input type="text" name="username"/>
|
|
<br>
|
|
Password:
|
|
<input type="text" name="password"/>
|
|
<input type="submit" value="submit"/>
|
|
</form>
|
|
|
|
<p lang="en">Some English text in a paragraph.</p>
|
|
|
|
<p class="center bold">This para will be styled by the classes center and bold</p>
|
|
<!-- This para will not be styled as center and bold. I think it is because class 'center' and 'bold' are not defined in this file-->
|
|
|
|
<p style='background-color:yellow;'>This text has yellow background color.</p>
|
|
|
|
<!-- Set the background image -->
|
|
<table style='background-image:url(fourredstars.jpg);'><tr><td>
|
|
This table has background image set.
|
|
</td></tr></table>
|
|
|
|
<table style='background-image:url(fourredstars.jpg);
|
|
background-repeat: repeat;'><tr><td>
|
|
This table has background image which repeats multiple times.
|
|
</td></tr></table>
|
|
|
|
<table style='background-image:url(fourredstars.jpg);
|
|
background-repeat: repeat-y;'><tr><td>
|
|
This table has background image set which will repeat vertically.
|
|
</td></tr></table>
|
|
|
|
<table style='background-image:url(fourredstars.jpg);
|
|
background-repeat: repeat-x;'><tr><td>
|
|
This table has background image set which will repeat horizontally.
|
|
</td></tr></table>
|
|
|
|
<table style='background-image:url(fourredstars.jpg);
|
|
background-position:100px;'>
|
|
<tr><td>
|
|
Background image positioned 100 pixels away from the left.
|
|
</td></tr></table>
|
|
<br/>
|
|
<table style='background-image:url(fourredstars.jpg);
|
|
background-position:100px 200px;'>
|
|
<tr><td>
|
|
This table has background image positioned 100 pixels away from the left and 200 pixels from the top.
|
|
</td></tr></table>
|
|
|
|
<p style='background-image:url(fourredstars.jpg); background-attachment:fixed;'>
|
|
This para has fixed background image.</p>
|
|
|
|
<p style='background-image:url(fourredstars.jpg); background-attachment: scroll;'>
|
|
This para has scrolling background image.
|
|
</p>
|
|
|
|
<p style='background:url(fourredstars.jpg) repeat fixed;'>
|
|
This para has fixed repeated background image.</p>
|
|
<!-- It is able to use the background property to set all the background properties at once.-->
|
|
|
|
<p style='font-family:georgia,garamond,serif;'>
|
|
This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.
|
|
</p>
|
|
|
|
<p style='font-style:italic;'>This text will be rendered in italic style.</p>
|
|
|
|
<p style='font-variant:small-caps;'>This text will be rendered as small caps</p>
|
|
|
|
<p style='font-weight:bold;'>This font is bold.</p>
|
|
<p style='font-weight:bolder;'>This font is bolder.</p>
|
|
<p style='font-weight:900;'>This font is 900 weight</p>
|
|
|
|
<p style='font-size:20px;'>This font size is 20 pixels</p>
|
|
<p style='font-size:small;'>This font size is small</p>
|
|
<p style='font-size:large;'>This font size is large</p>
|
|
|
|
<p style='font-size-adjust:0.61;'>This text is using a font-size-adjust value.</p>
|
|
<!-- using a font-size-adjust value enables you to adjust the x-height to make fonts more legible.-->
|
|
|
|
<p style="font:italic small-caps bold 15px georgia;">
|
|
Applying all the properties on the text at once.
|
|
</p>
|
|
|
|
<p style="color:red">This text will be wrtten in red.</p>
|
|
|
|
<p style="direction:rtl;">This text will be renedered from right to left</p>
|
|
|
|
<p style="letter-spacing:5px;">This text is having space between letters.</p>
|
|
|
|
<p style="word-spacing:5px;">This text is having space between words.</p>
|
|
|
|
<p style="txt-indent:1cm;">
|
|
This text will have first line indented by 1cm
|
|
and this line will remain at its actual position
|
|
this is done by CSS text-indent property.
|
|
</p>
|
|
|
|
<p style="text-align:right;">This will be right aligned.</p>
|
|
<p style='text-align:center;'>This will be center aligned.</p>
|
|
<p style='text-align:left;'>This will be left aligned.</p>
|
|
|
|
<p style='text-transform:capitalize;'>This will be capitalized</p>
|
|
<p style='text-transform:uppercase;'>This will be uppercase</p>
|
|
<p style='text-transform:lowercase;'>This will be lowercase</p>
|
|
|
|
<p style='white-space:pre;'>This text has a line break
|
|
and the white-space pre setting tells the browser to honor it
|
|
just like the HTML pre tag.</p>
|
|
<!--set the white space between text-->
|
|
|
|
<p style='text-shadow:4px 4px 8px blue;'>
|
|
If your browser supports the CSS text-shadow property,
|
|
this text will have a blue shadow.
|
|
</p>
|
|
<!-- set the text shadow -->
|
|
|
|
<img style='border:0px;' src='fourredstars.jpg'/>
|
|
<br/>
|
|
<img style='border:3px dashed red;' src='fourredstars.jpg'/>
|
|
<!--the image border property-->
|
|
<p>The image height property</p>
|
|
<img style='border:1px solid red; height:100px;'
|
|
src='fourredstars.jpg'/>
|
|
<br/>
|
|
<img style='border:1px solid red; height:50px;'
|
|
src='fourredstars.jpg'/>
|
|
|
|
|
|
<p>The image wedth property</p>
|
|
<img style='border:1px solid red; width:100px;'
|
|
src='fourredstars.jpg'/>
|
|
<br/>
|
|
<img style='border:1px solid red; width:100%;'
|
|
src='fourredstars.jpg'/>
|
|
|
|
|
|
<img style='border:1px solid red;-moz-opacity:0.4;filter:alpha(opacity=40);'
|
|
src='fourredstars.jpg'/>
|
|
<br>
|
|
<a href="newhtml.html">Click Here to go to second page</a><br>
|
|
<a href="secondhtml.html">Click Here to go to third page</a>
|
|
</body>
|
|
</html>
|