Skip to content

Instantly share code, notes, and snippets.

@parvinderandroid

parvinderandroid/HTML with CSS.html

Created June 9, 2019 13:34
Show Gist options
  • Save parvinderandroid/a751bce521c3a4aed6ff26f2272838f5 to your computer and use it in GitHub Desktop.
Save parvinderandroid/a751bce521c3a4aed6ff26f2272838f5 to your computer and use it in GitHub Desktop.
Download ZIP
This is the code for my reddit post
Raw
HTML with CSS.html
<!DOCTYPE HTML>
<html>
<head>
<title>
HTML Basics
</title>
<style>
main {
padding: 20px;
background: wheat;
}
h1 {
font-family: fantasy, cursive, serif;
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}
p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: darkorchid;
}
li {
color: brown;
font-size: 20px;
}
dt {
font-size: 30px;
color: blue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
dd {
font-size: 20px;
color: blueviolet;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: italic;
}
</style>
</head>
<body>
<main>
Hello, World!
<!--
You'll not be able to see this
Because it's a comment
It can only be seen in an editor, or when viewing page source in browsers
-->
<!-- <p> is used for paragraphs -->
<!-- <br> is used to change the line, just like '\n' -->
<!-- <hr> is used to draw a horizontal line -->
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
<p>
1st Paragraph<br>
Second line of paragraph<br>
Third line of paragraph<br>
Fourth line of paragraph<br>
</p>
<p>
2nd Paragprah<br>
Second line of paragraph<br>
Third line of paragraph<br>
Fourth line of paragraph<br>
</p>
<hr>
<p>
3rd Paragprah<br>
Second line of paragraph<br>
Third line of paragraph<br>
Fourth line of paragraph<br>
</p>
<p>
4th Paragprah<br>
Second line of paragraph<br>
Third line of paragraph<br>
Fourth line of paragraph<br>
</p>
<!-- The <img src = "location or url of source"> tag is used to display an image -->
<img src = "Sample_Image_Low_Res.jpg">
<!--
An unordered list starts with the <ul> tag
Each list item starts with the <li>tag
The list items are marked with bullets
-->
<h1>Unordered List</h1>
<ul>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ul>
<h1>Unordered List with Disc Bullets(Default)</h1>
<ul style = "list-style-type:disc">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ul>
<h1>Unordered List with Circle Bullets</h1>
<ul style = "list-style-type:circle">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ul>
<h1>Unordered List with Square Bullets</h1>
<ul style = "list-style-type:square">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ul>
<!--
An ordered list starts with the <ol> tag
Each list item starts with the <li>tag
The list items are marked with numbers by default
-->
<h1>Ordered List</h1>
<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ol>
<h1>Ordered List with Numbers(Default)</h1>
<ol type = "1">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ol>
<h1>Ordered List with Uppercase Letters</h1>
<ol type = "A">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ol>
<h1>Ordered List with Lowercase Letters</h1>
<ol type = "a">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ol>
<h1>Ordered List with Uppercase Roman Numerals</h1>
<ol type = "I">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ol>
<h1>Ordered List with Lowercase Roman Numerals</h1>
<ol type = "i">
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ol>
<!--
A description list is a list of terms, with a description of each term
The <dl> tag defines the description list
the <dt> tag defines the term name
the <dd> tag describes each term
-->
<h1>Description List</h1>
<dl>
<dt>1st item</dt>
<dd>This is the 1st description</dd>
<dt>2nd item</dt>
<dd>This is the 2nd description</dd>
<dt>3rd item</dt>
<dd>This is the 3rd description</dd>
<dt>4th item</dt>
<dd>This is the 4th description</dd>
</dl>
<!-- A nested list is a list which has a list inside a list -->
<h1>Nested List (Unordered)</h1>
<ul>
<li>1st item</li>
<li>2nd item</li>
<ul>
<li>1st sub-item</li>
<li>2nd sub-item</li>
<li>3rd sub-item</li>
<li>4th sub-item</li>
</ul>
<li>3rd item</li>
<li>4th item</li>
</ul>
<h1>Nested List (Ordered)</h1>
<ol>
<li>1st item</li>
<li>2nd item</li>
<ol>
<li>1st sub-item</li>
<li>2nd sub-item</li>
<li>3rd sub-item</li>
<li>4th sub-item</li>
</ol>
<li>3rd item</li>
<li>4th item</li>
</ol>
<h1>Nested List (Mixed)</h1>
<ul>
<li>1st item</li>
<li>2nd item</li>
<ol>
<li>1st sub-item</li>
<li>2nd sub-item</li>
<dl>
<dt>1st term</dt>
<dd>1st description</dd>
<dt>2nd term</dt>
<dd>2nd description</dd>
<dt>3rd term</dt>
<dd>3rd description</dd>
<dt>4th term</dt>
<dd>4th description</dd>
</dl>
<li>3rd sub-item</li>
<li>4th sub-item</li>
</ol>
<li>3rd item</li>
<li>4th item</li>
</ul>
<h1>Formatted text</h1>
<b>Bold text</b><br>
<i>Italic text</i><br>
<u>Underlined text</u><br>
<center>Centered Text</center>
<b><i><u><center>Bold, Italic, Underlined and centered text</center></u></i></b><br>
<font size = 5 face = "Comic Sans MS" color = "red">Size 5 text in Comic Sans MS font and red colour</font><br>
<font size = "+1" face = "Comic Sans MS" color = AA5088>Size "+1" text in Comic Sans MS font and AA5088 colour</font><br>
<!--
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag.
A table header is defined with the <th> tag.
By default, table headings are bold and centered.
A table data/cell is defined with the <td> tag.
-->
<!--
The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
-->
<h1>Table</h1>
<table>
<tr>
<th>1st Column</th>
<th>2nd Column</th>
<th>3rd Column</th>
</tr>
<tr>
<td>1st Item</td>
<td>2nd Item</td>
<td>3rd Item</td>
</tr>
<tr>
<td>4th Item</td>
<td>5th Item</td>
<td>6th Item</td>
</tr>
<tr>
<td>7th Item</td>
<td>8th Item</td>
<td>9th Item</td>
</tr>
</table>
<!--
Syntax : <table border = "1|0">
-->
<h1>Table with border</h1>
<table border = "1">
<tr>
<th>1st Column</th>
<th>2nd Column</th>
<th>3rd Column</th>
</tr>
<tr>
<td>1st Item</td>
<td>2nd Item</td>
<td>3rd Item</td>
</tr>
<tr>
<td>4th Item</td>
<td>5th Item</td>
<td>6th Item</td>
</tr>
<tr>
<td>7th Item</td>
<td>8th Item</td>
<td>9th Item</td>
</tr>
</table>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment