I am using Chrome DevTools to audit my website. In one of the web pages, it said "Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.". I try to click "Learn More" and go to this article https://developers.google.com/web/tools/lighthouse/audits/blocking-resources , which said for javascript, one can use defer/async, for css, one can define the media type.
But what if my css is not critical, but it is required for all media types. Then how to defer such a css?
Thanks
You can place your critical css in the head of your page, it will load before the body part, because css stylesheets are blocking.
And, you can put your non critical css at the end of the body, it will load after all the elements of the DOM.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/critical.css">
</head>
<body>
...
<link rel="stylesheet" href="/nonCritical.css">
</body> ...
add critical css to the head section .. like plain css..
defer all other styles ...
you may read more from here https://web.dev/defer-non-critical-css/ and look at the example below ..
PS: the best approach from my point of view: is to create some global styles and preload them .. create separate stylesheets for every page/component and insert them into the component itself to be loaded when the component is loaded.
that also depends heavily on the way/tool you are using to build the project ..
<!-- Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.accordion-btn {
width: 100%;
text-align: center;
font-size: 18px;
cursor: pointer;
color: #444;
background-color: #ADD8E6;
padding: 19px;
outline: none;
border: none;
border-radius: 2px;
}
.container {
display: none;
padding: 0 18px;
background-color: white;
overflow: hidden;
}
h1 {
word-spacing: 5px;
color: blue;
font-weight: bold;
text-align: center;
}
</style>
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="style.css">
</noscript>
</head>
<body>
<h1>Critical CSS Demo - Optimized</h1>
<h3>On this demo, the "critical" styles are inlined, while the non-critical ones, are deferred.</h3>
<button class="accordion-btn">Click to see a paragraph styled with set of styles #1.</button>
<div class="container">
<p class="paragraph1">This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text.</p>
</div>
<button class="accordion-btn">Click to see a paragraph styled with set of styles #2.</button>
<div class="container">
<p class="paragraph2">This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text.</p>
</div>
<button class="accordion-btn">Click to see a paragraph styled with set of styles #3.</button>
<div class="container">
<p class="paragraph3">This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>.</p>
</div>
<script>
var accordionBtn = document.getElementsByClassName("accordion-btn");
for (let i = 0; i < accordionBtn.length; i++) {
accordionBtn[i].addEventListener("click", function() {
var container = this.nextElementSibling;
if (container.style.display === "block") {
container.style.display = "none";
} else {
container.style.display = "block";
}
});
}
</script>
</body>
</html>
Related
I was just wondering how to view p.intro::first-letter in the following code. Does this mean that only in a p element can the intro class be used?
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
Yes
The selector p.intro::first-letter means "Style the ::first-letter of a <p> element with the class intro.
When there is no space between the selectors p, .intro, ::first-letter (these are called selectors) it is like an "AND" statement
div.RedText means div element AND RedText class
It's worth reading up on the different types of selectors, W3Schools has a really good interactive example too!
Here's a little more:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
div {
color: #0000ff;
}
div.RedText {
color: #ff0000;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
<div>This text is blue</div>
<div class="RedText">This text is red!</div>
</body>
</html>
In w3schools CSS framework there are some predefined buttons and predefined settings for this buttons. I've already changed the color of them by adding to my HTML file the .class(.w3-button) in the style element at the head section but I cannot do the same with hover settings.
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {
background-color: #8B4513;
box-shadow: 2px 5px 5px black;
border-radius: 4px;
color:black;
}
.w3-hover-green { <!-- I've tried to that but it didnt work -->
background-color: #D2691E;
color: white;
}
</style>
<body>
<p><button class= "w3-button w3-hover-green"> button </button> </p>
Any idea?
The trick to override the w3-button hover style in W3.CSS is to use the CSS !important exception.
Although I believe !important should be avoided whenever possible, this is actually how the "official" W3.CSS custom themes work, as you can see on the W3.CSS Color Generator page.
A simplified example:
a.custom-hover-color:hover {
background-color: orange !important;
color: red !important;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<a class= "w3-button w3-green custom-hover-color"> click me </a>
Hey in the last section of code the <p><button class= "w3-button (ADD A DOT HERE)w3-hover-green"> button </button> </p> please add a dot before the "w3-hover-green"
Good luck!
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
I want to change the style of my text that I am embedding with the following markup
<iframe src="URL">
My web page has a limited amount of characters that can be used up very fast with coding in CSS and HTML. The code I'm using the iframe to embed is this:
<style type="text/css">
body {
color: black;
}
h1 {
color: #FFFFFF;
}
h2 {
color: rgb(255,255,255);
}
</style>
<h1>Hello World!</h1>
But when I'm using the following to embed it:
<iframe src="THE RAW URL of the code above" frameBorder="0">
...the whole code is showing, not just the Hello World! in #FFFFFF.
What am I doing wrong here? I would embed just the Hello World! but I know that the CSS on the parent page will not change the style of the source I'm putting in the iframe.
Since the iframe is for embedding HTML documents, you should try using a fully valid HTML as your external file. Something like this:
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
</head>
<body>
<style type="text/css">
body {
color: black;
}
h1 {
color: #FFFFFF;
}
h2 {
color: rgb(255,255,255);
}
</style>
<h1>Hello World!</h1>
</body>
</html>
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.