Skip to content

Here it is. I've written a tutorial on CSS Float. #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Here it is. I've written a tutorial on CSS Float. #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 23 additions & 10 deletions a-tag-tutorial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,33 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>a tag tutorial</title>
<title>a tag tutorial</title>

<link rel="stylesheet" href="tutorial.css">
</head>

<body>
<h2> The simplest possible HTML page </h2>
<h1>The CSS <code>Float</code> Property</h1>
<h2>By Graham Coulter</h2>

<p>Try editing the link and the content in <a href="https://www.google.com">this a tag</a>. It's the miracle of HTML! </p>
<h3>A tutorial on the intricacies of <code>Float</code> and <code>Clear</code> in CSS</h3>
<p1>The <a href="https://www.w3schools.com/css/css_float.asp"><code>float</code> property</a> 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 <code>float</code> property must be used in conjunction with the <code>clear</code> property.</p1>
<h3><i><small>Example 1 (using <code>float</code> with <code>clear</code>):</small></i><h3>
<e1><small>Using the <code>float</code> property while applying <code>clear: both;</code> to the following element.</small></e1><e1b><img src="http://www.dennisplucinik.com/blog/wp-content/uploads/2012/04/CSS-Clear-Both.gif"alt="css float and clear properties"style="float:left;clear:both;"></e1b>
<h3><i><small>Example 2 (using <code>float</code> without <code>clear</code>):</small></i></h3>
<e2><small>Using the <code>float</code> property without applying the <code>Clear</code> property to the following elements.</small></e2>
<img src="http://www.dennisplucinik.com/blog/wp-content/uploads/2012/04/CSS-Clear-Both.gif" alt="css float and clear properties" style="float:left;">
<h3><i><small>Using <code>Float</code> in HTML:</small></i></h3><pre><code>img src="url" alt="description" style="float:left; clear:"both;"</code></pre>
<h3><i><small>Using <code>Float</code> in CSS:</small></i></h3><pre><code>img {
float: left;
clear: both;
}</code></pre>

<h3>Other ways to use <code>float</code>:</h3>
<e1><code>Float</code> 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.</e1>
<h3><i><small>Example 1 (floating an image to the right of text):</small></i></h3>
<p2>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.</p2>
<img src="https://maxcdn.icons8.com/Share/icon/Transport//buoy1600.png" alt="A buoy" alt="css float and clear properties" style="float:right;">
<h3><i><small>Example 2 (floating the first letter of a paragraph):</small></i></h3>
<span><i>T</i></span><p3>his 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.</p3>
<h3>In conclusion:</h3><p1><code>float</code> can be used to create a <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_float5">horizontal menu</a> and a homepage with a <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_webpage">navbar, header, footer, left content and main content</a>.</p1>
</body>

</html>
115 changes: 114 additions & 1 deletion tutorial.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}