Skip to content

Latest commit

 

History

History
77 lines (69 loc) · 4.48 KB

File metadata and controls

77 lines (69 loc) · 4.48 KB

CSS Overview

Exercise 1

Create the following page section using HTML and external CSS (no inline styles). Use a table or a definition list (in this case the layout will be different).

Screenshot

Exercise 2

Create the following Web page using external CSS styles.

Screenshot

Exercise 3

Create a web page using the following design and markup.

Screenshot

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik Software Academy 2012 CSS Course</title>
</head>
<body>
    <header>
        <h1>The Header</h1>
        <nav>
            <ul>
                <li>
                    <a href="#">Nav item</a>
                </li>
                <li>
                    <a href="#" class="current">Nav item</a>
                </li>
                <li>
                    <a href="#">Nav item</a>
                </li>
                <li>
                    <a href="#">Nav item</a>
                </li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h1>Sed nisl quam, rutrum eget commodo et, ullamcorper sed quam</h1>
            </header>
            <p>In posuere bibendum enim vel venenatis. Integer gravida, tortor quis gravida fermentum, libero orci hendrerit sapien, sed facilisis turpis mauris vitae turpis. Suspendisse nunc justo, dapibus in condimentum eget, rutrum id risus. Ut varius vulputate tortor. Suspendisse fermentum laoreet ante, ut placerat enim condimentum tristique. Sed gravida scelerisque enim at euismod. Integer aliquam vehicula purus quis accumsan. Nulla eu orci nec metus condimentum vestibulum sit amet quis lacus. Mauris tempor venenatis ultrices. Phasellus et leo a massa dapibus pharetra. Donec ut tellus vel mauris imperdiet ornare. Aliquam lacus purus, dictum et tristique id, ornare vitae arcu. Sed rutrum, neque sit amet euismod viverra, libero erat fermentum neque, a cursus libero urna eu erat. Pellentesque at tempor risus.</p>
            <footer>
                <p>posted on 12-dec-2012 by <a href="#">Doncho Minkov</a></p>
            </footer>
        </article>
        <article>
            <header>
                <h1>Duis lacus erat, tristique non pharetra ac, bibendum sit amet ante</h1>
            </header>
            <p>Quisque tortor mi, consequat eu volutpat in, convallis a turpis. Aenean neque mi, vehicula id sollicitudin hendrerit, posuere quis elit. Aliquam ultricies ante fringilla tortor scelerisque a pharetra orci ornare. Vivamus nec mi id lorem ullamcorper convallis. Maecenas ornare volutpat dui. Aliquam erat volutpat. Aliquam erat volutpat. Nulla gravida erat nec erat pulvinar sed rhoncus risus congue. Nulla vel dui elit.</p>
            <footer>
                <p>posted on 12-dec-2012 by <a href="#">Doncho Minkov</a></p>
            </footer>
        </article>
        <article>
            <header>
                <h1>Aliquam eleifend, nisi ut facilisis pharetra, mauris ipsum sagittis lacus</h1>
            </header>
            <p>Aliquam eleifend, nisi ut facilisis pharetra, mauris ipsum sagittis lacus, vel aliquam urna felis ac leo. Nullam massa odio, consequat ut posuere at, lacinia at nunc. Curabitur quam dolor, malesuada ac sodales eget, malesuada eu ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in nibh vitae ante elementum pharetra hendrerit in ligula. Proin non leo lorem, in ultricies tortor. Donec in nibh non diam ultricies feugiat vitae quis arcu. Sed sit amet odio quis eros pharetra ullamcorper. Nam id erat et leo varius molestie vitae a est. Curabitur ornare orci at dolor cursus sagittis. Phasellus vitae bibendum enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
            <footer>
                <p>posted on 12-dec-2012 by <a href="#">Doncho Minkov</a></p>
            </footer>
        </article>
    </section>
    <footer>Telerik Software Academy 2012 - CSS Course</footer>
</body>
</html>