diff --git a/a-tag-tutorial.html b/a-tag-tutorial.html index 7a4e2a1..9128897 100644 --- a/a-tag-tutorial.html +++ b/a-tag-tutorial.html @@ -1,20 +1,33 @@ - - - - - - - - a tag tutorial +a tag tutorial -

The simplest possible HTML page

+

The CSS Float Property

+

By Graham Coulter

-

Try editing the link and the content in this a tag. It's the miracle of HTML!

+

A tutorial on the intricacies of Float and Clear in CSS

+ The float property determines whether or not an element will float. Elements that are placed after the floating element will flow around it and can result in undesirable placement on the web page. To achieve desired placement the float property must be used in conjunction with the clear property. +

Example 1 (using float with clear):

+ Using the float property while applying clear: both; to the following element.css float and clear properties +

Example 2 (using float without clear):

+ Using the float property without applying the Clear property to the following elements. + css float and clear properties +

Using Float in HTML:

img src="url" alt="description" style="float:left; clear:"both;"
+

Using Float in CSS:

img {
+      float: left;
+      clear: both;
+}
+

Other ways to use float:

+ Float can also be used to float an image to the right in a paragraph. It also allow the first letter in a paragraph float to the left and separately stylized. +

Example 1 (floating an image to the right of text):

+ This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. + A buoy +

Example 2 (floating the first letter of a paragraph):

+ This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. +

In conclusion:

float can be used to create a horizontal menu and a homepage with a navbar, header, footer, left content and main content. diff --git a/tutorial.css b/tutorial.css index 31255d9..02c4abb 100644 --- a/tutorial.css +++ b/tutorial.css @@ -1,6 +1,119 @@ body { - font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + background-color: rgb(225, 218, 196); +} +code { + border: 2px solid rgb(242, 239, 230); + background: rgb(242, 239, 230); + border-radius: 5px; +} +h1 { + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",sans-serif; + font-weight: 500; + font-size: 32px; + line-height: 20px; + color: rgb(92, 111, 172); + text-align: center; + float: initial; + margin: 50 0 10px 0px; + border: 2px solid rgb(172, 111, 92); + border-radius: 5px; + line-height: 100px; +} +h2 { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; + font-size: 16px; + font-style: italic; + text-align: center; + line-height: 50px; + clear: both; + +} +h3 { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: rgb(172, 92, 111); + clear: both; +} +p1 { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; + font-size: 16px; + line-height: 22px; + color: rgb(0, 0, 0); + float: left; + clear: both; + margin: 0 0 24px 20px; + +} +p2 { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; + font-size: 16px; + line-height: 22px; + color: rgb(0, 0, 0); + float: left; + clear: both; + margin: 0 0 24px 20px; + width: 500px; +} +p3 { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; + font-size: 16px; + line-height: 22px; + color: rgb(0, 0, 0); + float: left; + margin: 0 0 10px 5px; + width: 500px; + +} +e1 { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: rgb(92, 111, 172); + float: left; + clear: both; + margin: 0 0 24px 20px; +} +e2 { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: rgb(92, 111, 172); + + margin: 0 0 24px 20px; +} +img { + width: 275px; + padding: 10px; +} +span { + font-family: "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 30px; + float: left; + color: rgb(92, 111, 172); + clear: both; + Float: Left; + line-height: 24px; + margin: 0 0px 0px; +} +pre { + font-weight: 400; font-size: 16px; line-height: 24px; + color: rgb(0, 0, 0); + float: left; + clear: both; + margin: 0 0 24px 24px; + background: rgb(400, 400, 400); + border: 2px solid rgb(400, 400, 400); + padding: 5px; + margin: 10px; + border-radius: 5px; }