VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE

I wanted to see whether I could put together this whole page using only the five HTML tags and five CSS properties I chose. I wanted the description and the example to be the same thing. It was not hard but it was very limiting :D

You don't have to do this BTW. You are free to do whatever you want to describe your tags and properties of choice. It's only when you write your example that you can't feature anything else. See what you can do with just five tags and five properties.

VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE

--------------------------------------- HTML TAG DESCRIPTIONS --------------------------------------

1.- title: This tag goes outside of the body tag, and it is used to display a title for the webpage in top side of the browser's window frame.

2.- style: The style tag lets me write CSS code in it. This is very useful to inject custom stylesheets into specific pages, or when things are simple enough, to have everything contained within the same file.

3.- body: The body is the topmost level of the hierarchy that will be rendered to the browser. All of the webpage's visible content should be inside the body.

4.- div: The div is the anonymous HTML tag. Think of it as a faceless token that is ready to wear any mask and adopt any identity. It has some default properties like most HTML tags do, but it's the one that comes with less baggage, since no specific role has been attributed to it.

5.- span: The span is almost like a div, except they both have opposite default values assigned to a CSS property called display. The div tag uses display:block, which causes a tag to render with a new line at the end, breaking the layout into a new paragraph. Conversely, the span tag uses display:inline, which will cause no break, permitting the flow of text to continue in the same line, but allowing to apply different attributes to the content in it, just like it just happened here.

VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE

--------------------------------------- CSS PROPERTY DESCRIPTIONS --------------------------------

1.- background: This property assigns a background to the tag attached to it. The background can be an image or a color. This color can be specified by name, hexadecimal code or RGBA.

2.- color: Alternatively, this property assigns a color to the text in the tag attached to it. This color can be specified by name, hexadecimal code or RGBA.

3.- margin: The margin property will set up margins AROUND a HTML element. It will take an input of up to four numbers and it will assign the first number to the top, the second to the left, the third to the bottom and the fourth to the right.

4.- padding: The padding property will set up margins INSIDE a HTML element. Just like with margins, It will take an input of up to four numbers and it will assign the first number to the top, the second to the left, the third to the bottom and the fourth to the right.

5.- width: The width property will simply set up the width of a specific HTML element. Fixing the width of a HTML element and setting this element's horizontal margin to auto will keep this element centered with respect to it's most immediate parent, even if the parent's size is changed dynamically. In this example, this is what keeps all the content floating in the center relative to the body's width.

VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE VIEW THE SOURCE