From e82af6ed590e87e6fa2e2d2d51017fec352f3c2c Mon Sep 17 00:00:00 2001 From: juyung Date: Tue, 10 Dec 2013 15:21:28 -0800 Subject: [PATCH] Archive --- css/fourredstars.jpg | Bin 0 -> 3349 bytes css/index.html | 212 +++++++++++++++++++++++++++ css/newhtml.html | 337 +++++++++++++++++++++++++++++++++++++++++++ css/secondhtml.html | 170 ++++++++++++++++++++++ css/style.css | 1 + 5 files changed, 720 insertions(+) create mode 100755 css/fourredstars.jpg create mode 100755 css/index.html create mode 100755 css/newhtml.html create mode 100755 css/secondhtml.html create mode 100755 css/style.css diff --git a/css/fourredstars.jpg b/css/fourredstars.jpg new file mode 100755 index 0000000000000000000000000000000000000000..ceb5918b1907eea4e57ecd4cf7c4469c5b032c1a GIT binary patch literal 3349 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 literal 0 HcmV?d00001 diff --git a/css/index.html b/css/index.html new file mode 100755 index 0000000..479bf0e --- /dev/null +++ b/css/index.html @@ -0,0 +1,212 @@ + + + + + + + CSS Tutorial + + + + + +
+ Created by Juyoung. Built this site while I was teaching myself HTML and CSS. +
+ Click Here to go to second page
+ Click Here to go to third page +

This is head 1 paragraph.

+

This is head 2 paragraph.

+

This is head 3 paragraph

+

This is a paragraph.

+ +
  • 1st
    • +
  • 2nd
    • +
  • 3rd
    • +
  • 4th
    • +
  • 5th
+ +

Links

+
+Black Link +
+Click this Link +
+Bring Mouse Here + +
+ Id: + +
+ Password: + + +
+ +

Some English text in a paragraph.

+ +

This para will be styled by the classes center and bold

+ + +

This text has yellow background color.

+ + +
+ This table has background image set. +
+ +
+ This table has background image which repeats multiple times. +
+ +
+ This table has background image set which will repeat vertically. +
+ +
+ This table has background image set which will repeat horizontally. +
+ + +
+ Background image positioned 100 pixels away from the left. +
+
+ +
+ This table has background image positioned 100 pixels away from the left and 200 pixels from the top. +
+ +

+ This para has fixed background image.

+ +

+ This para has scrolling background image. +

+ +

+ This para has fixed repeated background image.

+ + +

+ This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. +

+ +

This text will be rendered in italic style.

+ +

This text will be rendered as small caps

+ +

This font is bold.

+

This font is bolder.

+

This font is 900 weight

+ +

This font size is 20 pixels

+

This font size is small

+

This font size is large

+ +

This text is using a font-size-adjust value.

+ + +

+ Applying all the properties on the text at once. +

+ +

This text will be wrtten in red.

+ +

This text will be renedered from right to left

+ +

This text is having space between letters.

+ +

This text is having space between words.

+ +

+ 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. +

+ +

This will be right aligned.

+

This will be center aligned.

+

This will be left aligned.

+ +

This will be capitalized

+

This will be uppercase

+

This will be lowercase

+ +

This text has a line break + and the white-space pre setting tells the browser to honor it + just like the HTML pre tag.

+ + +

+ If your browser supports the CSS text-shadow property, + this text will have a blue shadow. +

+ + + +
+ + +

The image height property

+ +
+ + + +

The image wedth property

+ +
+ + + + +
+Click Here to go to second page
+ Click Here to go to third page + + diff --git a/css/newhtml.html b/css/newhtml.html new file mode 100755 index 0000000..da57506 --- /dev/null +++ b/css/newhtml.html @@ -0,0 +1,337 @@ + + + + + New HTML Page + + + + + + +
+ Created by Juyoung. Built this site while I was teaching myself HTML and CSS. +
+ Click Here to go to first page
+ Click Here to go to third page +

The border-collapse Property

+ + + + +
Collapse Border Example
Cell A Collapse Example
Cell B Collapse Example
+
+ + + + +
Separate Border Example
Cell A Separate Example
Cell B Separate Example
+ +

The border-spacing Property

+ + + + +
Collapse Border Example with border-spacing
Cell A Collapse Example
Cell B Collapse Example
+
+ + + + +
Separate Border Example with border-spacing
Cell A Separate Example
Cell B Separate Example
+ +

The caption-side Property

+ + + + +
+ This caption will appear at the top +
Cell A
Cell B
+
+ + + + +
+ This caption will appear at the bottom +
Cell A
Cell B
+ + +

The empty-cells Property

+ + + + + + + + + + + + + + + + +
Title oneTitle two
Row Titlevaluevalue
Row Titlevaluevalue
+ +

The table-layout Property

+ + + + + +
100000000000000000000000000010000000100
+ +

The border-style Property

+

    +
  • none: No border. (Equivalent of border-width:0;)
    • +
  • solid: Border is a single solid line.
    • +
  • dotted: Border is a series of dots.
    • +
  • dashed: Border is a series of short lines.
    • +
  • double: Border is two solid lines.
    • +
  • groove: Border looks as though it is carved into the page.
    • +
  • ridge: Border looks the opposite of groove.
    • +
  • inset: Border makes the box look like it is embedded in the page.
    • +
  • outset: Border makes the box look like it is coming out of the canvas.
    • +
  • hidden: Same as none, except in terms of border-conflict resolution for table elements.
    • +
+

This example is showing all borders in different colors.

+

This example is showing all borders in green color only.

+ +

+ This is a border with none width.

+

+ This is a border with groove border.

+

+ This is a border with inset border.

+

+ This is a border with dashed border.

+

+ This is a border with different styles.

+ + +

The border-width Property

+

+ This is a solid border whose width is 4px. +

+

+ This is a solid border whose width is 4pt. +

+

+ This is a solid border whose width is thin. +

+

+ This is a solid border whose width is medium. +

+

+ This is a solid border whose width is thick. +

+

+ This is a border with four different width. +

+ +

Border Properties using shorthand

+

+ This example is showing shorthand property for border. +

+ +

CSS - Margins

+
    +
  • margin
    • +
  • margin-bottom
    • +
  • margin-top
    • +
  • margin-left
    • +
  • margin-right
    • +
+

The margin Property

+

+ all four magins will be 15px +

+

+ top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. +

+

+ 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. +

+
+

+    Facebook Header Example with CSS Margin

+ +

CSS - Lists (pg.43)

+
  1. list-style-type: control shape or appearance of the marker
    2. +
  2. list-style-position
    3. +
  3. list-style-image
    4. +
  4. list-style
    5. +
  5. marker-offset: specifies distance btw a marker and text in the list.-Not supported in IE6
+
+ +

1.The list-style-type Property:

+

list-style-type: 'disc' is default; a filed-in circle

+ +
    +
  • Maths
    • +
  • Computer Science
    • +
  • English
    • +
+ +
    +
  • Maths
    • +
  • Computer Science
    • +
  • English
    • +
+ +
    +
  1. Maths
    2. +
  2. Computer Science
    3. +
  3. English
    4. +
+ +
    +
  1. Maths
    2. +
  2. Computer Science
    3. +
  3. English
    4. +
+ +
    +
  1. Maths
    2. +
  2. Computer Science
    3. +
  3. English
    4. +
+ +
+

2.The list-style-position Property:

+
    +
  • Maths
    • +
  • Computer Science
    • +
  • English
    • +
+ +
    +
  • Maths
    • +
  • Computer Science
    • +
  • English
    • +
+ +
    +
  1. Maths
    2. +
  2. Computer Science
    3. +
  3. English
    4. +
+ +
    +
  1. Maths
    2. +
  2. Computer Science
    3. +
  3. English
    4. +
+ +
+

3.The list-style-image Property

+

the list-style-image allows you to specify an image so that you can use your own bullet style.

+
+

4. The list-style Property

+

The list-style allows you to specify all the list properties into a single expression.

+ Example
+ +
    +
  • Maths
    • +
  • Computer Science
    • +
  • Korean
    • +
+
+ + + +Click Here to go to third page + + + diff --git a/css/secondhtml.html b/css/secondhtml.html new file mode 100755 index 0000000..3ff815f --- /dev/null +++ b/css/secondhtml.html @@ -0,0 +1,170 @@ + + + + + Second HTML Page + + + + + +
+ Created by Juyoung. Built this site while I was teaching myself HTML and CSS. +
+ Click Here to go to first page
+ Click Here to go to second page + +

CSS - Paddings

+

allows you to specify how much space should appear btw the content of an element and its border

+
  • the padding-bottom
    • +
  • the padding-top
    • +
  • the padding-left
    • +
  • the padding-right
    • +
+

the padding property

+

all four padding will be 15px

+ +

+ top padding will be 10px, left/right padding will be 2% of the total width of the document, bottom padding will be 10px +

+ +

+ top 50px, right 30% width of the document, bottom/top 20px +

+ +
+ +

CSS - Cursors

+ +

Move the mouse over the words to see the cursor change;

+
Auto
+
Crosshair
+
Default
+
Pointer
+
Move
+
e-resize
+
ne-resize
+
nw-resize
+
n-resize
+
se-resize
+
sw-resize
+
s-resize
+
w-resize
+
text
+
wait
+
help
+ + +

CSS - Outlines

+
  • The outline-width
    • +
  • The outline-style
    • +
  • The outline-color
    • +
  • The outline
+
+

+ This text is having thin solid red outline. +

+
+

+ This text is having thick dashed green outline. +

+
+

+ This text is having 5x dotted blue outline. +

+ +
+

CSS - Dimension

+
  • height
    • +
  • width
    • +
  • line-height
    • +
  • max-height
    • +
  • min-height
    • +
  • max-width
    • +
  • min-width
+ +

1) the line-height property

+

+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. +

+ +

2) the max-height property

+

+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 +

+logo + +

3) the min-height property

+

+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 +

+logo + + + +
+
+

CSS - Scrollbars

+

Example of scroll value:

+
+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. +
+
+

Example of auto value:

+
+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. +
+ + + + diff --git a/css/style.css b/css/style.css new file mode 100755 index 0000000..8d1c8b6 --- /dev/null +++ b/css/style.css @@ -0,0 +1 @@ +