{"action":"opened","issue":{"url":"https://api.github.com/repos/lenzview/blog/issues/7","labels_url":"https://api.github.com/repos/lenzview/blog/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/lenzview/blog/issues/7/comments","events_url":"https://api.github.com/repos/lenzview/blog/issues/7/events","html_url":"https://github.com/lenzview/blog/issues/7","id":59611243,"number":7,"title":"HTML Basics CSS","user":{"login":"lenzview","id":11224653,"avatar_url":"https://avatars.githubusercontent.com/u/11224653?v=3","gravatar_id":"","url":"https://api.github.com/users/lenzview","html_url":"https://github.com/lenzview","followers_url":"https://api.github.com/users/lenzview/followers","following_url":"https://api.github.com/users/lenzview/following{/other_user}","gists_url":"https://api.github.com/users/lenzview/gists{/gist_id}","starred_url":"https://api.github.com/users/lenzview/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lenzview/subscriptions","organizations_url":"https://api.github.com/users/lenzview/orgs","repos_url":"https://api.github.com/users/lenzview/repos","events_url":"https://api.github.com/users/lenzview/events{/privacy}","received_events_url":"https://api.github.com/users/lenzview/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-03-03T08:44:40Z","updated_at":"2015-03-03T08:44:40Z","closed_at":null,"body":"Styling HTML with CSS\r\nCSS stands for Cascading Style Sheets\r\n\r\nStyling can be added to HTML elements in 3 ways:\r\n\r\nInline - using a style attribute in HTML elements\r\nInternal - using a <style> element in the HTML <head> section\r\nExternal - using one or more external CSS files\r\n\r\n\r\nThe most common way to add styling, is to keep CSS syntax in separate CSS files. \r\n\r\n\r\nCSS Syntax\r\nCSS styling has the following syntax:\r\nelement { property:value ; property:value }\r\n\r\nThe element is an HTML element name. The property is a CSS property. The value is a CSS value.\r\nMultiple styles are separated with semicolon.\r\n\r\nInline Styling (Inline CSS)\r\nInline styling is useful for applying a unique style to a single HTML element:\r\nInline styling uses the style attribute.\r\nThis inline styling changes the text color of a single heading:\r\n<h1 style=\"color:blue\">This is a Blue Heading</h1>\r\n\r\n\r\nInternal Styling (Internal CSS)\r\nAn internal style sheet can be used to define a common style for all HTML elements on a page.\r\nInternal styling is defined in the <head> section of an HTML page, using a <style> element:\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n  body {background-color:lightgrey}\r\n  h1   {color:blue}\r\n  p    {color:green}\r\n</style>\r\n</head>\r\n<body>\r\n  <h1>This is a heading</h1>\r\n  <p>This is a paragraph.</p>\r\n</body>\r\n</html>\r\n\r\n\r\nExternal Styling (External CSS)\r\nExternal style sheet are ideal when the style is applied to many pages.\r\nWith external style sheets, you can change the look of an entire site by changing one file.\r\nExternal styles are defined in the <head> section of an HTML page, in the <link> element:\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"styles.css\">\r\n</head>\r\n<body>\r\n  <h1>This is a heading</h1>\r\n  <p>This is a paragraph.</p>\r\n</body>\r\n</html>\r\n\r\n\r\nImage Maps\r\nFor an image, you can create an image map, with clickable areas:\r\n<map name=\"planetmap\">\r\n  <area shape=\"rect\" coords=\"0,0,82,126\" alt=\"Sun\" href=\"sun.htm\">\r\n  <area shape=\"circle\" coords=\"90,58,3\" alt=\"Mercury\" href=\"mercur.htm\">\r\n  <area shape=\"circle\" coords=\"124,58,8\" alt=\"Venus\" href=\"venus.htm\">\r\n</map>\r\n"}}