INLINE STYLE<\/p>\n
<h2 style=\"color: red\"<\/strong>>Header Text<\/h2><\/pre>\nEMBED STYLE IN HTML<\/p>\n
<style><\/strong>\r\nh2 {\r\n color: red;\r\n}\r\n<\/style><\/strong><\/pre>\nLINK STYLE TO CSS FILE<\/p>\n
<head>\r\n<link rel=\"stylesheet\" href=\"styles.css\"><\/strong>\r\n<\/head><\/pre>\nSTYLING CLASSES<\/p>\n
.className<\/strong> {\r\n color: red;\r\n}\r\n\r\n<p class=\"className\"<\/strong>>Paragraph<\/p>\r\n\r\n<p class=\"classOneName classTwoName\"<\/strong>>Paragraph<\/p><\/pre>\nSET ID TO ELEMENT<\/p>\n
#elementId<\/strong> {\r\n color: red;\r\n}\r\n\r\n<p id=\"elementId\"<\/strong>>Paragraph<\/p><\/pre>\nSTYLE AN TYPE<\/p>\n
[type=\"radio\"]<\/strong> {\r\n background-color: red;\r\n}\r\n\r\n<input type=\"radio\"<\/strong>><\/pre>\nHIERARCHY ORDER (HIGHER TO LOWER)<\/p>\n
\n
- Inline Style\n
\n
- <h2 style=<\/strong>“color: red”>header<\/h2><\/li>\n<\/ul>\n<\/li>\n
- ID\n
\n
- <h2 id=<\/strong>“idName”>header<\/h2><\/li>\n<\/ul>\n<\/li>\n
- Class\n
\n
- <h2 class=<\/strong>“className”>header<\/h2><\/li>\n<\/ul>\n<\/li>\n
- HTML\n
\n
- <h2>header<\/h2><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
OVERSIDE ALL OTHER STYLES<\/p>\n
.className {\r\n color: red !important<\/strong>;\r\n}<\/pre>\nABSOLUTE VS RELATIVE UNITIES<\/p>\n
\/\/ absolute size of 25 pixels<\/strong>\r\n25px<\/strong>\r\n\/\/ relative to the 1.5 times the font site<\/strong>\r\n1.5em<\/strong><\/pre>\nGRIDS<\/p>\n
.a {\r\n background: lightsalmon;\r\n}\r\n.b {\r\n background: lightskyblue;\r\n}\r\n.c {\r\n background: lightpink;\r\n}\r\n.d {\r\n background: palegreen;\r\n}\r\n.grid {\r\n width: 100%;\r\n height: 200px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 1fr;\r\n grid-gap: 10px;\r\n}\r\n\r\n<div class=\"grid\">\r\n <div class=\"a\">a<\/div>\r\n <div class=\"b\">b<\/div>\r\n <div class=\"c\">c<\/div>\r\n <div class=\"d\">d<\/div>\r\n<\/div><\/pre>\nRESPONSIVE LAYOUTS<\/p>\n
.a {\r\n grid-area: header;\r\n background: lightsalmon;\r\n}\r\n.b {\r\n grid-area: menu;\r\n background: lightskyblue;\r\n}\r\n.c {\r\n grid-area: content;\r\n background: lightpink;\r\n}\r\n.d {\r\n grid-area: footer;\r\n background: palegreen;\r\n}\r\n.grid {\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n grid-template-row: 100 auto 1fr auto;\r\n grid-gap: 10px;\r\n grid-template-areas:\r\n \"header\"\r\n \"menu\"\r\n \"content\"\r\n \"footer\";\r\n}\r\n@media (min-width: 300px){\r\n .grid {\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: auto 1fr;\r\n grid-template-row: auto 1fr auto;\r\n grid-gap: 10px;\r\n grid-template-areas:\r\n \"menu header\"\r\n \"menu content\"\r\n \"footer footer\";\r\n }\r\n}\r\n@media (min-width: 450px){\r\n .grid {\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: auto 1fr;\r\n grid-template-row: 100 auto 1fr auto;\r\n grid-gap: 10px;\r\n grid-template-areas:\r\n \"menu header\"\r\n \"menu content\"\r\n \"menu footer\";\r\n }\r\n}\r\n\r\n<div class=\"grid\">\r\n <div class=\"a\">a<\/div>\r\n <div class=\"b\">b<\/div>\r\n <div class=\"c\">c<\/div>\r\n <div class=\"d\">d<\/div>\r\n<\/div><\/pre>\nLink animation:<\/p>\n
<html><style>\r\na {\r\n box-shadow: inset 0 0 0 0 #ff0000<\/strong>;\r\n color: #888888<\/strong>;\r\n margin: 0 -.25rem;\r\n padding: 0 .25rem;\r\n transition: color .3s ease-in-out, box-shadow .3s ease-in-out;\r\n}\r\na:hover {\r\n box-shadow: inset 300px<\/strong> 0 0 0 #00ff00<\/strong>;\r\n color: #0000ff<\/strong>;\r\n}\r\n<\/style>\r\n<body><a href=\"http:\/\/\"><big>Link Animation One<\/big><\/a><\/body><\/html><\/pre>\n<html><style>\r\na {\r\n position: relative;\r\n}\r\na::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 4px;\r\n border-radius: 4px;\r\n background-color: #ff0000<\/strong>;\r\n bottom: 0;\r\n left: 0;\r\n transform-origin: right;\r\n transform: scaleX(0);\r\n transition: transform .3s ease-in-out;\r\n}\r\na:hover::before {\r\n transform-origin: left;\r\n transform: scaleX(1);\r\n}\r\n<\/style>\r\n<body><a href=\"http:\/\/\"><big>Link Animation Two<\/big><\/a><\/body><\/html><\/pre>\n
\nSEE ALSO<\/strong><\/p>\n
Responsive Design [Link<\/a>]<\/p>\n