Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Within HTML Code

IMMaximum

IMMaximum

Coder
So in my HTML Code I have, there is code that is CSS code. How does this work, since they are 2 separate types of code? I noticed this before and I ignored it, but I aa starting to get curious now. Since HTML and CSS code are separate, shouldn't the CSS code and the HTML code be separate? I at first thought that the separate CSS code is for the website overall, and the CSS code within the HTML code is for that individual page, and only affects that page itself. Is that true or wrong?
 
Solution
Malcolm
Hey @IMMaximum,

Great question. You can use CSS with your HTML document in three main ways. In this case, you most likely found the <style></style> from the looks of it, which is considered internal CSS. This tag is used to write CSS code directly within your HTML document.

However, there is another way you can write CSS in the HTML document, called inline CSS; this can be applied directly to the HTML tag. An example of this is, let's say, you have a paragraph tag, and you want to change the font colour to red; then you can write something like <p style="color: red;">My Paragraph</p>.

And lastly, of course, is to have the CSS in a dedicated .css file. More info can be found here.

However, it is good...
Sort by date Sort by votes
Hey @IMMaximum,

Great question. You can use CSS with your HTML document in three main ways. In this case, you most likely found the <style></style> from the looks of it, which is considered internal CSS. This tag is used to write CSS code directly within your HTML document.

However, there is another way you can write CSS in the HTML document, called inline CSS; this can be applied directly to the HTML tag. An example of this is, let's say, you have a paragraph tag, and you want to change the font colour to red; then you can write something like <p style="color: red;">My Paragraph</p>.

And lastly, of course, is to have the CSS in a dedicated .css file. More info can be found here.

However, it is good practice not to use inline or internal CSS unless necessary, as they can be difficult to maintain. So, it's best to keep both HTML and CSS separate.
 
Upvote 1 Downvote
Solution
@Malcolm is correct, naturally, however I will add that there is a school of thought that suggests using internal css for the elements on a page that are likely to be in the viewport upon page load (without scrolling) as a performance enhancement. The idea being that internal css loads faster and users of the website will take a moment to look at and digest the content on the page that is visible at load, giving the rest of the site styles time to load from the external sheet. This is a bit advanced but something to be aware of.

As a side note, you can also drop a style block right in the body of your page and it will work. Not considered a good idea though. But sometimes....ya gotta do what ya gotta do.

<body>
<p>I am pink</p>
<style>
p{color: hotpink;}
</style>
</body>

I've seen this on dynamically injected blocks of content.
 
Upvote 1 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom