<style> <\/style><\/code>\u00a0tag which will hold the unique CSS markup.<\/p>\nIn our exercise app there is a special panel to enter your styles which automatically adds the style tag for you.<\/p>\n
CSS Syntax Intro<\/h2>\n
To add CSS properly you must follow this syntax<\/p>\n
![\"\"](\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/04\/img_5ade29685fd0e.png\")
<\/p>\n
First, we have a selector, this tells the CSS which element we want to add the styling to. There are three ways to select an element:<\/p>\n
\n- You can use its class with the\u00a0.\u00a0<\/strong>selector So if you have an element like
\n<div class=\"hello\"> Hi <\/div><\/code>\u00a0 you would use the following CSS code to make it have a black background\u00a0\u00a0.hello { background: black; }<\/code><\/li>\n- By using the id with the\u00a0#\u00a0<\/strong>selector<\/li>\n
- By using the element’s name (ideally only used for anchor or img) where first we select the parent element then add a space and list the element, for example:\n
<div class=\"button\">\r\n <a href=\"#\">Welcome<\/a>\r\n<\/div><\/pre>\nWe would use the following CSS to make the anchor have green text color<\/p>\n
.button a {\r\n color: green;\r\n}<\/pre>\nThe space indicates an element inside the selected element.<\/p>\n
The proper syntax to specify each style declaration (each thing you’re changing) looks like this:<\/li>\n<\/ol>\n
\n\n\n![\"\"](\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/04\/img_5ade2779c2dc3.png\")
<\/p>\n<\/div>\n<\/div>\n<\/div>\n
We enter the property like background\u00a0<\/strong>then we enter a colon separator so we can define the value we want to set like\u00a0red\u00a0<\/strong>and we\u00a0must end the declaration with a semi-colon ;<\/strong><\/p>\nHere is sample code with two declarations:<\/p>\n
.button a {\r\n color: green;\r\n background: black;\r\n}<\/pre>\n