CSS declarations II

Derek Bridge

Department of Computer Science,
University College Cork

CSS declarations II

Aims:

• to learn CSS declarations for CSS boxes
• to learn how to use CSS to format a navigation menu

Padding

• Four properties whose values can be in ems, pixels (px) or other units

  h1
  {
      padding-top: 0.5em; 
      padding-right: 1em; 
      padding-bottom: 0.5em; 
      padding-left: 1em;
  }

• Various shorthand versions, including:

  h1
  {
      padding: 0.5em 1em 0.5em 1em;
  }

• You can use percentages too—in which case, they are based on the size of the element

Borders

• You must specify colour, width and style (e.g. solid, dashed, double,…):

  p
  {
      border-color: black;
      border-width: 1px; 
      border-style: solid; 
  }

• Shorthand version:

  p
  {
      border: black 1px solid;
  }

• You can set individual parts of the border using, e.g., border-top-color, border-top-width, border-top-style (and similarly for border-right, border-bottom and border-left)

Rounded corners on borders

• In CSS2.1, rounded corners were done by careful positioning of multiple background images and/or using Javascript: 25 techniques
• With CSS3, it's easy: use border-radius:

  p
  {
  	border: solid blue 10px;
  	border-radius: 15px;
  }

• Relative measures (e.g. ems) will be more scalable than absolute ones (e.g. pixels)

More on rounded corners in CSS3

• We can even alter individual corners using border-top-right-radius and similarly for top-left, bottom-right and bottom-left
• If you give border-radius two numbers, the corners are ellipses rather than circles:
  • the first value specifies the horizontal radius
  • the second value specifies the vertical radius
• CSS3 also allows you to use images for borders (see the W3C's document)

Margin

• Margin is done similarly to padding
• But, if you use percentages, they are based on the size of the element's container
• Watch out! Vertically adjacent margins are collapsed
  • Suppose the bottom margin of a box is 5px
  • Suppose the top margin of the box below is 10px
  • The amount of space will not be 15px
  • It will be 10px: the smaller margin is eliminated

Box shadows

• You need something like the following for a simple shadow:

  p 
  {
      box-shadow: 5px 5px gray;
  }

• The three values are:
  1. The horizontal offset of the shadow, where positive means the shadow will be on the right of the box, and negative will put the shadow on the left of the box
  2. The vertical offset of the shadow, where positive means the shadow will be below the box, and negative means above
  3. Colour
• An 'inner' shadow is possible by incuding the word inset
• Two other numbers (a blur radius and spread radius) may also be specified

Navigation menus

• Most pages in a web site have menus of hyperlinks to the other pages
• In HTML, we probably use an unordered list (or nested list) for these within a nav element:

  <nav>
      <ul>
          <li><a href="">Wombats</a></li>
          <li><a href="badgers.html">Badgers</a></li>
          <li><a href="squirrels.html">Squirrels</a></li>
      </ul>
  </nav>

Navigation menus: row of horizontal 'buttons'

• Remove the bullet points (list-style)
• Remove the default indentation (padding & margin)
• Change the lis from block-level to inline level (display)
• Style the links:
  • Add padding and border
  • Remove the underline that hyperlinks have (text-decoration)
  • Add colors and a different colour for hovering
  • Optionally, use different colours for the link where href=""

Navigation menus: row of horizontal 'buttons'

nav ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li
{
    display: inline;
}

nav a
{
    padding: 0.5em 1em 0.5em 1em;
    border: 1px solid #711515;
    text-decoration: none;
    color: white;
    background-color: #B51032;
}

nav a:hover
{
    background-color: #711515;
}

nav a[href=""]
{
    color: black;
    background-color: white;
}

Navigation menus: vertical sidebar

• This is much the same but do not change the display role of the lis from block to inline
• Instead change the display role of the a's from inline to block