- W3C Style Sheets
- W3C document types
- Team categories
- Member categories
- Public categories
- Linking to style sheets
- W3C classes
- HTML Links
- HTML Links — Hyperlinks
- HTML Links — Syntax
- Example
- HTML Links — The target Attribute
- Example
- Absolute URLs vs. Relative URLs
- Example
- Absolute URLs
- Relative URLs
- HTML Links — Use an Image as a Link
- Example
- Link to an Email Address
- Example
- Button as a Link
- Example
- Link Titles
- CSS Links
- Styling Links
- Example
- Example
- Text Decoration
- Example
- Background Color
- Example
- Link Buttons
- Example
- More Examples
- Example
- Example
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- HTML Tag
- Browser Support
- Attributes
- Global Attributes
- Event Attributes
- Related Pages
- Default CSS Settings
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
W3C Style Sheets
This page documents how W3C uses style sheets on our own server. Due to a large number of historical documents which we still want to make available, documents on our server are not consistent in their use of style sheets. However, if you author new documents you must use style sheets.
This page is publically readable. If you come from the outside, feel free to look around to see how we use style sheets at W3C. Some of the pages pointed to from these pages aren’t publically readable. Though.
- the look of ours pages become more consitent
- the HTML markup on our pages become simpler
- as an author, you don’t have to worry much about presentation issues
- find the right category for your document
- insert a LINK element pointing to the style sheet in your document
W3C document types
The list below contains common document types on the W3C server and each of these types should have a style sheet associated with it. Some of them will be quite similar in the beginning, but will allow more distinct presentations when we are ready. Please use the style sheets where they exist, else the generic style sheet for the access level — Tim.
Team categories
Member categories
Public categories
category | style sheet | sample page |
---|---|---|
activity statement | activity.css | |
overview page | activity-home.css | |
Recommendation | TR/W3C-REC.css | |
Proposed Recommendation | TR/W3C-PR .css | |
Working Draft | TR/W3C-WD.css | |
Note | TR/W3C-NOTE.css | |
press release | ||
submission | ||
FAQ | ||
the front page | ||
mail archive | ||
message in archive | ||
generic pages | base.css |
Team | Member | Public |
---|---|---|
briefing | activity statement (activity.css) | |
plan | newswire | overview page (activity-home.css) |
Team guide (hitchhikers guide to..) | newsletter | REC |
process document | WD | |
WG page | NOTE | |
team minutes (team-minutes.css) | WG minutes | press release |
WG mail archive | faq | |
WG charter | submission | |
team page | ; Member site home | the front page |
mail archive | mail archive | mail archive |
message in archive | message in archive | message in archive |
generic pages (team.css) | generic pages (member.css) | generic pages (base.css) |
—>
Linking to style sheets
Then replace the x’es with the name of your style sheet, e.g. «member». The «.css» extension is not necessary. So, the start of your document will typically look something like:
W3C classes
Below is a very sketchy list of possible class names to encode semantics. Using these, we could e.g. give member-only links a certain color.
A.member | member only links |
P.policy | Policy footnotes |
.editorial | editorial remarks |
.errata | errata to our specifications |
.speaker | The name of the speaker in the minutes |
.site | The name of the site in minutes |
.action | Outsanding action item |
.done | Completed action item |
This list will never become complete, but we should try to converge around a core set of classes for each of the document types. —> Håkon, with input from Henrik, Tim, Bert, Chris, Sally.
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links — Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML element!
HTML Links — Syntax
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links — The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
- _self — Default. Opens the document in the same window/tab as it was clicked
- _blank — Opens the document in a new window or tab
- _parent — Opens the document in the parent frame
- _top — Opens the document in the full body of the window
Example
Use target=»_blank» to open the linked document in a new browser window or tab:
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):
Example
Absolute URLs
W3C
Relative URLs
HTML Images
CSS Tutorial
HTML Links — Use an Image as a Link
To use an image as a link, just put the tag inside the tag:
Example
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):
Example
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
Example
Tip: Learn more about JavaScript in our JavaScript Tutorial.
Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
CSS Links
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color , font-family , background , etc.).
Example
In addition, links can be styled differently depending on what state they are in.
The four links states are:
- a:link — a normal, unvisited link
- a:visited — a link the user has visited
- a:hover — a link when the user mouses over it
- a:active — a link the moment it is clicked
Example
/* unvisited link */
a:link color: red;
>
/* visited link */
a:visited color: green;
>
/* mouse over link */
a:hover color: hotpink;
>
/* selected link */
a:active color: blue;
>
When setting the style for several link states, there are some order rules:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:visited text-decoration: none;
>
a:hover text-decoration: underline;
>
a:active text-decoration: underline;
>
Background Color
The background-color property can be used to specify a background color for links:
Example
a:link <
background-color: yellow;
>
a:visited background-color: cyan;
>
a:hover background-color: lightgreen;
>
a:active background-color: hotpink;
>
Link Buttons
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
Example
a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: red;
>
More Examples
Example
This example demonstrates how to add other styles to hyperlinks:
Example
Another example of how to create link boxes/buttons:
a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>
a:hover, a:active background-color: green;
color: white;
>
Example
This example demonstrates the different types of cursors (can be useful for links):
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
HTML Tag
The tag defines the relationship between the current document and an external resource.
The tag is most often used to link to external style sheets or to add a favicon to your website.
The element is an empty element, it contains attributes only.
Browser Support
Attributes
Attribute | Value | Description |
---|---|---|
crossorigin | anonymous use-credentials | Specifies how the element handles cross-origin requests |
href | URL | Specifies the location of the linked document |
hreflang | language_code | Specifies the language of the text in the linked document |
media | media_query | Specifies on what device the linked document will be displayed |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer to use when fetching the resource |
rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet | Required. Specifies the relationship between the current document and the linked document |
sizes | HeightxWidth any | Specifies the size of the linked resource. Only for rel=»icon» |
title | Defines a preferred or an alternate stylesheet | |
type | media_type | Specifies the media type of the linked document |
Global Attributes
Event Attributes
Related Pages
Default CSS Settings
Most browsers will display the element with the following default values:
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.