I have new to CSS / HTML , sorry to ask such question .
I want to have a CSS / HTML code to make the word "testing" do not have underline , but I still find the underline on the web page , would advise how to change it to make it work ?
<a style="a:link {text-decoration:none;}" href="http://example.com" >testing</a>
you need to change this
<a style="a:link {text-decoration:none;}" href="http://example.com" >testing</a>
to this
<a style="text-decoration:none;" href="http://example.com" >testing</a>
check this fiddle
http://jsfiddle.net/K6CdG/
If you add a style property to an HTML object, you don't have to add the CSS Selector. The style property in an HTML object only works for that particular object.
So in your case you only have to add style="text-decoration:none;" into the HTML object.
However, if you don't want text-decoration in every <a> objects on the page, you have to add the CSS within the <style> tags in the <head> tags.
<style>
a {
text-decoration:none;
}
</style>
You could also link to an external CSS page. Most people prefer this to keep their document structured. To achieve this you have to add the following code in the <head> tags:
<link rel="stylesheet" type="text/css" href="style.css">
Change href=style.css to the file name of your CSS file (.css file extension included).
You can do it in this way as well if you want to change it just only for this anchor tag.
<a class="myUndecoratedLink" href="http://example.com" >testing</a>
Define below style either in a external CSS file or in your HTML.
.myUndecoratedLink,.myUndecoratedLink:HOVER {
text-decoration: none;
}
Try to define style in external file instead of inline styling as you are doing to make it more manageable.
In this way you can benefit of Themes be creating different CSS files one for each theme.
For more info have a look at below post:
The 3 ways to insert CSS into your web pages
CSS How To...
Related
If I write this in my external css file it does make 'a' text green.
.ink-navigation ul.menu.black li ul.submenu li a {
color: green;
}
but this works
<nav class="ink-navigation">
<ul class="menu black">
<li>
<ul class="submenu">
<li>
This is a text
</li>
</ul>
</li>
</ul>
</nav>
Does anybody knows why the external css does not work?
CSS executes in order; therefore rules at the bottom of your CSS are given higher priority and override any prior rules. Also, inline CSS executes after the stylesheet and since it is seen last, it takes priority.
A simple fix would be to add important to the colour... e.g:
color: green!important;
On a side note, I highly recommend that you reduce your code by removing unnecessary bloat which actually contributes to such problems as this. If .ink-navigation is unique you don't need to use your current format. Use .ink-navigation ul li ul li a {} or even .ink-navigation .submenu a {}. However, if you have existing rules with the larger format then that will override the shorter format, so its important to address all occurrences if you want to shorten your code.
Most likely your external CSS is not linked to correctly in your HTML.
Example of how to link a CSS file that's in the same folder as your HTML:
<link href="./main.css" rel="stylesheet">
Also, just a tip - it's usually clearer code to understand and debug if you just put an id or class (i.e. id="green-title") as an attribute for your tag.
#green-title {
color: green;
}
In the head tag ,first Place bootstrap file on the top, then css file below. with this you don't want to use !important in every style code.
Where have you attached your css external files?
You should have something like this in your header
<link rel="stylesheet" type="text/css" href="CSS/cssFile.css">
I am using jsonform (https://github.com/joshfire/jsonform) in order to generate forms from json schema, and the jsonform requires his own css for the form, but i am using another css for my site's template.
Is there a way to apply a css only on a specific tag ? for example only to the html inside ?
I am using rails, so the head is not changing from page to page.
thanks.
If you're using a CSS preprocessor (i.e. SASS, LESS, SCSS, etc.) then it might be an easy job to just indent your custom css under one class/id/tag. You can check this SO question: apply CSS style to particular elements dynamically.
Try this>>>
<link rel="stylesheet" type="text/css" href="theme1.css">
<link rel="stylesheet" type="text/css" href="theme2.css">
Inside theme 1 you would link to certain classes and in theme2 you would link to other classes. Please comment back if you need more help or this is not ideal
for example html
<div id="test" class="testing"></div>
the css would be
#test{color:red;}/*for ids*/
.testing{color:red}/*for classes*/
the styling in the curly brackets can be changed to what you want and the classes and ids can be in any external css if you link your page to it using link rel=
Yes you can. You need to give an ID to the body of your HTML doc if you want to target only that page, or give an ID or class to the element you need to.
<!-- HTML -->
<div class="your-class">
Your content
In the CSS:
.your-class {
your: style;
}
or
<!-- HTML -->
<body id="your-id-name">
<div class="generic-class">
Your content
/* using CSS */
body#your-id-name {
your: style;
}
body#your-id-name .generic-class {
your: style;
}
Hope it helps ;-)
Yes, offcourse there is, that's what CSS is all about.
If you add an ID or a class to the containing element that holds the form, you can add that ID or class to all the CSS selectors in the JSONform css.
for instance:
<div class="jsonform">
{json form goes here}
</div>
and then in your jsonform css, prepend '.jsonform' to all the necessary selectors:
.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}
I had a look at that jsonform css. I'm amazed that it just uses the complete Twitter bootstrap CSS, there's quite a lot of styling in there that will definitely override your own CSS. I would try to strip out anything that's not directly needed for the form, like body, img, p and h1 declarations.
Maybe the form works fine without the extra styling; you can then apply your own CSS to the form elements...
The CSS included with jsonform is Bootstrap, but the README.md in the /deps directory states that usage of this file is optional. As long as you don't include bootstrap.css in your HTML, you can style the form controls however you'd like/avoid Bootstrap overriding your own styles.
If you want to keep using Bootstrap for jsonform ONLY, you can try "namespacing" the Bootstrap styles using LESS or SASS. Have a look at the first two answers to 'How to namespace Twitter Bootstrap so styles don't conflict' for an idea how to do that with LESS.
I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>
I'm using WordPress to host a blog. They have a tag cloud widget. The tags are like this. The class name changes with each tag
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
<a class="tag-link-10" title="1 topic" style="font-size: 8pt;">Blah Blah X</a>
The parent element is <div class="tagcloud">
Normally, with the theme I'm using, I can add custom styles like this
.custom .tag-link-1- {font-size: 10px}
but with the class name changing each tag, I have to constantly add new styles. Is there a way to do a CSS that will capture all the tag-links independent of the number?
Not in a backwards compatible way, no.
CSS 3
a[class^='tag-link-'] {
font-size:10px;
}
I would define a numberless class to hold all the common style info.
.tag-link { font-size:10px; }
Then attach it to each element.
<a class="tag-link tag-link1">Link</a>
You have two options that will work well for you in this scenario.
Option 1: Use CSS Selectors
If your tags are wrapped within some kind of a div, such that:
<div id="tag-cloud">
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
.
.
.
</div>
Use this CSS:
#tag-cloud a { ... } /* Each tag will be styled */
Option 2: Use jQuery!
If you can't figure out option 1, you can always use jQuery to style the element:
$('a[class^="tag-link"]').css( ... );
Refer to this for documentation on how to use the CSS function in jQuery
Option 3: Modify the Wordpress Widget file
You could always go into your wordpress files and modify what gets displayed in the output. I'd recommend removing style="font-size: 8pt;" bit, and then using Option 1 to style the links.
The downside to Option 3 is that you lose the Tag Cloud functionality that makes the links bigger when they appear more often. That might not matter to you, but it's something to consider.
If all tags are getting the same style can you not do:
.tagcloud a {font-size: 10px}
If not please clarify your question.
Thanks!
edit if you are not worried about css validation you can use .custom a {font-size:10px !important;} to override inline styles. If using jQuery is an option, remove the inline styles: $('.tagcloud a').removeAttr('style');
I'm making a web page where I want the color of the font to be red in a paragraph but I'm not sure how to do this.
I was using FrontPage for building web pages before so this HTML stuff is really new to me. What is the best way to do this?
<p style="color:red">Foo</p>
Or preferrably:
<p class="error">Foo</p>
Where "error" is defined in your stylesheet:
.error {
color: red;
}
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Explanation :
<[tag] style="[css]"> Content </[tag]>
Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.
and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"
The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.
For example:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="hilight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
Brief CSS Explanation :
Since most of the answers you're getting are all mentioning CSS, I'll add a small guide on how it works:
Where to put CSS
First of all, you need to know that CSS should be added inside the tags of your document. The tags used to define where the CSS is going to be are:
<style type="text/css"> <!-- Your CSS here --> </style>
This is called embedded CSS since it's inside the document. However, a better practice is to link "include it" directly from an external document by using the following tags:
<link href="file.css" media="all" rel="stylesheet" type="text/css"/>
Where file.css is the external file you want to include into the document.
The benefits of using the "link" tag is that you don't have to edit in-line CSS. So lets say if you have 10 HTML documents and you want to change the color of a font you just need to do it on the external CSS file.
This two ways of including CSS are the most recommended ways. However, there's one more way that's by doing in-line CSS adjustments, for example:
<[tag] style="<!-- CSS HERE -->"> Content </[tag]>
CSS General Structure
When you code write CSS, the first thing you need to know is what are classes and what are id's. Since I already mentioned what they do above I'm going to explain how to use them.
When you write CSS you first need to tell which elements you're going to "select", for example:
Lets say we have a "div" element with the class "basic" and we want it to have a black background color, a white font, and a gray border.
To do this we first need to "select" the element:
.[identifier] { }
Since we're using a class we use a "." in front of the identifier which in this case is: "basic", so it will look like this:
.basic { }
This is not the only way, because we're telling that ANY element that has the class "basic" will be selected, so lets say we JUST want the "div" elements. To do this we use:
[html-tag].[identifier] { }
So for our example it will look like this:
div.basic { }
Now we've selected the "div" with the class "body". Now we need to apply the visual style we wish. We do this inside the brackets :
div.basic {
background-color:black;
color:white;
border:1px solid gray;
}
With this, we just applied successfully a visual style to all "div" elements that have the "basic" class attached.
Remember this doesn't just apply for "class" it also applies for "id" but with a slight change, here an example of the final code but instead of a class we'll just say it's a "id"
#unique-basic {
background-color:black;
color:white;
border:1px solid gray;
}
For a complete guide to CSS you can visit this link:
http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.
<style type="text/css">
.myCSS
{
color:red
}
</style>
<div class="myCSS">text</div>
<span class="myCSS">text</span>
<p class="myCSS">text</p>
<!-- table elements..... -->
<td class="myCSS">text</td>
<tr class="myCSS">text</tr>
<p style="color:red">Your Text here</p>
But as others have by now said in more and better words: Even better than the above would be to use classes or IDs and assign the CSS-attributes to that instead of using the inline style.