Learn More

This is chapter 27, titled Expoloring The Mosts Popular HTML Widgets (Elements> Part 1

A few notes about the styling on this page

This page is connected to the style3 stylesheet, located in a folder named css here on the Neocities website. Here is how the link looks:

Essential elements of that stylesheet are the background color and border for the body, the heading styles, and very simple div styles of yellow background and white border.

The div element

Groups together elements for the purpose of styling!

Can also be used to make an anchor into its own block, but wrapping a link in a div: Like this: (THe div tag made the Home go to a new line, surrounded by the yellow like the dive before, but I removed it because I needed the div to style the elements below instead. I do not yet know how to put two differnt divs on a page!

The elements shown below were added in an earlier tutorial. I will leave them here because there are some good elements and CSS rules to go with them. The labels are fairly clear.

Now we will add a button, even though I won't use buttons much. It will have a class named "big" with these declaration pairs: color: red; padding: 30px; background-color: black; font-size: 4rem; border-radius: 30px;

The button also has a cursor value of "grab" and a pseudo-element (?) of hover, with a background value of yellow.

Following the button is an input frame, with some properties assigned when you click on it.

Testing the border radius with a lower level H4