Optimize CSS Delivery - by Google - html

Google's suggested the Optimize CSS Delivery method according to the below document link:
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI
According to the Google document I have divide the CSS into two separate CSS files.
a) small.css - Critical CSS
b) common.css - Other normal CSS
Then I've place the critical CSS end of code.
eg: <html>
<head>
<link href="/css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
content
</body>
<html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
However when view the page, that particular critical CSS(small.css) style is not applied to the HTML page. Please help me to solve this Optimize CSS Delivery method issue.

I think you misunderstood a couple of things:
The <noscript> tag will only display contained content if
Javascript is disabled or not available.
What google is explaining is that inline CSS displays faster than CSS
in external files.
inline CSS looks like:
<head>
<style>
.blue{color:blue;}
</style>
</head>
while external files with CSS are included like this:
<head>
<link rel="stylesheet" href="small.css" type="text/css">
</head>
Now to answer your question, your CSS is not displayed because it is contained in the noscript tag. Here is the correct way to do it:
<html>
<head>
<link rel="stylesheet" href="small.css" type="text/css">
<link href="/css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
content
</body>
<html>
Or if you are following googles recommendation:
<html>
<head>
<style>
//Copy content of small.css here
</style>
</head>
<body>
//content with inline styling
</body>
<html>

Why do you have the noscript tag ? Its only for identifying if the JavaScript is not present , so the css will not be loaded .
Also , CSS can be on the top of the code , need not be below . Try only keeping the js code below.

Related

Link to multiple CSS files

So, I'm really new to development, but I have an assignment where I have to create a 3 page site. The thing is that the three pages share some things (header, footer, title, banner), and that's great, but there are differences in the rest of the content, so using only one CSS files requires a lod of ID's in the HTML. I was thinking that maybe I could use 1 CSS file for the elements all the pages share, and a different one for each of the pages. Right now I'm using individual CSS files for each page, but if I want to change the footer or header, I'll have to do it three times.
In case this is possible... is it a good practice?
Yes it is absolutely possible!
The same way you currently use the <link> element to reference the css for that given page.
The same way you can add multiple css files.
Now lets say you want to have one css file that takes care of all the styling shared in all pages like the header, footer etc. You can make a new shared.css file and reference it on all 3 pages In addition to the designated css file for that given page.
See example below:
PAGE 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My website</title>
<link rel="stylesheet" type="text/css" href="page1.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
<body>
</body>
</html>
PAGE 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My website</title>
<link rel="stylesheet" type="text/css" href="page2.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
<body>
</body>
</html>
PAGE 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My website</title>
<link rel="stylesheet" type="text/css" href="page3.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
<body>
</body>
</html>
You can keep the common rules of all the three pages (the header, footer etc.) in a single css file to be shared by all the three pages. After it, you can make a separate css file for each page with different rules for the contents.
In short, you will have two css files for each page => One common file with common rules and one different file for page-specific rules.
Also, if you are not having very long rules (>500 lines), and less pages, you can keep all the rules in a single file. For your reference, you can separate the common rules and page-specific rules by comments like the example below:
/**********************Common rules***************************/
common rule 1{
/*Something*/
}
common rule 2{
/*Something*/
}
/***********************Page 1 rules***************************/
page1 rule 1{
/*Something*/
}
Though this is not highly recommended, you can use any of these two methods as per your convenience.

How do I link to another html with a different style? Is it possible to do?

I am working on a home page that links to several of my projects. I am trying to link to another html that has a different style than the home page. The images and text I have for the second html works fine, but it takes on the style of the home page, and not its own design which is different. My question is is it possible to link to another html that has a different style? If so, how do I input this? When I try putting the style for the second html in the home page's folder, it won't let me since there's already another style.css I used for the main home page. I tried changing the name of the second style file and it still does not work.
If I understand you correctly, you have two HTML pages and you want a different CSS style for each page.
You can have several CSS files but you cannot have two with the same name.
Create two different CSS files. For example home.css and secondpage.css
Create two different HTML files. For example home.html and secondpage.html
Go to the <head> of home.html and add <link href="home.css" type="text/css" rel="stylesheet" />
Go to the <head> of secondpage.html and add <link href="secondpage.css" type="text/css" rel="stylesheet" />
Make sure the html files and css files are in the same folder.
If you have trouble finding the <head>, see the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="home.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>Hello World</p>
</body>
</html>
Yes, it is possible to use different style for diffrent html pages. There are mainly two easy way
Either you use different css files for each html page (Which is not recommended):
Let say for homepage.html you use mystyle.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
So for other html page you can use secondpage.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="secondpage.css">
</head>
</html>
and make sure you specify path correctly
Other way which is recommended is you give diffrent class name for the html attributes, So that you can specify the all styling in single stylesheet. which will reduce your page loding time too.
Lets say this is home.html :
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="homepage">
// Other content here
</div
</body>
</html>
So in Second html file you can use different class
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="secondpage">
// Other content here
</div
</body>
</html>
so now yourstylesheet will look like :
.homepage{
//your style here
}
.secondpage{
// your style here
}
Hope so this helps.

Usage of <link> tag to refer to an external CSS file not working, what I did wrong?

I'm following the tutorial on the w3school for HTML and I'm stuck at the external linking part where you can include in your HTML page the CSS file you with the stylesheet defined by you with the <link> tag.
I have tried:
adding in the correct way the arguments rel, href, type, or media
clearing the cache from the browser, maybe it saved some old code but it was not the case
creating another .css file to try and code different style solutions
index.html
<!DOCTYPE html>
<html lang="it">
<head>
<style>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</style>
</head>
<body>
...
</body>
</html>
whiteonblack.css
body {
background-color: black;
color: white;
}
The body background should be completely black (I hate bright websites, even if this is for testing and with awful and old yet working (but not so much) HTML) and the general text to be white. Also some love from the community for DIY students :).
It defaults to the reverse, white bg and black text. God the hate.
The link tag belongs in the head tag directly. Do not nest it in a style tag; that's meant for actual CSS.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
Remove the style tag. Use below CSS code.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>

Don't know why the css isn't linking?

So I'm about to start to code a website using Sublime Text, but I have not touched code in a couple of months (5-7) so I am trying to get used to it again. So I have created my HTML and CSS page, but even though the CSS link is right, it is not displaying in browser. I know once you tell me I will be kicking myself but why is it not showing up?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>
Your code assumes that your folder structure is like this (where your css file is a sibling to the html):
index.html
home.css
However, make sure that if your project setup is in a way that your css is in a folder, you should reflect that in the code:
index.html
-- css
home.css
And you would then put this in your html file:
<link rel="stylesheet" type="text/css" href="/css/home.css">
you have to create a root-directory with the exact adress of the css file , but maybe its because you forgot to make a backslash at the end of the link ( i am not sure )
You are missing the slash in link tag. Try this. Also make sure css file is in same directory.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css"/>
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>

Apply different CSS style localy in a webpage that contain multiple webpages

I'm using difference CSS (almost 10) and I have a web page that contains multiple webpages and each page with thier specified CSS but the result gives me Headache all the CSS mixed with each other, I tried to declare the CSS separately in the head of each pages like this:
<head>
<title>My web page</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
but it doesn't work, any idea how to make a CSS local declaration so I can use it in a specific elements without recreate all the HTML by class=" " . I want to apply different CSS style in a webpage that contain multiple webpages any declaration to do that?
I'd suggest you come up with a common CSS for all the pages (though you might not even need it) - sets of rules that all of them would use, like defining body styles, reset rules for some elements, etc... Then, in every page you would include that CSS first, and then the webpage-specific CSS after. Like this:
Page 1
<head>
<title>My web page 1</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page1.css"/>
</head>
Page 2
<head>
<title>My web page 2</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page2.css"/>
</head>
etc...