Home > HTML > HTML and CSS (3)

HTML and CSS (3)

Interactive CSS:

  • #idName:hover {…} /* mouseover */
  • #idName:active {…}
  • #idName:link {…}
  • #idName:visited {…}
  • #idName:before {content: “string”;} /* generate content */
  • #idName:after {content: “string”;} /* generate content */
  • #idName:nth-child(odd) {…} /* set all children that are odd */
  • #idName:nth-child(even) {…} /* set all children that are even */
  • #idName:first-child {…}
  • #idName:last-child {…}

Example:

  • #nav ul li a{
  • padding: 20px;
  • background: orange;
  • color: white;
  • }
  • #nav ul li a:hover{
  • background-color: #ffb424;
  • box-shadow: 0px 1px 1px #666;
  • }
  • #nav ul li a:active{ background-color: #ff8f00; }

New HTML5 Codes:

  • <section></section>
  • <nav></nav>
  • <footer></footer>

Selectors Hierarchy:

  • #id .class div /* descendant selector: applied to div under class with id */
  • div > p /* child selector: applied to p that are direct descendant of div */
  • div, p, strong /* group selector */
  • #id:hover /* Pseudo selector */

!important declaration:

  • div { font-size: 10px !important; }

Categories: HTML
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: