CSS style tag question
i'm new with coding and just try github
in github, i want to add css
i do put file.css on the name
so the question is, do i need put <style></style> or no in that css file???
66 Replies
Hey, this is separate from Git / GitHub. CSS files don't need the style tag, that's only when you're adding css to an html file
You can link a style .css file to an html file with the link tag
also, the
<style> tag does not go inside the css filesthank you so much
To expand on this. There are three ways to style an html file.
First is to use an external stylesheet (.css file) using the
<link href='./styles.css rel='stylesheet'>
Second is to use a style tag inside the html file
<style>
p { backgroun-color: red}
</style>
Third is using the style attribute directly on the html element
<p style= 'background-color:red;'>hello</p>
the inline style (using the style attribute directly on the element) takes precedence over the other two always.
For the link and style tags. I think whichever comes last in the html takes precedence order. (Someone correct me if I'm wrong)<style> takes precedence over <link>like this?
until you throw in media queries, container queries and layers
Your link doesn't go into body tag
Where's your head tags
oh, i have make head too?
the head tag is optional but implied, but only because browsers accept all sorts misformed bad html
but you should have a
<head> tag
you're also REQUIRED to have a <title>Hmm i thought they both were applied in order of appearance. Need to test it
that is NOT optional
it is, but style over link
Humuhumu
ohhh
okay, i fix the code
<!DOCTYPE html><title>x</title> <-- this is the smallest valid html 5 file
the <title> also goes in the <head> tagYou should look into what tags you need in head. There are meta viewport tags and meta charset tags
those are important too
in fact, just take a boilerplate html file from somewhere and use it
The emmet one in vs code should work
never tried it
but even an ai slop should do the trick
it's repeated over over and over
It's this
Type ! And then hit enter or tab
way back when, you used to have to force the browser to be ie latest version
thank you
oh, and make sure the file is in utf-8
that's the only encoding you should use, and vscode should do it automatically
like this?
yeah, but keep the quores consistent
use double-quotes instead of single quotes
also, DO NOT put a paragraph inside a span
so just span?
no, just
<p>
you're putting a paragraph inside an element that says that it is just a part of text
it's like putting egg inside your egg whitesDoes every html need a favicon or is that just optional
it's optional, but adding one is good
also, browsers try to load
favicon.ico if you don't provide onethis?
Alright. Yeah I see browsers keep complaining about it in the console when I dev so i was curious
No anchor tag inside button
never ever ever put a link inside a button
If you need a link only do a link
if you need a button, only button
then how i make the button to next page?
should i just style the link look like button?
depends on what you're trying to do
are you trying to send the
"yes" and the "no" to the other page?
or you just want to go to a different page?this is how i make it on notepad before
instead of the
div, use a form
you need to set the action to the url of the next page
the method can be either post or get, depending on what you want
then, on the buttons, add the same name, and specify the type as submit
but that also looks like it is inside a <dialog open>
if you want to stay in the same page, it's easier for you
but you will need javascripti dont know js yet😭
i just start html and css like a week
something like this for action?
you can't get the value without javascript, unless you use a backend language
i would avoid w3schools, as they tend to have wrong/outdated information
they've been getting better, but not quite good enough
where to see
MDN Web Docs
<form>: The Form element - HTML | MDN
The <form> HTML element represents a document section containing interactive controls for submitting information.
like this?
that's not what i had in mind, but that's close
okayy
as long as it works
yep, it's work
just copy new code to next page
you should set a name and value in the button
name="yes/no" like that?
but what value?something like "am-brother" or something
A question, are you learning just enough to make a one off website for your brother or do you want to learn about web dev in detail?
It might be better to go through mdn's learn section in the latter case. So you'll get all your fundamentals covered by a decently organized course
both? i want make it for my brother also i interested learn more too
I'd recommend you bursh up on your fundamentals in that case if this website can wait for a bit.
You will have a much easier time making it then
Mdn's learn section as I said is great for beginners (make sure you follow along with their code examples)
this?
Yes
which one?
the fronted or html?
MDN Web Docs
Getting started modules - Learn web development | MDN
Welcome to Getting started! If you are a complete beginner (i.e., you've not installed a code editor or written any code yet), then this is the place to be. The Getting started modules take you through installing the software you need, familiarity with your development environment, taking your first stab at building a simple website, and underst...
Start from here
okayy
I tried this out and it seems to follow the last one to appear gets precedence
🤔
interesting
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order
this seems to confirm your tests
🤔
which means, what i learned is wrong
hii
i want saying big thank again for everyone here
i done the web yesterday and my brother reaction is so funny and actually fall on my prank button
🤣 hey, you did put good effort into it