//HTML

Murach's HTML5 and CSS3 (4th Edition)

Book description

Murach's HTML5 and CSS3 provides all HTML and CSS a professional needs, and it

adds coverage of Flexible Box and Grid Layout, two new CSS3 ways to implement page

layouts. So whether you're a web designer, a JavaScript programmer, a server-side

programmer, or a rookie, this book delivers all the HTML and CSS skills that you

need on the job. It begins with an 8-chapter hands-on course that teaches you HTML

and CSS from scratch, including the latest HTML5 and CSS3 features.

After that, you'll learn how to use Flexible Box and Grid Layout, and how to work

with forms and data validation. Then you'll learn how to enhance a site with video

clips, CSS3 transitions, transforms, and animations. You'll learn how to design and

deploy a website, as well as other professional skills like how to use JavaScript and

jQuery and how to use development tools like Bootstrap, SASS, and Emmet. And after

you've learned all the skills that you need, this book becomes the best on-the-job

reference you've ever used.

Show more

About the authors

Anne Boehm has over 30 years of experience as an enterprise programmer. She got

started with Visual Basic in the days of VB5 and has been programming on .NET since

its inception. She added C# to her programming repertoire in the mid-2000s, and she's

authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.

Zak Ruvalcaba has been researching, designing, and developing for the web since

1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB

and C#, and he's created web applications for companies like HP, Toshiba, IBM,

Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our

books on HTML5/CSS3, jQuery, and Dreamweaver CC.

Show more

Who this book is for

Due to our unique presentation methods and this book's modular organization,

this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That

includes:

• budding web developers
• web developers who haven't yet upgraded their websites to HTML5 and CSS3
• web developers who need to expand and enhance their skillsets

As we see it, mastering HTML5 and CSS3 will make any web developer at any level more

effective.

Show more

//CSS

* {

margin: 0;

padding: 0;

}

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 87.5%;

width: 650px;

margin: 0 auto;

padding: 15px 25px;

border: 3px solid blue;

}

h1 {

font-size: 150%;

}

h2 {

font-size: 120%;

padding: .25em 0 .25em 25px;

}

div.hide {

display: none;

}

ul {

padding-left: 45px;

}

li {

padding-bottom: .4em;

}

p, a {

padding-bottom: .4em;

padding-left: 25px;

}

a, a:focus, a:hover {

color: blue;

}

In this exercise, you'll develop an application that displays the first paragraph of text for three topics and then lets the user click a link to expand or collapse the text for each topic. Murach's HTML5 and CSS3 (4th Edition) Book description Murach's HTTLL and CS53 provides all MTML and CSS a professional needs, and it adds coverage of Flexble Bax and Grid Lapout, two new CS53 wars to implement page layouts. So whether you're s web designer, a lisvascribt programmer, a server-sife programmer, or a rookie, this bosk deivers all the HTM. and CSS skills that you need on the job. It begins wth an 8. chapter mands. on course that teashes you HTML and c55 frem serath, ncluaing the latest HTME.5 and c553 features. After that, youll leann how to use flerible Box and Crid Laysut, and how to work with forms ind data validaicon. Then yeull learn heun to enhance at ste whi video claps, C55J transitisns, transforma, and animatione. roull learn how to desisn and depley s webshe, as wel as other protessisnal gkills ake how to use jgusscript and jQuery and how to use development tools like Bsotstrap. SAS5, and Emmet. And atter youvve learned al the siolis that you need, this book becomes the best on-the-job reference you've ever used. Shaw less About the authors Anne Boehm has aver 30 years of experiance as an emterpise programmer. She got started wth Meual Bask in the days of vos and has been pregramming on , NeT sance its inception, she added Cr to her programming repertoire in the mild-2000s, and she's suthored or co-asthored our books on Vsual Bssic, C*, ADO.NET, ASP.NET, and HTMLS/CSS3. Shaw mare Whe this boolh is for Due tegur unique presgntation methods and this bookscie modular arganization, this is 1. Open the HTML, CSS, and JavaScript files in this folder: exereises_extralchog \expand_co1lapsel Then, run the application to see that the first paragraph of text is displayed for each topic, along with a link that lets you display additional text. Note, however, that the links don't work. 2. Review the HTML. Note that each topic consists of two div elements followed by an element. Also, note that a class named "hide" is assigned to the second div element of each topic. Then, review the style rule for this class. 3. In the JavaScript file, add an event handler for the ready(0) event method. 4. Within the ready() event method, code an event handler for the click() event method of the elements. This event handler should start by preventing the default action of the link and storing the clicked link in a constant. Then, it should use the toggleClass() method to add or remove the "hide" class from the div clemonat above the link clencent that's clicked depcuding on whether that class is prescnt. 5. Complete the click() event handler by testing if the div element above the current link element has the "hide" class. If it doesn't, change the text for the link to "Show less". If it does, change it back to "Show more