Headings and text: how to change color, size and more
To change color, size and more of your profile headings and text
- copy an appropriate code below (Headings or Text) to some text editor
- change atributes (shown in red) to ones you want (for Possible values see Attributes), don't change those you don't want to change
- put the final code into "History" section of your profile under "Places I've been"
Headings:
h2 - your screen name
h3 - Life Path, History, About me, Friends, Groups, Interests and activities, Questions of the day, etc.
h5 - subtitles in History, Interests and activities, Questions of the day, etc.
Code to change headings
<style type="text/css">
h2 {font-family: "Times New Roman"; color: inherit; font-weight: inherit; font-style: inherit; background-color: transparent;}
h3 {font-family: "Times New Roman"; color: inherit; font-weight: inherit; font-style: inherit; background-color: transparent;}
h5 {font-family: "Times New Roman"; color: inherit; font-weight: inherit; font-style: inherit; background-color: transparent;}
</style>
* What inherit means? view link
Text:
Div - main text
link - links on your page
visited - links you visited recently
hover - active link
Code to change text
<style type="text/css">
Div {font-family: "Times New Roman"; font-size: inherit; color: #000000; font-weight: normal; font-style: normal;}
A:link {font-family: "Times New Roman"; font-size: inherit; color: inherit; font-weight: normal; font-style: normal;}
A:visited {font-family: "Times New Roman"; font-size: inherit; color: inherit; font-weight: normal; font-style: normal;}
A:hover {font-family: "Times New Roman"; font-size: inherit; color: inherit; font-weight: normal; font-style: normal;}
</style>
Attributes
Color
color or background-color can be
- name
16 valid predefined color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow - hex code
Examples: #000000 [black], #FFFFFF [white], #0000FF [blue]
for 216-colors hex codes view link - rgb (red/green/blue)
Example: rgb(255,0,0) [red] - inherit
- transparent
for background-color in h2, h3, h5 if your want transparent background
Font Family
font-family:
"browser safe fonts": Arial, Comic Sans MS, Courier New, Georgia, Lucida Console, Times New Roman, Verdana, Symbol, MS Sans Serif
To learn more about "browser safe fonts" view link
Size, Weight and Style
| font-size:
Possible Values
|
font-weight:
|
font-style:
|
Compiled and posted by Muchan
What "inherit" means?
Reply #1: "inherit" means 'use the same value as before'. So, if the previous font-weight was bold, this one will inherit that level of boldness. Or you can specifically say which level of font-weight you want: normal , bolder, bold, or lighter.
Same thing for font-style: you can keep it the same as the parent style (that's where the inherit comes from) or change it to normal, italic or oblique.
CSS = Cascading Style Sheets.
HTML text styles are set with style sheets. At the beginning of a web page, an overall typeface, font size, font weight, font color, etc are set up.
Each smaller division of the page can override those settings or parts of them. If no new instructions are given at the beginning of the smaller division, everything stays the same as the 'parent' style.
A division can have a division under it, just like a book can have various subheadings within a chapter. The "parent' is the just previous style. The 'child' is the new style that is making tweaks on the parent style.
The child style becomes the parent style for the next smaller division.
So 'inherit' simply adds to that parent/child metaphor saying the child is just like the parent.
Posted by colleenm
Back To Top - Back to Html Workshop Group