Hi i'm new in this world of HTML and CSS, so i just want to ask how the html code flow works, specifically html with internal CSS, so as i remember the code starts from the top to the bottom, giving this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta>.......
<title>Document</title>
<style>
.container {background-color: tomato; padding: 20px;}
.text {color: green;}
</style>
</head>
<body>
<div class="container">
<p class="text">Hello World!!</p>
</div>
</body>
</html>
i would say that this runs normally, but what is first? i mean for example.. we can say that first the CSS styles are saved in a box then html elements are created and finally that box where the CSS rules are looks for the class names, tag names that are declared as CSS rules and starts matching and applying the styles with the correct html element that has relation with this ones (and resolving the complex stuff like specificity...)?, i mean that is how i think it works, in a nutshell am i correct??, and sorry if this sounds dumb i'm new in this :(
you can use css in three type
inline css
internal css
external css
in internal css you write code
<style> write your css </style>
in inline css for example
<h1 style="background-clour:red;">Hello </h1>
in externel css you can call tag by name, id,and so on
the page must be connected to the html page in the top.
<link href="../dashboard-file/css/sb-admin-2.min.css" rel="stylesheet">
this is your answer.
Related
I wanted to create a contact-us page with HTML(no CSS document is allowed to use), then I found what I wanted but the code is written in 2 documents, HTML code is written in HTML document and the styles are in the CSS document. I'm looking for a way to use the CSS codes inline in the HTML document. Could you help me, please?
<html>
<head>
<style>
p {
color: green
}
</style>
</head>
<body>
<p>All your custom CSS can go in the head section of the HTML</p>
</body>
</html>
You will want to use a style tag like this: <style> </style> and inside will go the CSS.
It's good practice to keep your CSS in a seperate file to make the code look cleaner
This question already has answers here:
How to link a CSS file from HTML file?
(2 answers)
Closed 1 year ago.
I am extreme beginner and I have this dumb problem.
So I wrote a css file and html file.
HTML :
<!DOCTYPE html>
<html>
<body>
<img
src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif"
width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
I did this for my css file
p {
color: red;
}
When I save and refresh my website, the html shows up.
The css doesnt show up like the paragraph doesnt change red. I also want to change the position of the image.
Please help!
I also want to know about indenting please.
Also should for website developing, should I learn css and html at the same time, or like html for 1 year, and then css for one year, because im learning javascript like in a 2 years, next year.
You must tell your HMTL page where to find your CSS.
To do that you have to add link tag into your head tag using:
<head>
<link href="/path/to/your/style.css" rel="stylesheet">
</head>
<link>: The External Resource Link element
The HTML element specifies relationships between the current
document and an external resource. This element is most commonly used
to link to stylesheets, but is also used to establish site icons (both
"favicon" style icons and icons for the home screen and apps on mobile
devices) among other things.
Take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
In your case if your css file named style.css and your index.html file are on the same folder, your html should look like that:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif" width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
The HTML element contains machine-readable information
(metadata) about the document, like its title, scripts, and style
sheets.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
If you want to use inline css you have to put your <style> tag between your <head> tag to make it processed by HTML.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<img src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif" width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
Also should for website developing, should I learn css and html at the
same time, or like html for 1 year, and then css for one year, because
im learning javascript like in a 2 years, next year.
Well, HTML, CSS & JS are the fabric of the front end so my advice is why not all three at the same time? They each compliment each other and after 3 years studying you will have understood more about them than focusing your time and energy learning each as separate entities.
Think of HTML as your initial sketch (your structure), CSS as painting your sketch (your make-up and beautifier), and JS as making your painting come to life (your functional and interactive parts). Simply put, it's more fun with working with all 3
So I've got down my basic html framework down and some basic CSS to make it look centered and adjust the background color, but I've tried a couple different adjustments and none seem to work properly when linking my CSS.
I've attempted to adjust the path to my CSS, tried to change the encoding between utf-8 and a few other random Windows 'save as' ones, and tried adjusting spacing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html>
<body>
<link rel=stylesheet type=text/css href=/Computer/C:/Users/JohnDoe/Downloads/Test.css>
</body>
</html>
And in the .css file:
body {
text-align: center;
background: powderblue;
}
Whenever I run my program it just comes out looking like a normal black and white page that is off centered.
So it would probably be good to read up on building a website. But in the meantime, here are some things you need to fix:
link elements go in the <head>
link href should be an absolute server link (starting with https://...) or a relative path
quote attribute values
remove stray css at the end of the doc and put in css file
Relative path means it's the path relative to the file being served (for example, "index.html"). So if your index.html file is in /Computer/C:/Users/JohnDoe and your css file is in /Computer/C:/Users/JohnDoe/css/ then the relative file path is css/Test.css
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Test.css">
</head>
<body>
<p>This text appears in the browser</p>
</body>
</html>
You got a few things going on here:
First, for externally linked style sheets, the link goes in the <head>...</head> tags, rather than the <body> tags.
Here's a quick reference:
https://www.dummies.com/web-design-development/html5-and-css3/how-to-use-an-external-style-sheet-for-html5-and-css3-programming/
Note the quote:
The <link> tag only occurs in the header. Unlike the <a> tag, the <link> tag can occur only in the header.
you're asking to link to an external style sheet, but also including some inline CSS (the body stuff you have a t the bottom. Also note that when including inline CSS you need to wrap it in <style> tags.
Lastly, that href path looks odd to me ...
I am using YSlow to measure overall page performance. However, CSS are declared in Head section of the document still YSlow finds css in the body of the document and suggests to put CSS at top. What may be the reason for the same?
I am not using CSS property in hard code or inline style, for inline style I am applying class to that div like <div class="header"></div>. Also in head tag there is external CSS attched like
<head>
<link rel="stylesheet" type="text/css" href="/css/menu.css" />
</head>
But YSlow finds css in body part rather than head section.
Your question is not clear, but I would guess you probably have in line CSS tags
Something like
<div style="float:left">asf asdf</div>
So, your document could be
<html>
<head>
<!--CSS declarations and title etc-->
</head>
<body>
<!--body code etc referencing the exteranl CSS sheets or the CSS declared in the header-->
<div style="color:#366;">These words are in this color</div>
</body>
</html>
I encountered this problem, and found that it was due to having an A tag before my css imports (for claiming Google Plus identity). I moved that tag to just before the closing HEAD tag, and YSlow no longer flags the issue.
I see that multiple HTML tag file is correctly rendered by the browser. I mean like two html files merged and concatenated. But if I put a STYLE region into each of the HTML parts and the classes or id's are the same I get the last css rules applied also to the first part. I ask how to make css rules acting just on the part they are inserted, even the classes and ids are the same. I need this special thing, so I am looking for a solution or a trick.
Having more than one html tag in a document is not valid HTML code. The browser will try to render the content anyway, but the separate html sections will simply be mashed together into a single document.
You can't apply separate styles to seperate html sections, because the browser will not keep the html sections separate. Anything after the first html section will just be thrown in at the end of the previous body, and the browser tries to make some kind of sense out of the complete mess.
I think multiple html-Tags in one document are not allowed.
I do not see any advantages for doing so.
When you have multiple documents, consider to use the frame or better iframe-tag
HTML Tags and CSS rules are entirely different in behavior. So, if u merge html files also, it will all act as a single file. Try PHP include function and include a HTML page inside another. Once rendered, it will act as a child of parent.
So for a Single HTML file if you write multiple CSS rules with same name, it will surely crash.
You can do this by replacing the classes/ids with inline code.
Consider the following 1st html file:
<html>
<head>
<style>
.aclass{
color: #fff;
}
</style>
</head>
<body>
xyz
</body>
</html>
And this 2nd html file:
<html>
<head>
<style>
.aclass{
color: #000;
}
</style>
</head>
<body>
abc
</body>
</html>
Now you can make the styles inline in both the files and then merge them, and final results should look like:
<html>
<head>
</head>
<body>
xyz
abc
</body>
</html>
Having multiple elements with same id is very error prone. Breaks on more than one occasion like
On javascript: document.getElementById('idname');
You can't put two html tags in one css file. But you can put the style tag in every html file and from there you can refer the html tag.
For example : consider I have two files home.html and login.html
So In css in can make entry of one html tag for one file while in other html file I can simply put it in tag.
This is one css I have made for both the files.
html {
background: #ffffff;
}
So I am keeping entry of html tag of home.html in css while for other I can write in its own html file like this
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="FeedbackManagement.css"/>
<style>html{background: green;}</style>
Hope this helps. Please see the background color for both of these files.
Home.html file
login.html file