When I embed a piece of html code, it seems that it won't be effected by the linked css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>worldmapper BETA</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<embed type="text/html" src="test.html">
</body>
</html>
Correct. <embed> acts like <iframe> (just not so well defined, so you should use <iframe> instead).
You are loading a separate document in a sub-window.
For the CSS to apply, you need to link the CSS to that document.
Consider using a template system which you apply either server side or at build time instead. Then your single web page will consist of a single HTML document.
Related
When I write the following code, the rendering is before the script is executed，However, preloaded fonts are added. rendering is performed after the script is executed. Why？
<!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 rel="preload" href="http://localhost:3000/index.woff" crossorigin as="font"> --> // This causes rendering to lag
<style>
.demo {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="demo"></div>
<script src="./index.js"> </script>
</body>
</html>
Link types: preload
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance.
The basics
You most commonly use to load a CSS file to style your page with:
<link rel="stylesheet" href="styles/main.css">
Copy to Clipboard
Here however, we will use a rel value of preload, which turns into a preloader for any resource we want. You will also need to specify:
The path to the resource in the href attribute.
The type of resource in the as attribute.
A simple example might look like this (see our JS and CSS example source, and also live):
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
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.
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.
I was trying to add css in my blogger's blog but for some reason blogger theme designer is not working so i decided to add css directly in the code using tags, but I can't find the tag in the html file. It is my first time when I am unable to understand where is. Anyone know where tag is in this file to add css?
I did not Code it completely! And the person who did is no longer in contact with me!
Click Here to see Code
To use an external style sheet, add a link to it in the section of the HTML page:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Search for this ]]></b:skin> and place your CSS code before it without using <style>
Or if you want to use a style tag, place it after </b:skin>
The <style> element is used to add CSS style rules to an HTML document. The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
Your program should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
you should add the head tag yourself to the top of the document if you do not have one already. for the href change that to the name of your css file.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1' name='viewport'/>
<!--[if ie]><meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/> <![endif]-->
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://justpaste.it/redirect/3qnyk/http://www.blogger.com/openid-server.g' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
</head>
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.