{"id":4473,"date":"2015-08-05T06:06:46","date_gmt":"2015-08-05T06:06:46","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4473"},"modified":"2015-08-05T06:06:46","modified_gmt":"2015-08-05T06:06:46","slug":"adding-css-to-html","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/adding-css-to-html\/","title":{"rendered":"Adding CSS to HTML"},"content":{"rendered":"

To add CSS in your HTML file.<\/p>\n

\u2026\r\n<head<\/span>>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"mystyle.css\"<\/span>>\r\n<title<\/span>>My Title<\/span><\/span><\/title<\/span>>\r\n<\/head<\/span>>\r\n\u2026<\/pre>\n
In the above example, whenever the HTML file is loaded, it will load the file mystyle.css<\/code>. The <link \u2026><\/code> line must be inside the \u201chead\u201d tag.<\/p>\n
If you use the above for all your files, then you can control your whole site’s appearance by modifying the single CSS file.<\/p>\n
CSS for Single HTML File<\/h3>\n
If you want to use CSS only for a single file, you can embed it in HTML file’s header using the <style><\/code> tag, like this:<\/p>\n
\u2026\r\n<head<\/span>>\r\n<title<\/span>>My Title<\/span><\/span><\/title<\/span>>\r\n<style<\/span> type<\/span>=\"text\/css\"<\/span>>\r\np {color:red}\r\n\/* more CSS code here *\/\r\n<\/style<\/span>>\r\n<\/head<\/span>>\r\n\u2026<\/pre>\n
CSS for Single HTML Tag<\/h3>\n
If you want to specify a style only for one particular HTML tag in a HTML file, you can embed a attribute style=\"\u2026\"<\/code> inside the tag, like this:<\/p>\n
<p<\/span>>\u2026 this is <span<\/span> style<\/span>=\"color:red\"<\/span>>RED!<\/span<\/span>><\/p<\/span>>\r\n\r\n<p<\/span> style<\/span>=\"color:red\"<\/span>>This whole paragraph is RED!<\/p<\/span>><\/pre>\n
CSS Syntax<\/h2>\n
CSS source code looks like this:<\/p>\n
p <\/span>{\r\n    line-height<\/span>:1.5;\r\n    width<\/span>:60ex;\r\n    font-family<\/span>:sans-serif;\r\n}\r\n\r\nli <\/span>{\r\n    margin-top<\/span>:0.8ex;\r\n    color<\/span>:gray;\r\n}\r\n\r\nblockquote <\/span>{\r\n    color<\/span>:blue;\r\n}\r\n\r\nimg <\/span>{\r\n    border<\/span>:solid thin black;\r\n}\r\n\r\n\/* <\/span><\/span>basic table style with border <\/span><\/span>*\/<\/span><\/span>\r\ntable.xyz <\/span>{\r\n    border<\/span>:1px solid black;\r\n    border-collapse<\/span>:collapse;\r\n}\r\n\r\ntable.xyz th, table.xyz td <\/span>{\r\n    border<\/span>:1px solid gray;\r\n    padding<\/span>:.5ex;\r\n}\r\n\r\n\/* <\/span><\/span>for programing language source code <\/span><\/span>*\/<\/span><\/span>\r\nspan.code <\/span>{\r\n    font-family<\/span>:monospace;\r\n    color<\/span>:#00008d;<\/pre>\n","protected":false},"excerpt":{"rendered":"
To add CSS in your HTML file. \u2026 <head> <link rel=”stylesheet” type=”text\/css” href=”mystyle.css”> <title>My Title<\/title> <\/head> \u2026 In the above example, whenever the HTML file is loaded, it will load the file mystyle.css. The <link \u2026> line must be inside the \u201chead\u201d tag. If you use the above for all your files, then you can […]<\/p>\n","protected":false},"author":1,"featured_media":4474,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[5],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4473"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4473"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4473\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4474"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}