Css class for page title

h1 tag class (alternate)

I know that h1 tag is important for SEO, so all my title is H1 (bravo!) Now, I need to have a title (as the first line of a text ) a little different on some pages. Usually, I just duplicate h1 as h2 and alternate. The question: Is it possible to add a class to the title tag. (I have try without success)

7 Answers 7

You can style a header like this:

• Check you don’t have an old stylesheet cached (ctrl-F5 to reload)
• Check you don’t have any rules overriding your class (inspecting with Firebug or similar is very helpful here).
• Check for typos in the HTML and CSS

It sounds like you had h1 .myClass instead of h1.myClass — there’s an important distinction:

h1 .myClass < >/* any element with within an */ h1.myClass < >/* any with */ 

@marc-andre menard: The class attribute is just to reckon that element among the given class. What do you expect it to do?

sorry my error, duplicate the H1 and make it h1 .someclass now it work great without the h1 thag, just class !

@marc-andre menard: If you want to select only h1 elements of a specific class, use the h1.someclass CSS selector.

It sounds like you are using h1 for all titles on the page. Typically you would have a single h1 tag on the page for what the page contains (with text at least partly matching the title of the page), and lesser header tags for headlines of different parts of the content. That way you give most information to the search engines about what’s important on the page. There are of course pages that doesn’t fit into this model, but many do.

There are many different ways that you can specify a style for headers. For example:

For all h1 tags inside an element with id=»main» :

For all h2 tags with class=»Info» :

For all h3 tags inside an element with class=»More» :

Источник

Css class for page title

Но есть способ альтернативной стилизации «атрибута title» — для этого вам понадобится:

Вместо «атрибута title» используем атрибута data.

Далее. нам понадобится какой-то тег . пусть это будет тег a

Для вывода картинки используем (before), смотрим на картинку:

Для вывода текста стилизованного атрибута title используем (after):

Код стилизации атрибута title

Исполнение Кода стилизации атрибута title

Скачать данный пример стилизации атрибута title

В архиве пример со стилями и кодом описанных в данном примере.

Стилизовать атрибут title №2

Сверху я рассмотрел вариант стилизации декорирования атрибута title и там картинка.

А вдруг ваи не нужна картинка. я и сам уже подумал. зачем нужна дополнительная картинка!

Давайте стилизуем атрибут title без картинки!

Для этого вам понадобится:

Опять место «атрибута title» используем атрибута data.

Используем(опять) какой-то тег . пусть это будет тег a

Для вывода текста стилизованного атрибута title используем (after).

В свойство content помещаем указание на атрибут, который надо показывать.

Код стилизации атрибута title

Исполнение Кода стилизации атрибута title

Для того, чтобы увидеть действие стилизации атрибута title — наведите мышку на ссылку ниже.

Скачать данный пример стилизации атрибута title

В архиве пример со стилями и кодом описанных в данном примере.

Источник

add title attribute from css

For anyone reading this in the future, you can create custom tooltips with CSS using pseudo elements you can either specify the text value in a custom data-* attribute or the content property. See this answer — stackoverflow.com/questions/1055581/…

8 Answers 8

Well, although it’s not actually possible to change the title attribute, it is possible to show a tooltip completely from CSS. You can check a working version out at http://jsfiddle.net/HzH3Z/5/.

What you can do is style the label:after selector and give it display:none, and set its content from CSS. You can then change the display attribute to display:block on label:hover:after, and it will show. Like this:

label::after < content: "my tooltip"; padding: 2px; display: none; position: relative; top: -20px; right: -30px; width: 150px; text-align: center; background-color: #fef4c5; border: 1px solid #d4b943; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; >label:hover::after

+1, you can even use data attributes as the source for the tooltip. Example fiddle. (This way your content remains in HTML, and your CSS again only is used to tell the browser how to show it).

This should be the accepted answer. The question was, essentially, how can I add a tooltip using css? This answers it the best.

I would avoid this sort of thing when the information is important, as otherwise it will not be available to screenreaders and a11y users.

Note: :after should be replaced with ::after . While both work, it’s technically not a pseudo-class but a pseudo-element which use a double colon.

You can’t. CSS is a presentation language. It isn’t designed to add content (except for the very trivial with :before and :after ).

Quentin is correct, it can’t be done with CSS. If you want to add a title attribute, you can do it with JavaScript. Here’s an example using jQuery:

Yes i did but this was done in my base page where some other page can be included i dont know why its not working

can you post a link? hard to say without seeing it. try enclosing the above with $(document).ready(function() < and >); so that the jquery waits until the document (and thus target element) has loaded before running.

As Quentin and other suggested this cannot totally be done with css(partially done with content attribute of css). Instead you should use javascript/jQuery to achieve this,

document.getElementsByClassName("mandatory")[0].title = "mandatory"; 

$('.mandatory').attr('title','mandatory'); 

document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory'); $('.jmandatory').attr('title', 'jmandatory');

 Place the Mouse Over the following elements to see the title, 
 
->Javascript Mandatory 
 
->jQuery Mandatory

It is possible to imitate this with HTML & CSS

If you really really want dynamically applied tooltips to work, this (not so performance and architecture friendly) solution can allow you to use browser rendered tooltips without resorting to JS. I can imagine situations where this would be better than JS.

If you have a fixed subset of title attribute values, then you can generate additional elements server-side and let the browser read title from another element positioned above the original one using CSS.

div < position: relative; >div > span < display: none; >.pick-tooltip-1 > .tooltip-1, .pick-tooltip-2 > .tooltip-2

 
Hover to see first tooltip
 
Hover to see second tooltip
 

Note: It’s not recommended for large scale applications because of unnecessary HTML, possible content repetitions and the fact that your extra elements for tooltip would steal mouse events (text selection, etc)

Источник

Is it possible to define a title attribute by class name?

I would like to make all .note elements have a specific tooltip. Is it possible to do this automatically, e.g. in CSS? Just like the note class has colors and a font defined, is it possible to bind the tooltip text (the title attribute) with that class? I could make some function that iterates over all .note elements and append the title attribute if it’s not present yet. However, since I don’t have to iterate manually for CSS styles, I was wondering if there is a more elegant solution to this problem as well (e.g. is it possible to define it in CSS?).

5 Answers 5

You can’t change the attributes of an element using CSS; you could, perhaps, emulate the title functionality, though (albeit only clumsily):

However using this will still allow the original title to show, so I’d suggest removing that attribute with JavaScript (or in a server side language).

Possible JavaScript title-removal method:

var notes = document.getElementsByClassName('note'); var notesNum = notes.length; for (i=0; i

Edited, as the OP, from comments (below) doesn’t want to change the existing look and feel, to add a JavaScript option to assigning a new title for all elements with the class-name of note :

var notes = document.getElementsByClassName('note'); var notesNum = notes.length; var newTextForNotesClass = "This is the new title text for the notes-class-name group."; for (i=0; i

Источник

Styling HTML Title attribute using CSS

It works okay, but when I enter data into the field, the data is gray and italic. I want the data (value) to be normal and black, and only the title to be italic and gray. Any ideas?

You can’t change the style of the title attribute as this is handled by the OS. What you have selects an input element that has a title attribute

You can use JavaScript to change the title property into another thing and finally, you can customize this other thing. Take a look here

3 Answers 3

You can do a custom solution using CSS3.

Take a look at How to change the style of Title attribute inside the anchor tag?. But might I suggest that you use a custom field like ‘data-title’ so the default browser behaviour doesn’t interfere with your custom solution.

You can add the input’s title in and then change the property of the title from css like below:

input[type="text"][title]:hover:after

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it’s working) usually wont help the OP to understand their problem.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник