Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
- Mark up the structure in HTML
- Mark up the groups in HTML
- Mark up the individuals in HTML
There are initial points to take into consideration in order to make sense of the connection between HTML elements (
<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.
Previously, I’ve discussed a class naming convention in the form of:
In this manner we are using a UI State class located up in the DOM tree – particularly in the
body to manipulate different UI elements under it.
Take this as an example: in a site’s header, both the main navigation and search form are located.
<header> <h2 class="accessible-name">Header Content</h2> <nav class="main-navigation">…</nav> <form class="search-form">…</form> </header>
What benefit do we get in having a global
class located higher in the DOM tree? It lets us control different parts of the UI depending on the site’s or app’s UI Type or UI State.
It is important to reserve the highest element you can put a class on – which is
html (for pertinent class names), thus, the second highest element we could attach a
class attribute to is
Going back to our example, we would use the following UI State class to define the state of the search form:
body class, in words, translates to “The UI State of the Search Form is Active”.
Now, whenever the search form is active, you can already manipulate the main navigation based on that state.
Take a look at the demo on CodePen:
In this basic HTML and CSS tutorial, we are going to demonstrate the following:
- the separation of HTML (content structure) and CSS (visual design)
- how to position a secondary element (like a graphic element or a label) thru CSS
And some disclaimers:
- while it discusses semantics, it does not tackle accessibility attributes (say, ARIA)
- it does not show any SEO / screenreader test results regarding the benefits of an HTML markup with intentions on content structure or semantic HTML markup
- it only translates into HTML and CSS a specific component (from a much complicated whole), although the HTML and CSS process remains the same if applied to a whole