We\u2019ve recently been discussing website contracts. Generic contract small print such as payment schedules, hosting conditions, cancellation terms, support policies, glossaries etc. could be contained in one or more web pages. The document could grow to a considerable length even if you try and keep it concise!<\/p>\n

Let\u2019s look at a snippet of the document\u2019s HTML5 in contract.html<\/em>:<\/p>\n

\r\n<h1>Website Contract<\/h1>\r\n\r\n<nav>\r\n\t<ul>\r\n\t\t<li><a href=\"#payment\">Payment Schedule<\/a><\/li>\r\n\t\t<li><a href=\"#support\">Support &amp; Maintenance<\/a><\/li>\r\n\t\t<li><a href=\"#hosting\">Hosting Terms<\/a><\/li>\r\n\t\t<li><a href=\"#glossary\">Glossary<\/a><\/li>\r\n\t<\/ul>\r\n<\/nav>\r\n\r\n<article id=\"payment\">\r\n<h2>Payment Schedule<\/h2>\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\r\n<\/article>\r\n\r\n<article id=\"support\">\r\n<h2>Support &amp; Maintenance<\/h2>\r\n<p>Ut euismod tempor porttitor.<\/p>\r\n<\/article>\r\n\r\n<article id=\"hosting\">\r\n<h2>Hosting Terms<\/h2>\r\n<p>Suspendisse ac nisl lorem, ut fermentum erat.<\/p>\r\n<\/article>\r\n\r\n<article id=\"glossary\">\r\n<h2>Glossary<\/h2>\r\n<p>Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.<\/p>\r\n<\/article>\r\n<\/code><\/pre>\n
We can use the :target attribute to highlight active sections, e.g.<\/p>\n
\r\narticle:target\r\n{\r\n\tbackground-color: #ffc;\r\n\tborder: 2px solid #fcc;\r\n}\r\n<\/code><\/pre>\n
Anyone viewing the contract<\/strong> can click a navigation menu item to highlight the appropriate section. You can also issue direct links to clients who require specific information, e.g. contract.html#support<\/strong>.<\/p>\n
The :target selector offers further versatility \u2014 it\u2019s possible to create dynamic effects in HTML5 and CSS without using JavaScript.<\/p>\n
 <\/p>\n
Source Link: http:\/\/www.sitepoint.com\/css3-target-selector\/<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS pseudo-classes which change styles in response to user actions have been with us for many years. You\u2019ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4\u2019s link colors back in 1997. CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-189","post","type-post","status-publish","format-standard","hentry","category-css3"],"aioseo_notices":[],"yoast_head":"\n