Using Shorthand - Exercise

Contact Us or call 1-877-932-8228
Using Shorthand - Exercise

Using Shorthand

Duration: 10 to 20 minutes.

In this exercise, you will modify CssShorthand/Exercises/Shorthand.css to use shorthand properties wherever possible.

  1. Check the file size of CssShorthand/Exercises/Shorthand.css. It should be 1.33KB.
  2. Open CssShorthand/Exercises/Shorthand.css for editing.
  3. Modify values to use shorthand where possible.
  4. Make sure you have no errors by validating the CSS. Instructions are below.
    1. Select all of your CSS code.
    2. Copy the selected text.
    3. Go to the W3C CSS Validation Service.
    4. Choose the By direct input tab if it's not already selected.
    5. Paste the text you selected.
    6. Click the Check button.
  5. Save the file and check the file size again. There should be a reduction in the size of the file based on how many items you modified.
  6. Open CssShorthand/Exercises/CssShorthand.html and your page should render as follows: Screen capture: The solution file associated with CSS Shorthand

Solution:

CssShorthand/Solutions/CssShorthand.css
h1, h2, h3, h4, h5, h6 {
	font-family: tahoma;
	color: #00F;
}

p {
	font: .75em verdana, sans-serif;
	color: #000;
}

li {
	font: 1em tahoma, sans-serif;
	color: #000;
}

#header {
	height: 75px;
	background: #fff url('Images/CssShorthandHeader.gif') repeat-x;
	margin: 10px auto 0 auto;
	padding: 10px 5px;
	border-bottom: 1px solid #000;
	font-family: Tahoma;
}

#global-nav {
	float: left;
	width: 23%;
	background: #0f0;
	border: thin dotted #000;
	border-top: 0;
}

#global-nav ul {
	list-style: none;
	margin: 10px 0 0 0;
	padding-left: 0;
}

#global-nav li a {
	display: block;
	text-decoration: none;
	padding: 5px 10px;
}

#global-nav li a:hover {
	background: #fff;	
}

#content {
	width: 75%;
	float: right;
	padding: 10px 0;
}

#footer {
	clear: both;
	border-top: 1px solid #000000;
	font: small tahoma;
}
Next