How do I apply CSS styling to a <div> block? - html

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

Related

Can't change body background and body font at the same time [duplicate]

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.

How does one use multiple fonts in CSS?

I have just started making a website and wish to include multiple fonts. I'm new to HTML and CSS and don't quite get how they interact. When looking up a tutorial for how to do so, it shows only HTML, despite explicitly saying CSS.
The W3Schools tutorial I am currently using shows this:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Doesn't the header define this as an HTML file? How does CSS play into this?
The style tag (a.k.a. what you are mentioning) specifically allows CSS to be embed into a HTML document. It can use any CSS, as long as it is encapsulated within the tag.
<style>
body {
background-color: #333;
}
</style>
This is different from the linking of a external CSS file which uses the link element:
<link rel="stylesheet" href="./styles.css">
However, you can also use the style attribute to add styles to an individual element on its tag's HTML.
Google
For the relationship between the two, HTML (Hyper Text Markup Language) is the basic blueprint / building blocks for the page and the structure it should be rendered in, while CSS (Cascading Style Sheets) describes what the page should look like. They are tightly knit and are meant to be used together. That is why the style tag specifically includes CSS in HTML. You can include both CSS and JavaScript in HTML or you can link them through external files.
Everything between the tags <style>and </style> is the css here.
There are other ways to integrate css.
You can attach a style directly to an html element:
<p style="text-align: center; color: green;">
this paragraph will be centered and green
</p>
Or you can write your styles into an extra textfile and link to this file in the header of your page
<head>
<link rel="stylesheet" href="stylesheet.css">
...
</head>

how to use CSS to hide a header contains specific text

I want to hide a header text from the website.
because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.
I have tried it. The result is that it will remove other page's header too.
is there a way to apply CSS so that it only hides when the header text contains specific words?
i will be appreciate for any help i may get here
If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.
<header style="display: none;"></header>
Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.
There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.
In your H2 tag that you want to hide, you can apply a class.
<html>
<head>
<style>
.hide-me { display: none; }
</style>
</head>
<body>
<h2>First header</h2>
<h2 class="hide-me">Your header</h2>
</body>
</html>
It's better to move the tag into a CSS file, but this will accomplish what you want.
You need to just add a id to your specific header and apply style to it.
CSS 101.
<head>
<style> //Internal CSS
#hide {
display: none;
}
</style>
</head>
<body>
<h2 id="hide"> Hello World </h2>
<h2> ... </h2>
<h2> ... </h2>
</body>
If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.
The last and least used method is to use inline CSS :
<h2 style="display: none"> ... </h2>
More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display
If you want to use the same style in more than one place use 'class' instead of id.
<head>
<style> //Internal CSS
.hide {
display: none;
}
</style>
</head>
<body>
<h2 class="hide"> Hello World </h2>
<h2> ... </h2>
<h2 class="hide"> Lorem Ipsum </h2>
</body>

Behaviour of margin of h1 tag

I have index.html which looks like follows:-
html {
background-color: #0000FF;
}
body{
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<div style="height: 100px; width: 100px;"></div>
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>
Initially the margin of h1 is with the window and there is some extra space above body element. But if i add border: 1px solid black to my body element the margin of h1 is with body element.
Why is this so? The border of body element was present even before but we were not just displaying it right?
You can use box-sizing: border-box;
Many browsers have a default user agent stylesheet which automatically adds some styles - even if you haven't specified any.
For example, in chrome, i can see that the h1 will be given a slight margin-before and margin-end which would give you the gap between the body and H1.
You can override this default style-sheet by using one of many reset style-sheets example here
User agent stylesheets will be overridden by any other styles in the following order:
Browser/user default
External
Internal (inside the tag)
Inline (inside an HTML
element)
It may also be worth reading up on css specificity as it explains a lot of simple problems you may come across

Need assistance with external CSS reference

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.