Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>
- Наследяване
- </title>
- <meta charset="UTF-8"/>
- <style>
- header, section{
- display:block; /* the element is wide as its parent or the screen width */
- border:solid 3px black; /* black border with 3px thickness */
- }
- header div a{ /* target all links "a" inside divs, which are inside header */
- text-decoration: none; /* remove underline*/
- font-size:18px; /* text size */
- color:#0CBF0F; /* text color */
- }
- a:hover{ /* pseudoclass, this rule will apply only when the user is hovering over links */
- background:black; /* background color */
- color:white; /* text color */
- }
- section a.link-style{
- background: #3498db; /* background color */
- border-radius: 28px; /* rounded edges */
- font-family: Arial; /* text type */
- color: #ffffff; /* text color */
- font-size: 20px; /* text size */
- padding: 10px 20px 10px 20px; /* the extra empty space inside an element going from top, right, bottom, left */
- text-decoration: none; /* remove underline */
- margin:10px 15px 20px 25px; /* the extra empty space around the element going from top, right, bottom, left */
- display:inline-block; /* the element does not take a whole row or width of its parent, but enough for its size*/
- }
- section a.link-style:hover{
- background: #3cb0fd; /* background color */
- }
- </style>
- </head>
- <body>
- <header>
- <div>
- <a href="#"> This is a link </a>
- </div>
- <a href="#"> This is another link </a>
- </header>
- <section>
- <a href="#" class="link-style"> Click here </a>
- <div class="link-style">
- This is a div
- </div>
- </section>
- <a href="#" class="link-style"> This is a link </a>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement