You get a bonus - 1 coin for daily activity. Now you have 1 coin

WORDPRESS 19 HEX codes and link styles

Lecture




Continuing to get acquainted with CSS, today we will learn more about HEX codes. The color property with an assigned hexadecimal HEX code (hexadecimal (hex) code) is used to color the text. For example, body {color: # 000000;} means that all the text inside the <body> tag of your page will be black.
A background property with an assigned HEX code exists to give color to everything that is not text. For example, body {background: #ffffff; } means the background will be white.

Hexadecimal Codes:

  • with the preceding # sign, each HEX color code has six digits. These numbers range from #ffffff (white) to # 000000 (black).
  • #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, # 999999, # 888888, # 777777, # 666666, # 555555, # 444444, # 333333, # 222222, # 111111, # 000000.
  • the first two digits represent red, the third and fourth digits are green, the last two digits are blue. # ff0000 is red. # 550000 is dark red. # 220000 is burgundy. # 00ff00 is green. # 0000ff is blue. Stop, and isn't yellow the main color? What code is yellow? # ffff00 is yellow. # ff00ff - purple.

Step 1

Paste the following code under the body {} selector:

?
one
2
3
four
a, a:visited{
text-decoration : underline ;
color : #336699 ;
}

You made all the links underlined (text-decoration: underline;) and highlighted in blue (color: # 336699;). This is a different shade of blue, but it is blue, because the last two digits characterizing the degree of blue are the largest.

  • a - and this is for styling links. When you want a word to turn into a link, what do you use? The <a> and </a> tags, therefore, A is a in your CSS.
  • a: visited - to style links that you have visited before.
  • instead of inserting:
?
one
2
3
four
a {
text-decoration : underline ;
color : #336699 ;
}

and

?
one
2
3
four
a:visited {
text-decoration : underline ;
color : #336699 ;
}

we list the attributes separated by commas to apply the same parameters to both selectors at once.

Step 2

Paste the following code under a, a: visited

?
one
2
3
a:hover{
text-decoration : none ;
}

What does it do? You have verified that the underlining of the link disappears when you hover over it, hence a: hover. If you do not want the default underscore, and that it appears only during the cursor, then change the value of the text-decoration parameter : for a and a: hover, vice versa. If you want the link to change color when you hover the cursor, add color: and any color code. For example:

?
one
2
3
four
a:hover {
text-decoration : none ;
color : #ff0000 ;
}

For now, try and do not be afraid to make mistakes and ask for advice!

Comments

To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Content Management Systems (CMS)

Terms: Content Management Systems (CMS)