HTML and CSS Reference
In-Depth Information
this, you could allow a user to edit the entire ad and save the changes to the browser or a server, and the next time they
view the ad in sequence, they'll see the latest saved version that they once edited. This also will allow the brand to
take a good look at how their users are customizing their brand experience, which would give vital details into brand
relationships. Take a look at Listing 11-8, where the user can edit the CSS styling of the ad experience and save their
changes to browser storage.
Listing 11-8.
Content Editable Ad Example
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: none;
text-rendering: optimizeLegibility;
}
#cta {
font: 175% sans-serif;
text-align: center;
margin-bottom: 20px;
}
#ad style{
display: block;
text-align: center;
}
#ad:hover{
background-color: #999;
width: 300px;
height: 250px;
}
button {
margin-top: 20px;
margin-bottom: 20px;
width: 300px;
height: 30px;
}
</style>
<body align="center">
<div id="cta">Edit Your Own CSS!</div>
<div id="ad" contenteditable>
<div id="style">
<style contenteditable>
#ad {
background-color: #fff;
width: 300px;
height: 250px;
border: 1px solid #000;
}
</style>
</div>
</div>
