Before learning how to declare your own classes, this section will look at the CSS elements.
Starting off with the basics, let’s look at styling text, specifically headings and paragraphs. You can style text by calling them in your stylesheet like this:
h1 {color: red;}
h2 {color: blue;}
h3 {color: black;}
h4 {color: grey;}
p {color: white;} In the example above, this styling would apply to every h1, h2, h3,h4 and paragraph text on your website. This is because there is no direct link to a specific container, page or part of the website.
This is not a bad thing! Most websites have universal styling for their headings and paragraph text because it keeps the site consistant.
div: Division or container
span: Inline container
section: Represents a section in a document
article: Represents an independent piece of content
header: Header section of a document or a section
footer: Footer section of a document or a section
nav: Navigation links
main: Main content of the document
aside: Sidebar or content related to the main content
p: Paragraph
h1, h2, h3, h4, h5, h6: Headings (from largest to smallest)
strong: Strong importance, typically bold
em: Emphasized text, typically italic
a: Anchor, hyperlink
blockquote: Block of text from another source
q: Inline quotation
ul: Unordered list
ol: Ordered list
li: List item
dl: Description list
dt: Term in a description list
dd: Description in a description list
form: Form container
input: Input field
textarea: Multi-line text input
button: Clickable button
select: Dropdown list
option: Option within a select
label: Label for an input field
img: Image
audio: Audio player
video: Video player
table: Table container
tr: Table row
th: Table header cell
td: Table data cell
thead: Table header group
tbody: Table body group
tfoot: Table footer group
caption: Table caption
br: Line break
hr: Horizontal rule
button: Clickable button
a: Anchor, hyperlink
input[type=”button”]: Button input
input[type=”text”]: Text input
input[type=”checkbox”]: Checkbox input
input[type=”radio”]: Radio button input
Ready to start building your web pages? Explore more tutorials on HTML, CSS, and JavaScript on HowCodingWorks and take your web development skills to the next level.
Quick Links
Social Media
