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>
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 needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Given the following CSS and HTML, why does it produce a blue background?
div div { background-color: blue }
.myClass { background-color: green }
<div>
neither green nor blue
<div class="myClass">
should be green but is blue
</div>
</div>
If I understand selector calculation correctly, the first rule should evaluate to 0:0:2, while the second should evaluate to 0:1:0. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity mentions inherited styles being overridden, but this is a direct application of class on the div, not an inherited style. What am I missing here?
UPDATE
I am working in Angular 8, and here's a screenshot of the thing that's been confounding me. So...since this works outside of Angular, is this somehow an Angular issue?
Here's the devtools console, showing the override and the css rules...
After looking closely at the CSS style calculations in the second image, I think I realize now what's going on. If someone can confirm this, I'd appreciate it. The generated CSS
div[_ngcontent-xpy-c52] div[_ngcontent-xpy-c52] {
appears to have attributes attached. Those attributes ratchet up the class score of the div div rule, making it override the .myClass rule. Even though the original CSS does NOT contain those attributes, what basically every browser sees is what I have quoted here, and so the outcome at runtime is quite different from what one would otherwise expect.
enter image description here
Your code worked correct. Here my code.
<style>
div div { background-color: blue }
.myClass { background-color: green }
</style>
<div>
neither green nor blue
<div class="myClass">
should be green but is blue
</div>
</div>
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.
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.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
while making navigation tab in the anchor tag i used the text-decoration:none; command in the css file but the under line and color change still appears for me.Is there any way to remove the under line and color changing
Just by what you said I will take a guess where you went wrong.
#text-decoration:none; is not vaild due to the # in front, you use it in CSS.
Within the style of a div:
<div class="test" style="text-decoration:none;">Test</div>
Now within style tags:
.test {
text-decoration:none;
}
I'm sure from this you will be able to work out how to do what you want with it.
click here working demo
css
.lorem a{
text-decoration:none;
color:red;
}
html
<div class="lorem">
lorem ipsum
</div>
Style like this.
ul > li > a {
text-decoration:none
}
And it will work 100% unless u have nestede the A really wirede.
If you would share your actual CSS it would be easy to help you, but for now we have to guess...
Try to remove the hashtag before removing the decoration:
linkElement
{
text-decoration:none;
}
If you select the element by class, use
.linkElement
{
text-decoration:none;
}
If you select the element by ID, use
#linkElement
{
text-decoration:none;
}
Make sure you do this one the actual element carrying the underline. If the A (hyperlink) has underline, dont select the LI covering it:
Wrong example:
<ul>
<li>
underlined words
</li>
</ul>
ul li
{
text-decoration:none;
}
Right example:
<ul>
<li>
underlined words
</li>
</ul>
ul li a
{
text-decoration:none;
}