{"type":"doc","content":[{"type":"paragraph","content":[{"text":"This is useful for creating a ","type":"text"},{"text":"sandbox","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Sandboxes are important for designers to play in","versionAtSave":"1"},"href":"/wiki/spaces/EC/pages/2091843610"}}]},{"text":" within which to play with learning CSS. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Get a ","type":"text"},{"text":"nice text editor","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Microsoft Visual Code","versionAtSave":"1"},"href":"/wiki/spaces/EC/pages/2092597274"}}]},{"text":", then you can make a file called index.html file and include a reference to the CSS file using a link line, for example:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n\n\n\n\n

Heading

Hello World!

\n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"It is best practice to put CSS into its own file - following the ","type":"text"},{"text":"separation of concerns","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Separation of Concerns","versionAtSave":"1"},"href":"/wiki/spaces/EC/pages/2089058433"}}]},{"text":" principle.","type":"text"}]},{"type":"paragraph","content":[{"text":"You can just use Open File… from your browser to open this up - make sure you have a POPUPexample.css file in the same directory, for example:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":".MAIN > * {\n font-family : Arial, Helvetica, sans-serif;\n}\n\n.MAIN > h1{\n color: rgb(118, 109, 199);\n}\n\n.MAINdialog{\n background-color: rgb(226, 225, 243);\n height: 1000px;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"There are some example rules to get you started. You’ll need to learn about ","type":"text"},{"text":"CSS selectors","type":"text","marks":[{"type":"link","attrs":{"href":"https://interfaceware.atlassian.net/wiki/spaces/DEVELOPMEN/pages/2090401833/CSS+Selectors"}}]},{"text":" and ","type":"text"},{"text":"CSS units","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"CSS Dimensions","versionAtSave":"6"},"href":"/wiki/spaces/EC/pages/2090958866"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"Notice in this sandbox I am using ","type":"text"},{"text":"simple namespace prefixes for the code","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Use Namespaces for CSS","versionAtSave":"3"},"href":"/wiki/spaces/EC/pages/2089648210"}}]},{"text":".","type":"text"}]},{"type":"paragraph"}],"version":1}

Browser not supported