HTML& CSS Example Toolbox

Heading Examples

These are examples of heading sizes

Blue

Blue

Blue

Blue

Blue
Blue

Hyperlink Examples

This is a hyperlink to the Independence University web page
This is a hyperlink to the first link within the same page. The anchor tag is the container ID's to the second link.

    Ordered List Examples

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4


Male Female
Web Code Type


Changing the size of containers and fonts in code

You can change the width of the container using the width CSS property in the declaration

Second tip is that you can change the height of a container using the height CSS property in the declartion

Lastly, you can change the font size of the text and headings using the font size CSS property declartion

Now it is time to know how to change the color of backgrounds and font

You can set the background color of a container using the background CSS declaration. Backgrounds colors can be written as hexidecimal numbers, RGB numbers, or color names

You can also set the font color of text and headings using the CSS property declaration. Text colors can be hexidecimal numbers, RGB numbers or color names

Creating a border around a container

You can set the border properties of any container using CSS. CSS allows you to create border widths, styles and colors. Border styling can include dotted, dashed, solid, double, gapped, inset and outset. You can set the entire border or just one side of the container(top, bottom, left, right), using the CSS properties such as border-right in the declartion. This div container is styled using the double border style

Example of floating in a container

Container floated to the right

Creating space around a container

This div tag has a margin of 20px set on all four sides. You can set the margins of the entire container using the margin CSS property in the declararion or set the top, bottom, left, right or left individually as well. The margin properties are used to create space around elements, outside of any defined borders

Padding can be added to any type of element. This type of container has a padding of 20px added to it. The padding property is used to generate space around an element's content inside of the defined border.

CSS Font declaration Properties Examples

Google fonts

class="gFonts" To use Google Fonts you have to link to the Google font style sheet or using the @import command in your CSS style sheet. The font in this paragraph is a Google font using the link in head content to link Google's style sheet.

Web Safe Fonts

Serif Fonts

Sans Serif

Arial, Helvetica, "Arial Black", Gadget, "Comic Sans MS", cursive, Impact, Charcoal, "Lucida Sans Unicode", "Lucida Grande", Tahoma, Geneva, "Trebuchet MS", Helvetica, Verdana, Geneva

Monospace Fonts

"Courier New", Courier, "Lucida Console", Monaco

Underling Text

Use the text-decoration:underline in the declaration

Changing Font Weight

Use the font-weight:bold to make the text bold

Change the Font Style

Use the font-style-italic or normal or oblique

Changing the Variant of Text

Use the font-variant:small-caps or intial, or inherient

Changing Text to Uppercase

Use the text-transform:capitalize or uppercase, lowercase, initial or inherient

References

W3Schools (2020). HTML Tutorials. Retreived from W3Schools. Website: https://w3schools.com/html/default.asp

W3Schools (2020). CSS Tutorials. Retrieved from W3Schools. Website:https://w3schools.com/css/default/asp