Archive
This commit is contained in:
parent
f8f4984bd3
commit
e82af6ed59
5 changed files with 720 additions and 0 deletions
BIN
css/fourredstars.jpg
Executable file
BIN
css/fourredstars.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
212
css/index.html
Executable file
212
css/index.html
Executable file
|
|
@ -0,0 +1,212 @@
|
|||
<!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>
|
||||
337
css/newhtml.html
Executable file
337
css/newhtml.html
Executable file
|
|
@ -0,0 +1,337 @@
|
|||
<!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>
|
||||
<title>New HTML Page</title>
|
||||
<link href="/_img/_juyounglee.tk/favicon.ico" rel="icon" type="image/x-icon"/>
|
||||
<style type="text/css">
|
||||
*{font-size: 20px;}
|
||||
a:link {color: #000000}
|
||||
a:visited {color: #006600}
|
||||
a:hover {color: #ffcc00}
|
||||
a:active {color: #ff00cc} /* See "Links" on index.html*/
|
||||
|
||||
table.one {bolder-collapse:collapse;}
|
||||
table.two {border-collapse:separate;}
|
||||
td.a {
|
||||
border-style:dotted;
|
||||
border-width:3px;
|
||||
border-color:#000000;
|
||||
padding: 10px;
|
||||
}
|
||||
td.b {border-style:solid;
|
||||
border-width: 3px;
|
||||
border-color: #333333;
|
||||
padding: 10px;
|
||||
} /* the border-collapse property */
|
||||
|
||||
td.three {border-collapse:separate;
|
||||
width:400px;
|
||||
border-spacing:10px;
|
||||
}
|
||||
td.four {border-collapse:separate;
|
||||
width:400px;
|
||||
border-spacing:10px 50px;
|
||||
} /*The border-spacing property*/
|
||||
|
||||
caption.top {caption-side:top}
|
||||
caption.bottom {caption-side:bottom}
|
||||
/* The caption-side property */
|
||||
|
||||
|
||||
/* The empty-cells Property */
|
||||
table.empty{
|
||||
width:350px;
|
||||
border-collapse:separate;
|
||||
empty-cells:hide;
|
||||
}
|
||||
td.empty{
|
||||
padding:5px;
|
||||
border-style:solid;
|
||||
border-width:1px;
|
||||
border-color:#999999;
|
||||
}
|
||||
|
||||
/*the table-layout property*/
|
||||
table.auto
|
||||
{
|
||||
table-layout: auto
|
||||
}
|
||||
table.fixed
|
||||
{
|
||||
table-layot: fixed
|
||||
}
|
||||
|
||||
/* The border-color Property */
|
||||
p.example1{
|
||||
border:1px solid;
|
||||
border-bottom-color:#009900; /* green */
|
||||
border-top-color:#ff0000; /* red */
|
||||
border-left-color:#330000; /* black */
|
||||
border-right-color:#0000cc; /* blue */
|
||||
}
|
||||
p.example2{
|
||||
border:1px solid;
|
||||
border-color:#009900; /* green */
|
||||
}
|
||||
|
||||
/*the margin property*/
|
||||
|
||||
</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="index.html">Click Here to go to first page</a><br>
|
||||
<a href="secondhtml.html">Click Here to go to third page</a>
|
||||
<h2>The border-collapse Property</h2>
|
||||
<table class="one">
|
||||
<caption>Collapse Border Example</caption>
|
||||
<tr><td class="a"> Cell A Collapse Example</td></tr>
|
||||
<tr><td class="b"> Cell B Collapse Example</td></tr>
|
||||
</table>
|
||||
<br/>
|
||||
<table class="two">
|
||||
<caption>Separate Border Example</caption>
|
||||
<tr><td class="a"> Cell A Separate Example</td></tr>
|
||||
<tr><td class="b"> Cell B Separate Example</td></tr>
|
||||
</table>
|
||||
|
||||
<h2>The border-spacing Property</h2>
|
||||
<table class="one" border="1">
|
||||
<caption>Collapse Border Example with border-spacing</caption>
|
||||
<tr><td> Cell A Collapse Example</td></tr>
|
||||
<tr><td> Cell B Collapse Example</td></tr>
|
||||
</table>
|
||||
<br/>
|
||||
<table class="two" border="1">
|
||||
<caption>Separate Border Example with border-spacing</caption>
|
||||
<tr><td> Cell A Separate Example</td></tr>
|
||||
<tr><td> Cell B Separate Example</td></tr>
|
||||
</table>
|
||||
|
||||
<h2>The caption-side Property</h2>
|
||||
<table style="width:400px; border:1px solid black;">
|
||||
<caption class="top">
|
||||
This caption will appear at the top
|
||||
</caption>
|
||||
<tr><td> Cell A</td></tr>
|
||||
<tr><td> Cell B</td></tr>
|
||||
</table>
|
||||
<br/>
|
||||
<table style="width:400px; border:1px solid black;">
|
||||
<caption class="bottom">
|
||||
This caption will appear at the bottom
|
||||
</caption>
|
||||
<tr><td> Cell A</td></tr>
|
||||
<tr><td> Cell B</td></tr>
|
||||
</table>
|
||||
<!-- pg.33 -->
|
||||
|
||||
<h2>The empty-cells Property</h2>
|
||||
<table class="empty">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title one</th>
|
||||
<th>Title two</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Row Title</th>
|
||||
<td class="empty">value</td>
|
||||
<td class="empty">value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Row Title</th>
|
||||
<td class="empty">value</td>
|
||||
<td class="empty">value</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2>The table-layout Property</h2>
|
||||
<table class="auto" border="1" width="100%">
|
||||
<tr>
|
||||
<td width="20%">1000000000000000000000000000</td>
|
||||
<td width="40%">10000000</td>
|
||||
<td width="40%">100</td></tr>
|
||||
</table>
|
||||
|
||||
<h2>The border-style Property</h2>
|
||||
<p><ul>
|
||||
<li>none: No border. (Equivalent of border-width:0;)</li>
|
||||
<li>solid: Border is a single solid line.</li>
|
||||
<li>dotted: Border is a series of dots.</li>
|
||||
<li>dashed: Border is a series of short lines.</li>
|
||||
<li>double: Border is two solid lines.</li>
|
||||
<li>groove: Border looks as though it is carved into the page.</li>
|
||||
<li>ridge: Border looks the opposite of groove.</li>
|
||||
<li>inset: Border makes the box look like it is embedded in the page.</li>
|
||||
<li>outset: Border makes the box look like it is coming out of the canvas.</li>
|
||||
<li>hidden: Same as none, except in terms of border-conflict resolution for table elements.</li>
|
||||
</ul>
|
||||
<p class="example1">This example is showing all borders in different colors.</p>
|
||||
<p class="example2">This example is showing all borders in green color only.</p>
|
||||
|
||||
<p style="border-width:4px; border-style:none;">
|
||||
This is a border with none width.</p>
|
||||
<p style="border-width:10px; border-style:groove; border-color:red;">
|
||||
This is a border with groove border.</p>
|
||||
<p style="border-width:10px; border-style:inset; border-color:blue;">
|
||||
This is a border with inset border.</p>
|
||||
<p style="border-width:10px; border-style:dashed; border-color:green;">
|
||||
This is a border with dashed border.</p>
|
||||
<p style="border-bottom-style:dotted; border-bottom-color:red;
|
||||
border-top-style:dashed; border-top-color:blue;
|
||||
border-left-style:double; border-left-color:green;
|
||||
border-right-style:inset; border-right-color:black;">
|
||||
This is a border with different styles.</p>
|
||||
|
||||
|
||||
<h2>The border-width Property</h2>
|
||||
<p style="border-width:4px; border-style:solid;">
|
||||
This is a solid border whose width is 4px.
|
||||
</p>
|
||||
<p style="border-width:4pt; border-style:solid;">
|
||||
This is a solid border whose width is 4pt.
|
||||
</p>
|
||||
<p style="border-width:thin; border-style:solid;">
|
||||
This is a solid border whose width is thin.
|
||||
</p>
|
||||
<p style="border-width:medium; border-style:solid;">
|
||||
This is a solid border whose width is medium.
|
||||
</p>
|
||||
<p style="border-width:thick; border-style:solid;">
|
||||
This is a solid border whose width is thick.
|
||||
</p>
|
||||
<p style="border-bottom-width:4px;
|
||||
border-top-width:10px;
|
||||
border-left-width:2px;
|
||||
border-right-width:15px;
|
||||
border-style:solid;">
|
||||
This is a border with four different width.
|
||||
</p>
|
||||
|
||||
<h2>Border Properties using shorthand</h2>
|
||||
<p style="border:4px solid red;">
|
||||
This example is showing shorthand property for border.
|
||||
</p>
|
||||
|
||||
<h1>CSS - Margins</h1>
|
||||
<ul>
|
||||
<li>margin</li>
|
||||
<li>margin-bottom</li>
|
||||
<li>margin-top</li>
|
||||
<li>margin-left</li>
|
||||
<li>margin-right</li>
|
||||
</ul>
|
||||
<h2>The margin Property</h2> <!-- See Line 75 -->
|
||||
<p style="margin: 15px; border:1px solid black;">
|
||||
all four magins will be 15px
|
||||
</p>
|
||||
<p style="margin: 10px 2% -10px; border:1px solid black;">
|
||||
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
|
||||
</p>
|
||||
<p style="margin: 10px 2% -10px auto; border:1px solid black;">
|
||||
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser.
|
||||
</p>
|
||||
<br/>
|
||||
<p style="margin: 1px -8px 1px -8px;
|
||||
border-bottom-width:10px; border-top-width:10px; border-left-width:100px; border-right-width:400px;
|
||||
border-style:solid; border-color:blue; background-color:white;
|
||||
color:black; font-family:arial; font-size:16px">
|
||||
Facebook Header Example with CSS Margin </p>
|
||||
|
||||
<h1>CSS - Lists (pg.43)</h1>
|
||||
<ol><li>list-style-type: control shape or appearance of the marker</li>
|
||||
<li>list-style-position</li>
|
||||
<li>list-style-image</li>
|
||||
<li>list-style</li>
|
||||
<li><strike>marker-offset: specifies distance btw a marker and text in the list.</strike>-Not supported in IE6</li></ol>
|
||||
<hr>
|
||||
|
||||
<h2>1.The list-style-type Property:</h2>
|
||||
<p>list-style-type: 'disc' is default; a filed-in circle</p>
|
||||
|
||||
<ul style="list-style-type:circle;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ul>
|
||||
|
||||
<ul style="list-style-type:square;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ul>
|
||||
|
||||
<ol style="list-style-type:decimal;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ol>
|
||||
|
||||
<ol style="list-style-type:lower-alpha;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ol>
|
||||
|
||||
<ol style="list-style-type:lower-roman;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
<h2>2.The list-style-position Property:</h2>
|
||||
<ul style="list-style-position:outside;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ul>
|
||||
|
||||
<ul style="list-style-position:inside;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ul>
|
||||
|
||||
<ol style="list-style-position:outside;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ol>
|
||||
|
||||
<ol style="list-style-position:inside;">
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>English</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
<h2>3.The list-style-image Property</h2>
|
||||
<p>the <em>list-style-image</em> allows you to specify an image so that you can use your own bullet style.</p>
|
||||
<hr>
|
||||
<h2>4. The list-style Property</h2>
|
||||
<p>The <em>list-style</em> allows you to specify all the list properties into a single expression.</p>
|
||||
<strong>Example</strong></br>
|
||||
|
||||
<ul style='list-style: inside square;'>
|
||||
<li>Maths</li>
|
||||
<li>Computer Science</li>
|
||||
<li>Korean</li>
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<!-- page. 48 -->
|
||||
|
||||
<a href="secondhtml.html">Click Here to go to third page</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
170
css/secondhtml.html
Executable file
170
css/secondhtml.html
Executable file
|
|
@ -0,0 +1,170 @@
|
|||
<!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>
|
||||
<title>Second HTML Page</title>
|
||||
<meta charset="UTF-8">
|
||||
<link href="/_img/_juyounglee.tk/favicon.ico" rel="icon" type="image/x-icon"/>
|
||||
<style type="text/css">
|
||||
a:link {color: #000000}
|
||||
a:visited {color: #006600}
|
||||
a:hover {color: #ffcc00}
|
||||
a:active {color: #ff00cc} /* See "Links" on index.html*/
|
||||
*{font-size: 20px;}
|
||||
|
||||
|
||||
.scroll{
|
||||
display:block;
|
||||
border: 1px solid red;
|
||||
padding:5px;
|
||||
margin-top:5px;
|
||||
width:300px;
|
||||
height:50px;
|
||||
overflow:scroll;
|
||||
}
|
||||
.auto{
|
||||
display:block;
|
||||
border: 1px solid red;
|
||||
padding:5px;
|
||||
margin-top:5px;
|
||||
width:300px;
|
||||
height:50px;
|
||||
overflow:auto;
|
||||
}
|
||||
/* CSS - Scrollbars */
|
||||
</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="index.html">Click Here to go to first page</a><br>
|
||||
<a href="newhtml.html">Click Here to go to second page</a>
|
||||
<!-- pg.48 -->
|
||||
<h2>CSS - Paddings</h2>
|
||||
<p>allows you to specify how much space should appear btw the content of an element and its border</p>
|
||||
<ul><li>the <strong>padding-bottom</strong></li>
|
||||
<li>the <strong>padding-top</strong></li>
|
||||
<li>the <strong>padding-left</strong></li>
|
||||
<li>the <strong>padding-right</strong></li>
|
||||
</ul>
|
||||
<h3>the padding property</h3>
|
||||
<p style="padding: 15px; border: 1px solid black;">all four padding will be 15px</p>
|
||||
|
||||
<p style="padding:10px 2% 10px; border:1px solid green">
|
||||
top padding will be 10px, left/right padding will be 2% of the total width of the document, bottom padding will be 10px
|
||||
</p>
|
||||
|
||||
<p style="padding:50px 30% 20px 20px ; border:2px solid red">
|
||||
top 50px, right 30% width of the document, bottom/top 20px
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>CSS - Cursors</h1>
|
||||
<!-- pg.51 -->
|
||||
<p>Move the mouse over the words to see the cursor change;</p>
|
||||
<div style="cursor:auto">Auto</div>
|
||||
<div style="cursor:crosshair">Crosshair</div>
|
||||
<div style="cursor:default">Default</div>
|
||||
<div style="cursor:pointer">Pointer</div>
|
||||
<div style="cursor:move">Move</div>
|
||||
<div style="cursor:e-resize">e-resize</div>
|
||||
<div style="cursor:ne-resize">ne-resize</div>
|
||||
<div style="cursor:nw-resize">nw-resize</div>
|
||||
<div style="cursor:n-resize">n-resize</div>
|
||||
<div style="cursor:se-resize">se-resize</div>
|
||||
<div style="cursor:sw-resize">sw-resize</div>
|
||||
<div style="cursor:s-resize">s-resize</div>
|
||||
<div style="cursor:w-resize">w-resize</div>
|
||||
<div style="cursor:text">text</div>
|
||||
<div style="cursor:wait">wait</div>
|
||||
<div style="cursor:help">help</div>
|
||||
|
||||
|
||||
<h2>CSS - Outlines</h2>
|
||||
<ul><li>The<strong> outline-width</strong></li>
|
||||
<li>The<strong> outline-style</strong></li>
|
||||
<li>The<strong> outline-color</strong></li>
|
||||
<li>The<strong> outline</strong></li></ul>
|
||||
<br>
|
||||
<p style="outline:thin solid red;">
|
||||
This text is having thin solid red outline.
|
||||
</p>
|
||||
<br />
|
||||
<p style="outline:thick dashed #009900;">
|
||||
This text is having thick dashed green outline.
|
||||
</p>
|
||||
<br />
|
||||
<p style="outline:5px dotted rgb(13,33,232);
|
||||
border:5px solid red; box-shadow:inset 0 2px 45px #999;">
|
||||
This text is having 5x dotted blue outline.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
<h2>CSS - Dimension</h2>
|
||||
<ul style="list-style-type:circle;"><li>height</li>
|
||||
<li>width</li>
|
||||
<li>line-height</li>
|
||||
<li>max-height</li>
|
||||
<li>min-height</li>
|
||||
<li>max-width</li>
|
||||
<li>min-width</li></ul>
|
||||
|
||||
<h3>1) the line-height property</h3>
|
||||
<p style="width:400px; height:100px;border:1px solid red;
|
||||
padding:5px; margin:10px;line-height:30px;">
|
||||
This paragraph is 400pixels wide and 100 pixels high
|
||||
and here line height is 30pixels.This paragraph is 400 pixels
|
||||
wide and 100 pixels high and here line height is 30pixels.
|
||||
</p>
|
||||
|
||||
<h3>2) the max-height property</h3>
|
||||
<p style="width:400px; max-height:10px;border:1px solid red;
|
||||
padding:5px; margin:10px;">
|
||||
This paragraph is 400px wide and max height is 10px
|
||||
This paragraph is 400px wide and max height is 10px
|
||||
This paragraph is 400px wide and max height is 10px
|
||||
This paragraph is 400px wide and max height is 10px
|
||||
</p>
|
||||
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
||||
|
||||
<h3>3) the min-height property</h3>
|
||||
<p style="width:400px; min-height:200px;border:1px solid red;
|
||||
padding:5px; margin:10px;">
|
||||
This paragraph is 400px wide and min height is 200px
|
||||
This paragraph is 400px wide and min height is 200px
|
||||
This paragraph is 400px wide and min height is 200px
|
||||
This paragraph is 400px wide and min height is 200px
|
||||
</p>
|
||||
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
||||
|
||||
<!-- http://www.tutorialspoint.com/css/css_dimension.htm -->
|
||||
|
||||
<br/>
|
||||
<hr>
|
||||
<h1>CSS - Scrollbars</h1>
|
||||
<p>Example of scroll value:</p>
|
||||
<div class="scroll">
|
||||
I am going to keep lot of content here just to show
|
||||
you how scrollbars works if there is an overflow in
|
||||
an element box. This provides your horizontal as well
|
||||
as vertical scrollbars.
|
||||
</div>
|
||||
<br />
|
||||
<p>Example of auto value:</p>
|
||||
<div class="auto">
|
||||
I am going to keep lot of content here just to show
|
||||
you how scrollbars works if there is an overflow in
|
||||
an element box. This provides your horizontal as well
|
||||
as vertical scrollbars.
|
||||
</div>
|
||||
|
||||
<!-- You just finished Tutorial for CSS!!
|
||||
Date: 12/13/2013 1:30AM -->
|
||||
</body>
|
||||
</html>
|
||||
1
css/style.css
Executable file
1
css/style.css
Executable file
|
|
@ -0,0 +1 @@
|
|||
|
||||
Reference in a new issue