Learning Web Design - How to Load CCS 1st Before HTML

How to Load CCS 1st Before HTML

Home > Chapter Review and Exercises > Chapter 11 - Intro to CSS > How to Load CCS 1st Before HTML

The HTML text appears first, and eventually, the CSS takes effect later, much later in this example: 11 seconds.

One Possible Solution

In this example, there are three style sheets that are being loaded, style1.css, style2.css, and style3.css. To force these style sheets to load fist, before the HTML, put a style for hiding your site at the start of the .html file like this:

<!Doctype>

<html>

<head>

<style>

html {

visibility: hidden;

opacity: 0;

}

</style>

This guarantees that your html does not show until all the css files have been loaded. The aesthetically unappealing transition that happened in the example above is avoided. This is also a recommended solution for supporting devices/browsers that don't have Javascript enabled. The two CSS declarations used in the html selector are explained here:

visibility: hidden is a CSS property value that hides an element from view but retains its allocated space within the document layout.

Here are the key characteristics of visibility: hidden:

Hides the element visually: The element will not be rendered on the screen.
Retains space: The element still occupies its original space in the document flow, meaning other elements will not shift to fill the gap. Margins and padding of the hidden element will still affect the layout.
Not interactive: Elements with visibility: hidden are not clickable, and events such as onclick or hover effects will not be triggered.
Accessibility impact: Elements with visibility: hidden are typically removed from the accessibility tree, meaning screen readers and other assistive technologies will not announce them.
Not animatable: The visibility property itself cannot be directly animated using CSS transitions or animations.
Comparison to display: none: Unlike display: none, which completely removes the element from the document flow and allows other elements to occupy its space, visibility: hidden maintains the element's presence in the layout.
Comparison to opacity: 0: While opacity: 0 also makes an element invisible, it still allows for interaction (e.g., clicking, hovering) and can be animated. visibility: hidden is a stronger form of hiding as it removes interactivity.

0 opacity means an element is completely transparent and invisible, allowing you to see everything behind it as if it weren't there, but it still occupies space and can often still be interacted with (unlike display: none). It's a numerical value (0 to 1 or 0% to 100%) used in design and web development (CSS) to control visibility, where 0 is fully see-through and 1 (or 100%) is fully solid/opaque.

Key Characteristics:

Transparency: The element lets all light pass through, making it fully invisible.
Space: It doesn't disappear from the layout; it still takes up its allocated space, so other elements don't shift to fill the gap.
Interaction: In CSS, elements with opacity: 0 can still be clickable or focusable, which differs from visibility: hidden or display: none

Then, after the last CSS file to be loaded in the <head> element, i.e. style3.css, put this:

<style>

html {

visibility: visible;

opacity: 1;

}

</style>

</head>

The CSS properties visibility: visible; and opacity: 1; are used to control the visual display of an HTML element.

visibility: visible;: This property makes an element visible on the page. When visibility is set to visible, the element and its content are rendered and take up space in the document flow. This is the default state for most elements.
opacity: 1;: This property sets the opacity level of an element. An opacity value of 1 (or 100%) means the element is fully opaque, meaning it is not transparent at all. An opacity value of 0 would make the element completely transparent (invisible), while values between 0 and 1 would result in varying levels of translucency.
In combination, visibility: visible; opacity: 1; ensures that an element is both rendered in the document flow and fully opaque, making it completely visible to the user.

Report abuse