I am trying to learn how to use Cascadding Style Sheets. I have a little test html page as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
<INPUT TYPE=text NAME="userID" id="userID" Size=20 >
</body>
And the external css file looks like this:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
This all works fine. But when I look at style sheets created by other members of my team, they have style tags bracketing the content. So it makes me think that the CSS file really should look like this:
<style type="text/css">
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
</style>
However, when I put the style tag in disables the CSS. What am I doing wrong?
Thank you for your help.
Ellliott
The <style> HTML tag is for when your CSS is in your HTML file.
If it's an external CSS file, you do not use them, as it's not an HTML file.
The <style> tag is an HTML tag that you can use to include CSS directly in the page. An external CSS file should just contain the CSS declarations, and not be wrapped in HTML.
For example (taking your HTML):
<html>
<head>
<style type="text/css"> <!-- style is an HTML element -->
body { background-color: gray; }
</style>
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
<INPUT TYPE=text NAME="userID" id="userID" Size=20 >
</body>
According to the HTML spec, your method is best:
To specify style information for more than one element, authors should
use the STYLE element. For optimal flexibility, authors should define
styles in external style sheets.
Related
This question already has answers here:
Assigning multiple styles on an HTML element
(4 answers)
Closed 1 year ago.
Hey guys so basically I've been learning html and Css these past couple of days. I'm having trouble assigning a background color and font color at the same time.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" >
<title>Practice blog</title>
</head>
<body style="color: blue;">
<body style="background-color:lightblue;">
So basically if I put the background color one on top the font of the text won't change, only the background. If I put the one where it changes the font the background won't change. What can I do about that?
Congratulations on starting your journey with learning HTML and CSS!
Two things to keep in mind:
Each HTML file can have only 1 body tag. A good way to think of it is that one HTML file corresponds to one page and each page has one body!
Inline CSS isn't the prettiest way to learn and I think frowned upon. Making a separate CSS file and linking it to your HTML file will make learning a lot easier for you! Helped me a ton!
You need only one body:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice blog</title>
</head>
<body style="color: blue; background-color:lightblue;">
Some text to show colors
</body>
Apart from what others suggested, you could also use internal CSS to style the elements in the body without needing to use two body elements. What you need to do is embed the CSS code in the style tag of the head:
<html>
<head>
<style>
body {
background-color: blue;
color: yellow; /*or any colour of your own choice*/
}
</style>
</head>
<body>
<p> Paragraph whose colour will become yellow </p>
</body>
</html>
The code inside the style tags is called internal CSS which is an alternative way of styling the body elements. This is the easiest and simplest way of styling the body elements. Here's a demonstration:
body {
background-color: blue;
color: yellow;
}
<p> This is a simple paragraph </p>
The background-color will change the background colour of the body and the color will change the colour of the elements inside body i.e. paragraphs, headings etc.
I'm working on making a dark mode for the Kaplan website tests so I don't blind myself studying.
The following HTML code is representative of the structure of the source, and the tag with id="stylish-23" is what's added by a chrome extension to change the page's CSS styling:
<html> // html 1
<html> // html 2
<html> // html 3
<html> // html 4
<div id="divQuestions"> </div> //actual tag I want to change
</html> // html 4
</html> // html 3
</html> // html 2
<style id="stylish-23" type="text/css">...</style>
</html> // html 1
I put div#divQuestions in the style tag's CSS and it does not appear to have any effect at all. Due to the nature and limitation of the extension, I'm only able to add CSS to the style tag, and the CSS appears to not be able to select HTML tags (or at least when I do, nothing happens). I've noticed that dragging the style tag into html #4 in developer console will properly apply the CSS.
The element in question's CSS from inspect:
My CSS in the style tag:
div#divQuestions {
background: black;
}
Thanks for the help!
#divQuestions selector works for me if I fix the div's closing tag (or even if I don't, as it turns out):
<html>
<html>
<html>
<html>
<div id="divQuestions"> </div>
</html>
</html>
</html>
<style id="stylish-23" type="text/css">
#divQuestions {
padding: 48px;
background: aliceblue;
border: 4px solid blue;
}
</style>
</html>
nth-of-type is a selector that matches the nth element of their "type".
So, you can do this:
html:nth-of-type(1)
html:nth-of-type(2)
html:nth-of-type(3)
...
Or, you can do this since you said "multiple nested tags":
html
html > html
html > html > html
...
I require some help. My friend sent me an HTML document and he asked me to change the background. Now I'm new to HTML and all this but changing the background should be easy but I can't find it anywhere in the HTML doc or the CSS. Any help?
Just create a new css for example for body like this if you want it to be black:
body {
background: #000000;
}
That should work.
div{
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/tulips.png");
height:100px;
}
<div></div>
You can change the background by using background-color or background-image as follows:
<div style="background-color: red" >
This div has a background-color of red
</div>
The HTML file contains 2 main sections - <head>, <body>.
Head specifies attributes like page title, language, links to stylesheets (css / designs).
'Background' can be applied to any part within the <body> section of the HTML file (including body).
Background can be applied in 2 ways -
A colour - Using style="background-color: color-code;"
An image - Using style="background-image: url('img_girl.jpg')"
Here is an example of background being applied:
Approach 1: Background colour:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-color: #e6f2ff;">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Approach 2: Background image:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="background-image: url("/paper.gif");">
<div class="my-page">
<h1>-- Heading here --</h2>
<p>-- Description here -- </p>
</div>
</body>
</html>
Note:
The background color / image can be applied to any element inside body, I.E., to div / h1 / p ...
More information:
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/html/html_images_background.asp
Add a style for header in your CSS file :
.header {
background: "#000000"
}
The background image can be inserted in the page using the below within body tag or by using CSS: < div style="background-image:url('[image url]');>
Also, this website contain good information to go through : https://www.wikihow.com/Set-a-Background-Image-in-HTML
I have an html document.
In the document I link an external CSS Stylesheet
<link rel="stylesheet" type="text/css" href="css/whatever.css" />
But this external CSS Stylesheet modifies all my HTML document.
I need the External CSS Stylesheet to modify only a specific section of the HTML document.
You can define the css inside the html document in two differents ways.
<style>
//Your style
</style>
or inline <tag style:"property:style;"></tag>
That's what classes are for if you want to style a specific part just wrap it in a div, give it a class and style it.
p { color: red; }
.specific p { color: blue; }
<div class="specific">
<p>Test</p>
</div>
<p>Test</p>
<p>Test</p>
The following is my code.
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
.mainpara {background-color: #d3e5f2;}
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
As you can see, there's a "mainpara" division. How do I specifically apply styling to it? I tried .mainpara {background-color: #d3e5f2;}, as you can see. I also tried putting it above the class.
You need to put CSS in a stylesheet, not as free text in the middle of your HTML.
Either use a style element or (preferably) put your CSS in an external file and reference it with a link element (both of which would go in the head, not the body).
There are examples of both in the specification
<style>
.mainpara {background-color: #d3e5f2;}
</style>
you can not write css code in html page without using style tag
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
<style type="text/css">
<!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
.mainpara {
background-color: #d3e5f2;
}
<!-- Changes color and font size for all p tags on page -->
p {
color: #f60;
font-size: 15px;
}
<!-- Use an id for specific p tag -->
#customParaStyleId {
color: #f60;
font-size: 15px;
}
<!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
.custParaStyleClass {
color: #f60;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
<!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
<p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
CSS should be separated from the body of your HTML Code. It can be placed in either a separate style sheet that you import/include or it can appear between a <style type="text/css"><!-- YOUR STYLES HERE--></style> tags.
TIP:
Often I begin designing and manipulating styles in the head before separating them out into a style sheet. This allows me to focus on the design without having to worry about whether I attached the style sheet properly or not.
Once I finish the page I then move the working styles to a separate sheet to provide re-usable styles across the entire site.
<style>
.mainpara {background-color: #d3e5f2;}
</style>
If you have a stylesheet file or style.css you can just insert:
.mainpara {background-color: #d3e5f2;}
inside of the style.css file