There are initial points to take into consideration in order to make sense of the connection between HTML elements (<p>, <a>, <div>, etc.) and CSS properties (display, font-size, background-color, etc.).
- The nature of the HTML element
- The purpose of the HTML element
You might notice that it is all about HTML elements. This is because HTML elements already have implicit CSS rules in them thru the browser. It is called the User Agent Styles or browser default styles.
Now your question borders around creating your own styles, thus, overriding the default styles.
<p>
Let’s take for example the HTML Paragraph element as created thru the <p> tag.
Its nature is that it is a block-level element and its usual purpose is to markup paragraphs – which are, essentially, texts.
Now, the question is – what do you want to do with that paragraph?
If you want to increase the font size of the paragraph, the CSS font-size property will do it.
<a>
How about the HTML Anchor element as created thru the <a> tag?
Its nature is that it is an inline-level element and its purpose is to markup texts, images, etc. to denote that it has a link to a resource (it becomes a text with a link or an image with a link, etc.).
Now, the question is – what do you want to do with that link?
If you want to make the text link look like a button that is as wide as the viewport, then the CSS display, background-color, and color properties will do the job.
Make no mistake of experimenting what works and what doesn’t in a random manner.
Begin by identifying that thing you want to manipulate (the HTML element) and identify how to manipulate it (by CSS properties).
The Developer Tool > Inspect of browsers will save you a ton of time.
Leave a Reply