I'm currently stuck at a probably very trivial problem:
I have a simple HTML/CSS page with a text:
<head></head>
<body>
This is a Text about Foobar.
</body>
How is it possible to assign a CSS-class/id to the word Text without breaking the format? Let's say I want to add the class .yellow to it, which displays the text with a yellow background.
I think I got something blocking my mind cause it can't be that difficult... But all I can google (mostly trivial tutorials) uses CSS just on usual HTML-elements like <p> or <b> which would break my format.
I think you are missing out on <span> tag.
Try this out:
<head></head>
<body>
This is a <span class="yellow">Text</span> about Foobar.
</body>
And in CSS:
.yellow{
color:yellow;
}
Use an inline element. Span is purpose build for that. Alternately, if you wish to have semantic meaning behind your highlighted section, you can re-style <em> or <strong> with something like:
strong.highlight{
font-weight:normal;
font-style:normal;
background:yellow;
}
You just need to wrap the section in a span like:
<span>This is a <span class='yellow'>Text</span> about Foobar.</span>
See a working example here http://jsfiddle.net/dZZfB/
Hope that helps
The HTML for Example:
<center><span class="t1">Test1</span></center>
The CSS:
<style type="text/css">
.t1 {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
Related
I'm pretty new to CSS/HTML and I need a little help with styling. So I have a CSS style sheet where I did something like this
p{
color:black;
}
Then in my HTML, inside of my footer tag, I have a paragraph.
The problem I am having is that I want the color of the paragraph inside of my footer to be blue.
I tried doing something like this:
footer{
color: blue !important;
}
but it didn't work so I was wondering how I can get just the paragraph in my footer to be blue because I want the rest of my paragraphs to be black.
If the !important method is the wrong approach I was wondering why? From my research, I thought it was supposed to override any previous styling.
Answer:
Why is !important not working on my stylesheet?
It is working perfectly as it is designed.
How I can get just the paragraph in my footer to be blue
For this, please use the appropriate selector.
footer p{
color: blue;
}
That is a bad practice
Try doing something like this
For your Footer
HTML
<div class="footer">
<p>This is a paragraph.</p>
</div>
CSS
.footer p {
color: blue ;
}
Don't use important tags.
I got the page (can control the content) which can only run html (not javascript) like this:
<style>
h1 { color:red }
</style>
<object data=something.html ></object>
in something.html, it contains:
<h1>
simple example
</h1>
and the css not work in this case, I expect the simple example to be red, it still black. Is there possibly any way that my css affect the rendered html source? (can replace object tag with any tag)
Try adding
<style>
h1 { color:red }
</style>
in something.html
Hope it is the way you looking for .
You can try this.
<style>
h1 { color:red !important }
</style>
<h1>
simple example
</h1>
How can I create a single-line text with different colors in it in HTML? Like inner div tags with different style attributes in it. Is it possible?
Thanks in advance.
Try to separate parts with the same color to the span tags with different styles. Span is more suitable than div here, because span is only considering line formatting, not the whole block of code.
Otherwise, using pure HTML for styling text is not recommended and it's generally considered to be a very bad practise.
Example:
HTML
<html>
<head>
<title>Colors</title>
</head>
<body>
This text will be <span class="g">green</span> and <span class="b">blue</span>.
</body>
</html>
CSS
.g {
color: green;
}
.b {
color: blue;
}
I am trying to remove an underline from an href, that is wrapped in a div element. But for some reason it is not being removed.
Can anyone please help me? Below is the code.
<style>
a .menu_items {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
</head>
<body>
<div class="menu_items"> Pizza </div>
Try this:
a {
text-decoration:none;
}
Cause you are trying add text-decoration to the div with class .menu_items but not for tag a
you can do this and it will be easier after developing more pages and you will not have to create a style for each one you only have to call your style from your css
i explain you...you have to found your css default in your project or create a new one and load in your page where you want to call the styles that you will create in your css file....insert this in your css
a {
text-decoration:none;
font-size: 34px;
color:red;
}
and in your page after loading your css file you only have to copy this as you were codding
<body>
<div class="menu_items"> Pizza </div>
</body>
i hope i helped you
Please try putting the A link inside the DIV then reverse the CSS order. I believe the other way around is not valid.
just delete the selector '.menu_items' like this
<style>
a {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
<a href="#">
<div class="menu_items">
Pizza
</div>
</a>
here's the jsfiddle
The CSS property for removing the underline is
text-decoration:underline;
You will need to apply this to your anchor element.
See this here-> http://jsfiddle.net/CzDkH/
Hope this helps!!!
Place this above all your styles:
a {
text-decoration:none;
}
Get in the habit of placing all a , html , and body style properties at the top of your styles too! It will save you from headaches like this.
Happy styling :)
If you only want to do it for the class "menu_items" and not in the rest of the page, the only thing is you've got it back to front. It's like this:
.menu_items a {
text-decoration:none;
font-size: 34px;
color:red;
}
Similarly you've got the div inside the a tag, and should have the a tag inside the div
<div class="menu_items">Pizza</div>
Is there anyway to style Plain text without HTML tag in HTML.
Example: like I type in HTML some plain text say
hello world -> Can I style this plain text without any tag
and not like
<div> Hello World </div>
Plain text is contained within an element: the body element:
<body>
Hello, world!
</body>
Because of this, you could style this text by simply styling the body element:
body {
color: red;
text-decoration: underline;
}
Depending on the context though, CSS3 does provide two pseudo-element selectors which could be used for this: :first-line and :first-letter.
To style the "H" you could simply use:
body:first-letter {
font-size: 32px;
}
If there was a <br> element separating your first line from another line, you could also make use of :first-line:
<body>
Hello, world!<br>
Second line.
</body>
body:first-line {
font-style: italic;
}
JSFiddle demo.
You will need to use a span or something of that nature to target certain parts of text. With only the use of css a tag is required to style the text.
You can achieve that effect like so with span,
<p>I can style <span>this</span> text with the use of a tag</p>
p span {
color: teal;
}
I found this article on adding an underline to certain words. With the use of a script you could tweak this around to work how you want it to and without you adding an html tag by hand. Instead the jQuery will be adding the tag for you.