Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to change the background color multiple times within one page. Is there a way to put CSS in an HTML body?
There are two primary ways to do this:
1. Inline (Styles)
<div style="background-color: blue;"></div>
2. In-Page Block (Styles)
These are typically defined in the <head> section of the page.
<style>
.bg-blue {
background-color: blue;
}
</style>
If you are going to write your styles within a single page, I strongly advise going with "Option #2: In-Page Block" since it allows for reusability and is easier to maintain.
Does that help to answer your question?
You can use <style></style> tags and put styling inside them, too. Best put into the <head> section.
<style>
body p {
font-size: 18px;
}
</style>
If you mean "Can I write inline css within the html body" then yes, you can! (See below). But having a separate CSS stylesheet is generally considered the better option.
<div id="myDiv" style="background-color:red;">
<!-- content -->
</div>
Just add style="add your attribute here" to an element and then separate attributes by adding ; between attributes;
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p style="color:red;margin-left:30px;">This is a paragraph.</p>
</body>
By default css is always inside an html body. One way is to create custom styling classes with simple names, and insert the class name inside the li or p tag around your text. If it is the background color of certain entries that you want to change, do so on an entry-by-entry basis.
.p (or .li, or p style="background-color:#c0c0c0;")
{
background-color:#c0c0c0; would give you a silver-gray BG color
}
This can be put into a single line with the open and closing style tags.You will need to do this for each line or paragraph that has an original or unique BG color. The color chosen stays in effect until you change it.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm a second-year IT student and I currently need to make a website. I made a simple website and first started with an external CSS, then I converted it into an embedded type. The next step would be to convert it into inline CSS. I first did it manually but it gave the same results as with an online converter I found on the internet. Here is my HTML code with inline and media queries.
<html>
<head>
<title>Hi</title>
<style>
#media only screen and (max-device-width: 600px) {
div.size {
font-size:1000px;
}
}
</style>
</head>
<body>
<p class="size" style="font-size:100px";>Hello</p>
</body>
</html>
Here are some links to screenshots: https://drive.google.com/drive/folders/1A67dCcEOksZdoPdXkChvYCJTmLcy1TxA?usp=sharing
Your CSS rule is this:
div.size {
font-size:1000px;
}
But in your HTML code you are using the .size class on a p tag, not on a div tag, so that rule won't apply to your p tag.
Either remove the div from the class selector (making it just .size { ... }) or change the selector to p.size { ... }
Inline styles have a higher priority then internal or external styles. This makes sense, when you are trying to overwrite general style properties of a specific element:
div {
color: red;
}
<div>
I am red because the general styles (internal or external) say so.
</div>
<div style="color: blue;">
I am blue because of my inline styles. They overwrite the general styles.
</div>
It makes no difference whether you use media queries or not. Inline styles will overwrite the general styles... Unless you use the !important keyword like this:
div {
color: red !important;
}
<div>
I am red because the general styles (internal or external) say so.
</div>
<div style="color: blue;">
I have inline styles but I am still red because of the !important
</div>
However using !important can lead to more problems then it actually solves but it might be sufficient for your assignment. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for some rationales.
You can't specify media queries with inline styles. Hence, you would have to mark every single css property in the media queries with !important.
I recommend to simplify your assignment project and not use media queries here. I just doesn't work with inline styles.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Is having multiple classes in a single element a good practice? Like so:
<div class ="panel panel-primary panel-hide text-center">
Or is it better to do this:
<div class ="panel">
<div class="panel-primary">
<div class="panel-hide">
<div class="text-center">
<!-- content here -->
Or is it better to limit classes to 2 or 3 per div?
Or does it even matter?
Did you got some of these classes and pieces of code from the Bootstrap website?
Sometimes classes need to be on separate nested divs, because they use :before and :after or margin, padding or positioning for that div. When you paste all classes inside one div, this may not work, and classes may overwrite eachother.
Depends on the project, what you're trying to accomplish, and what pre-existing helpers you're using.
If you're using something like Twitter Bootstrap, use what you're given to accomplish what you need in the least amount of code.
If you're building something with custom classes, stick with one pattern and follow through. You want to be conscious of why you're adding a class, otherwise you can run into specificity problems later down the line and resort to adding more on top just to pinpoint a particular element.
If adding a class will save 10 lines of repeated code, as you repeat the same styles with like items, absolutely go for it. However, I like to try to keep the classes as streamlined as possible.
A very boiled down example:
THIS
<div class="one">
<p>
<h1>Hi there!</h1>
</p>
</div>
.one {
/* css here */
}
.one > p {
/* more css here */
}
.one > p > h1 {
/* even more css here */
}
COULD WORK INSTEAD OF ALL THIS
<div class="one">
<p class="one-p">
<h1 class="one-header">Hi there!</h1>
</p>
</div>
.one {
/* css here */
}
.one .one-p {
/* more css here */
}
.one .one-p .one-header {
/* even more css here */
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to display two kinds of styles in one webpage. I have a.css for the first style and b.css for the second style. The order is b overrides a. The problem is I want the css priority to be reversed in a particular div tag. Is this possible?
What is the reason for this? You can always override using an "!important" declaration. For example:
.style { font-size: 12px !important;}
Also, refer to this guide here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade (Specificity Calculations, Inheritance, The Cascade)
There are very few cases where you need to have 2 different CSS files to do the same thing. However, there are many methods that can fix this, one of which is just creating an class/ID of its own in what ever CSS file you want to override with and then attach it to the HTML Element.
If that doesn't work, my next suggestion would be is to try inline styling.
<div id="blabla" style="whatyouwantforthisinparticular">
You can't just "override" another script through HTML. Code works in a linear format. Once it sees a new line of code referring to that, it will take precedence based on what you did with it. For example, in CSS, you can have 2 different body stylings, but the top one's attributes will only be used unless the second has something new to add. For example:
body{ background-color:black; width: 500px;
}
body{ background-color:white; height: 300px;
}
In this example, background-color: black will changed to "white" and then it will add 500px to the height on top of the width of the previous styling. However, if you must have black, then adding !important will make it take precedence over white.
Yes you can do it using the !important attribute.
.your-class{
property: value !important;
}
Also you can do that being more specific in your class
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Is there a way to override every style property using a method similar to the !important declaration.
I want to override all properties without changing the order of the loaded stylesheets.
I'm also not able to change different stylesheets
EDIT
Might there be a way to put !important on an element?
You could be more specific in your styles.
For example, if you had HTML like this:
<div id="greg">
<p class="likes">
Hello, something <span class="toast">more</span>.
</p>
</div>
This:
span{
color:red;
}
would be over written by this:
#greg .likes .toast{
color:blue;
}
Instead of slapping !important everywhere, just make your styles more specific.
JSFiddle
Alternatively, if you can't actually edit the CSS file, you could always try inline styles, although they're harder to overwrite and shouldn't REALLY be done unless 100% necessary or you're applying styles through javascript etc...
example:
<div style="color:red">Caterpillar</div>
You should use weight of css selectors.
Good article by Chris Coyier
So you can increase the weight of your selectors using body tag for example.
div {
background: red;
height: 150px;
width: 150px;
}
body div {
background: blue;
}
the only way to do it would be to apply a !important style tag to the element in itself since this would then take preference over the style sheet declaration.
with simple html:
<p id="foo" style="color: blue!important;">LOREM IPSUM</p>
http://jsfiddle.net/vimes1984/5KbGV/
With JS:
$('#foo').attr('style', 'color:green!important');
http://jsfiddle.net/vimes1984/5KbGV/6/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am creating a website and in one of my divs I have different sections of texts.
Can someone tell me how I can change the font colour of just one of the words in the div and all the rest of the words be a different colour?
I'm using HTML and CSS on Macromedia dreamweaver.
Thanks...
You need to wrap the text in an element and style it accordingly, if you were to do this using inline CSS, you could use e.g.:
Some colours include <span style='color:red;'>red</span>, <span style='color:blue;'>blue</span> and <span style='color:yellow;'>yellow</span>
Apply the following code and a word in different colour while others having a different colour.
<span style="color:red"> WORD </span>
You can specify any colour at the place of red... or any #value for the colour.
in dreamweaver select word and change color with color picker http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a-709dc768133b3b53744-8000.html
alternaty
the alternative is to use the tag selected word
You just have to wrap your word with a <span> tag and modify its color css property.
If you want to style the first "letter" of the paragraph or of the text div, then you can use CSS pseudo selector :first-letter.
<style>
div:first-letter{
color: red;
}
</style>
Although there is a CSS pseudo selector :first-letter, for the first word you have to use <span> tag and style it.
<div>
<span style="color: red">This</span> is the solution.
</div>
You should check this post also:
CSS to increase size of first word
<style>
span { color:pink; float:left; }
span p { color:green; float:left; padding:0px; margin:0px; }
</style>
<span> <p> De </p> sign </span>
If it should be used several times, you should create a class:
<style type="text/css">
span.redAndUnderlined {color: red; text-decoration: underline}
</style>