{
    "componentChunkName": "component---src-templates-slideshow-js",
    "path": "/style-with-css/",
    "result": {"data":{"slideshow":{"id":"-2cff5e1d-992a-5565-b4b5-eb17f6ce153c","title":"Style with CSS","shortTitle":null,"order":3,"_rawDescription":[{"_key":"70df06a1e27f","_type":"block","children":[{"_key":"1c07be20bcab","_type":"span","marks":[],"text":"CSS is the style of our site. It lays out the content, allows responsive layouts on different devices, colours, adds the font and much more. There are a few key areas to focus on so lets use them in our site."}],"markDefs":[],"style":"normal"}],"description":[{"_type":"block","_key":"70df06a1e27f","children":[{"_key":"1c07be20bcab","_type":"span","marks":[],"text":"CSS is the style of our site. It lays out the content, allows responsive layouts on different devices, colours, adds the font and much more. There are a few key areas to focus on so lets use them in our site."}]}],"slug":{"current":"style-with-css"},"publishedAt":"2022-12-05T23:44:42.784Z","mainImage":{"asset":{"id":"image-6e25c5538883ebf5ab0a77eaa20ce35e1ac2ef03-1024x1024-png","gatsbyImageData":{"images":{"sources":[],"fallback":{"src":"https://cdn.sanity.io/images/yb17ktc4/production/6e25c5538883ebf5ab0a77eaa20ce35e1ac2ef03-1024x1024.png?w=1024&h=1024&auto=format","srcSet":"https://cdn.sanity.io/images/yb17ktc4/production/6e25c5538883ebf5ab0a77eaa20ce35e1ac2ef03-1024x1024.png?w=320&h=320&auto=format 320w,\nhttps://cdn.sanity.io/images/yb17ktc4/production/6e25c5538883ebf5ab0a77eaa20ce35e1ac2ef03-1024x1024.png?w=654&h=654&auto=format 654w,\nhttps://cdn.sanity.io/images/yb17ktc4/production/6e25c5538883ebf5ab0a77eaa20ce35e1ac2ef03-1024x1024.png?w=768&h=768&auto=format 768w,\nhttps://cdn.sanity.io/images/yb17ktc4/production/6e25c5538883ebf5ab0a77eaa20ce35e1ac2ef03-1024x1024.png?w=1024&h=1024&auto=format 1024w","sizes":"100vw"}},"layout":"fullWidth","width":1,"height":1,"placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAADH0lEQVQ4jY3Ry0sqYRgG8P6m2oUjwzQ6M45CIThmzWKowKioiQS7WGBujKaFWGQ1tqjouqpB0VIXYjUQWjBojRVZA13AC4rZ1XNO554nOD2rb/H9eL/3+apKpVI8Hp+enm5razMYDGaz2ev1ptPpTCazs7MzNDTU2NhIUZTT6Tw+Pn56evryV6pEUbTb7SiKQhBUV1cnk8lomo5Go5FIpKurC0EQDMMAAGhoaFhfX8/lcuXv+Yk3NjZUKpVMJrNarQzDaDQakiT9fj/LskqlsqWlZXZ21mKxtLa2rq6uZjKZ19fXP3h8fBwAAIqieJ4XRXFubm5qamp/f39ychKCoI6ODo7jgsGgz+cTRbFUKv2Wb9hms4EgSNO0KIr39/eSJKVSqdvbW47jCIKQy+XNzc02m21zczOVSlXuPDo6CoJgb29vMpl8/ZXn52dJklZWVrq7u+vr62EYNhgMa2tr6XT63WS73S6Xy41GoyAILy8vDw8PhUKhWCzmcrmrqytBEDweD03TtbW1AwMD5+fn73ZeWFhQKBQoirrd7t3dXb/f7/P5BEGIRCIcx4XD4VAoNDw8LJPJTCbT6enpO3x4eGgymeRyOYZhOp1Oq9X29/dvb2+zLEuSpE6nIwgChmEcx1mWvbu7e/dV+Xw+GAz29PQAAFBdXY3juMPhEAQhEAgMDg6SJNnU1NTe3u5yuU5OTioLy+fzgUCApmkAAGpqagiCWF5evrm5yWazyWQyGo0eHBwIgnB9ff34+Pi3fMOCIJjNZhiGNRoNgiAgCFqt1h/F/FivXC7/Pn+pwB6PR/098/Pzi4uLfX19Tqfz8vKy/E8q5Bv2er1qtRpBEJfLFQwGQ6FQPB4vFov/Xv0AJxKJkZERpVKJoihFURMTEzzPFwqFD0dVpKpYLMZisZmZmc7OThzHIQiyWCyiKH4KZ7NZSZLOzs5isZjL5YIgSKvV7u3tfdhQJQ6Hw263e2lpieM4hmFAENTr9TzPfwpvbW0ZjUaVSqVWqxUKBYZhY2NjFxcXn3p2IpFwOBx6vV6pVBIEwTDM0dFRqVT6r/yGvwLXOH+uP51PtgAAAABJRU5ErkJggg=="}},"url":"https://cdn.sanity.io/images/yb17ktc4/production/6e25c5538883ebf5ab0a77eaa20ce35e1ac2ef03-1024x1024.png"}},"slides":[{"_rawBody":[{"_key":"1fa44d5c7453","_type":"block","children":[{"_key":"605b3f78f802","_type":"span","marks":[],"text":"There are many many units in CSS, from real world units, such as millimetres "},{"_key":"c9a0157d815e","_type":"span","marks":["code"],"text":"mm"},{"_key":"c9702150aa89","_type":"span","marks":[],"text":" to relative units, such as the viewport width "},{"_key":"f0cf3434d697","_type":"span","marks":["code"],"text":"vw"},{"_key":"9c2bb701efa9","_type":"span","marks":[],"text":"."}],"markDefs":[],"style":"normal"},{"_key":"55bf093699d1","_type":"block","children":[{"_key":"69ca4a7d8fb2","_type":"span","marks":["1b6e3d7fdeab"],"text":"Web.dev has a fantastic page on units here."}],"markDefs":[{"_key":"1b6e3d7fdeab","_type":"link","href":"https://web.dev/learn/css/sizing/"}],"style":"normal"},{"_key":"93139f9644b1","_type":"block","children":[{"_key":"67c927283482","_type":"span","marks":[],"text":"Look at the page above and notice how many units are specific to typography, its worth trying out different things. Browsers have a default font size of 16px for text (though headings and other elements increase this size), units like em and rem are multipliers of this size. "}],"markDefs":[],"style":"normal"},{"_key":"e497a0153930","_type":"block","children":[{"_key":"395e39af1c4f","_type":"span","marks":[],"text":"(em can be a little strange as it is a multiplier of its parents font size. Have a play and see)"}],"markDefs":[],"style":"normal"}],"iframe":"https://codepen.io/amcc/pen/zYaygrX","media":[],"title":"Units "},{"_rawBody":[{"_key":"e0f3913eea72","_type":"block","children":[{"_key":"67ac30b3f293","_type":"span","marks":[],"text":"Units are used for things like font sizing and layout. The same set of units can be used for anything, for layout purposes you often want to use relative units (like percent or viewport width), but sometimes pixels are needed too."}],"markDefs":[],"style":"normal"}],"iframe":"https://codepen.io/amcc/pen/ZERVgvZ?editors=1100","media":[],"title":"Units for layout"},{"_rawBody":[{"_key":"2b9122b04a38","_type":"block","children":[{"_key":"0de9cc3ab406","_type":"span","marks":[],"text":"By default elements are positioned within the browser window. Normally elements will be stacked on top of each other (or next to each other) on the page, but they can be taken out of this standard layout."}],"markDefs":[],"style":"normal"},{"_key":"096e4410de84","_type":"block","children":[{"_key":"9b0e01b9bcbb","_type":"span","marks":[],"text":"If you change this property you can take the element out of the flow of the document and be very specific (you must be careful when doing this that the page still works responsively)"}],"markDefs":[],"style":"normal"},{"_key":"f0cf2456b3de","_type":"block","children":[{"_key":"29d7e01c3c3b","_type":"span","marks":["e53ad9b3e0fa"],"text":"Find out a bit more here at W3 Schools"}],"markDefs":[{"_key":"e53ad9b3e0fa","_type":"link","href":"https://www.w3schools.com/css/css_positioning.asp"}],"style":"normal"},{"_key":"98f19c6945f6","_type":"block","children":[{"_key":"6439d32ab3dd","_type":"span","marks":[],"text":"The example here shows how some of the position properties work."}],"markDefs":[],"style":"normal"},{"_key":"d665bfa56dea","_type":"block","children":[{"_key":"a0764e5b80a5","_type":"span","marks":["c477da8964c8"],"text":"Try out position: sticky here"}],"markDefs":[{"_key":"c477da8964c8","_type":"link","href":"https://codepen.io/amcc/pen/bGKOXmj?editors=1100"}],"style":"normal"}],"iframe":"https://codepen.io/amcc/pen/bGKOXKK?editors=1100","media":[],"title":"Positioning"},{"_rawBody":[{"_key":"820f191a4060","_type":"block","children":[{"_key":"5d1c62b0b056","_type":"span","marks":[],"text":"The display property changes how elements flow on the page. By default different elements have a different default display property. Some elements, like <p> and <div> take up the full width of the browser, others like <a> and <img> by default flow inline with other elements."}],"markDefs":[],"style":"normal"},{"_key":"f12acd78c53f","_type":"block","children":[{"_key":"c77518633fe6","_type":"span","marks":[],"text":"By changing this property you can create really interesting layouts. There are 2 particularly powerful layout methods called "},{"_key":"961b358b1911","_type":"span","marks":["em"],"text":"Flex and Grid"},{"_key":"1cec3dcd290d","_type":"span","marks":[],"text":" that we will explore later on."}],"markDefs":[],"style":"normal"},{"_key":"6966f3a29061","_type":"block","children":[{"_key":"397ebfb2d643","_type":"span","marks":["e942352e962b"],"text":"Have a look at this article on web.dev to learn more."}],"markDefs":[{"_key":"e942352e962b","_type":"link","href":"https://web.dev/learn/css/layout/"}],"style":"normal"},{"_key":"cc84f22660f5","_type":"block","children":[{"_key":"ec0e0025fe6f","_type":"span","marks":[],"text":"The code below will change images to take up a whole row:"}],"markDefs":[],"style":"normal"},{"_key":"be48fc515946","_type":"code","code":"img {\n  display: block;\n}","language":"css"}],"iframe":"https://codepen.io/amcc/pen/QWxYLQW","media":[],"title":"Display"},{"_rawBody":[{"_key":"4523307bc6bf","_type":"block","children":[{"_key":"3922b5b0a69a","_type":"span","marks":[],"text":"Flexbox is an amazing, responsive display type. It is used on a parent element to change the layout of children. Think of it as an algorithm to allow the browser to choose the best layout as circumstances change."}],"markDefs":[],"style":"normal"},{"_key":"5b6f0244eaa1","_type":"block","children":[{"_key":"0f32911feadf","_type":"span","marks":["6ee1f7747214"],"text":"Josh Comeau has a fantastic (and interactive) article on Flexbox here"}],"markDefs":[{"_key":"6ee1f7747214","_type":"link","href":"https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/"}],"style":"normal"},{"_key":"cd465aa7289f","_type":"block","children":[{"_key":"bb776d6dd9d9","_type":"span","marks":["792938505b4d"],"text":"It is also well worth checking out the web.dev article too here"}],"markDefs":[{"_key":"792938505b4d","_type":"link","href":"https://web.dev/learn/css/flexbox/"}],"style":"normal"},{"_key":"b68b7612d359","_type":"code","code":".parent {\n  display: flex;\n  flex-wrap: wrap;\n}","language":"css"}],"iframe":"https://codepen.io/amcc/pen/xxzMKJX?editors=1100","media":[],"title":"Flexbox"},{"_rawBody":[{"_key":"ea3af7be5baf","_type":"block","children":[{"_key":"c9411280e9ba","_type":"span","marks":[],"text":"CSS Grid is another display method that a parent (or container) element can use to layout children elements. It works differently from flexbox and focuses on being specifically two dimensional. Like flexbox it has huge scope for creating responsive layouts."}],"markDefs":[],"style":"normal"},{"_key":"448075c96ebd","_type":"block","children":[{"_key":"c2236f9c707d","_type":"span","marks":[],"text":"Note that Grid and Flexbox can be used together (and often are)."}],"markDefs":[],"style":"normal"},{"_key":"bc9acf170a54","_type":"code","code":".container {\n  display: grid;\n  grid-template-columns: 5em 100px auto;\n  grid-template-rows: 200px auto;\n  gap: 10px;\n}","language":"css"},{"_key":"e89efab3160f","_type":"block","children":[{"_key":"6c5c58824161","_type":"span","marks":["2fb02c7d9d39"],"text":"Web.dev has a fantastic tutorial on CSS Grid here"}],"markDefs":[{"_key":"2fb02c7d9d39","_type":"link","href":"https://web.dev/learn/css/grid/"}],"style":"normal"}],"iframe":"https://codepen.io/amcc/pen/GRGzKee?editors=1100","media":[],"title":"Grid"},{"_rawBody":[{"_key":"3b70a6dbc8a0","_type":"block","children":[{"_key":"46a6bc59a33e0","_type":"span","marks":[],"text":"To change the style on different devices and browser sizes we use media queries. They are a bit like an "},{"_key":"b9b65e07e93a","_type":"span","marks":["em"],"text":"if statement"},{"_key":"5818c4efc26b","_type":"span","marks":[],"text":" in JavaScript and allow you to ask a question. Such as \"does the screen have a width bigger than 300px?\""}],"markDefs":[],"style":"normal"},{"_key":"8348ded2553c","_type":"block","children":[{"_key":"2b9771a19c4c","_type":"span","marks":[],"text":""}],"markDefs":[],"style":"normal"},{"_key":"fac62be67f5b","_type":"code","code":"@media (min-width: 300px) {\n  .large-screens {\n    display: block;\n  }\n  .small-screens {\n    display: none;\n  }\n}","language":"css"},{"_key":"4ad24d8ac692","_type":"code"}],"iframe":"https://codepen.io/amcc/pen/dyKabxg","media":[],"title":"Media queries"}]},"nextSlideshow":{"title":"What is a web site","shortTitle":null,"slug":{"current":"what-is-a-web-site"},"publishedAt":"2022-11-29T12:54:20.328Z","mainImage":{"asset":{"id":"image-499348f1ebb6bb5fc7bad774a2c64dd8738c5552-1024x1024-png","gatsbyImageData":{"images":{"sources":[],"fallback":{"src":"https://cdn.sanity.io/images/yb17ktc4/production/499348f1ebb6bb5fc7bad774a2c64dd8738c5552-1024x1024.png?w=1024&h=1024&auto=format","srcSet":"https://cdn.sanity.io/images/yb17ktc4/production/499348f1ebb6bb5fc7bad774a2c64dd8738c5552-1024x1024.png?w=320&h=320&auto=format 320w,\nhttps://cdn.sanity.io/images/yb17ktc4/production/499348f1ebb6bb5fc7bad774a2c64dd8738c5552-1024x1024.png?w=654&h=654&auto=format 654w,\nhttps://cdn.sanity.io/images/yb17ktc4/production/499348f1ebb6bb5fc7bad774a2c64dd8738c5552-1024x1024.png?w=768&h=768&auto=format 768w,\nhttps://cdn.sanity.io/images/yb17ktc4/production/499348f1ebb6bb5fc7bad774a2c64dd8738c5552-1024x1024.png?w=1024&h=1024&auto=format 1024w","sizes":"100vw"}},"layout":"fullWidth","width":1,"height":1,"placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEFElEQVQ4jXWSXUtiCxSG90/oJ8xNUARJhHUgSLPcaWpamlJ+QCVFVFRUhIV9XWSJWJaWkFEqlUXRB1IpGWWKJAXbTOpCtohiKpZapKVuZzgTZ6iB81ytteCBtRYvkM1mk8mkwWCgUCgEAmF3dzcejyMIks1mf/7H1/orAIIgyWTS5XItLy8rlUqHw/H+/o4gSCaTSaVS6d8kEonP4c/vAJFIxG63Hx4e6nQ6o9EYCAQQBHl/f4dh2GazQRBkt9v1ev35+fnj42M6nf4mO53OycnJuro6EAT7+/tvb28RBHl6etrc3OTz+V1dXZ2dnWQymcPhHBwcxGKxrycAMAyvrq7y+fyCggIymWy1WhEECYVCMpkMjUZjMJiWlhYikVhSUjI1NeXz+b6+A0gkEoFAYH9/n0gkUigUi8XyRy4vL+/o6Njb25uamsJiscPDwzAMf5Oz2Wwmk7HZbHQ6nUqlWiyWTCbzKVdXV4tEIqfTubKyAoKgQCD4Ww6Hw/f391qtFo/H43A4rVbrdrs9Hs/8/DyBQJienr67u/tf2WQyCYVCKpWal5eXm5tLpVKlUqndblcoFBQKRSKRuFyu1dVVEokkFAo9Hs83+fT0VCAQsNlsJpOJx+NRKBSfz7darXq9fnR0dGdnx+v1Go1GoVCo1WpDodDfa7tcruvr66urq6WlJRAE29raIAgKBoMPDw+BQODt7S0cDj88PPj9/s+o/PH/TVgikYhEIuFw+PDwkEgkNjc3O51OBEE+Pj5isVgoFIpGo6lUKpvNptPpl5eXeDz+2QLRaNRisaysrKjV6pmZmbKyMi6X63A4Xl9fHQ7HxsaGXC5fX1+HIOj19fX5+fny8lKv19/f3yeTScBut/f09GCx2Lq6OgqFkpeXx+Vyb25uIAgaHR1lMBgNDQ0MBkMoFEIQ5PP5VCpVc3OzRCKBIAhQq9VVVVWVlZVDQ0M8Hi8/P5/L5V5cXGg0GgKBwGQyx8fHm5qaiESiRqPx+/1Go5HL5dbU1AwNDQFzc3NVVVXd3d1ms1mlUpWVlXE4nJOTE7FYXFJSQqPRhoeH2Ww2CIJyufzx8dHv90skkqKioh8/fgCzs7MgCA4ODkIQtLW1hcFgOBzO8fGxSCRCo9FkMlkgEIyMjExOThoMhmg0GgqFFhYWUChUTk4OoFQqcTgcg8FYXFwcHBwsLCzkcDhnZ2dLS0tYLJbFYslksrW1te3tbafTGY1GrVZrR0dHRUUFjUYDDAYDm80uLi4mkUi1tbWlpaWdnZ03NzdnZ2etra2VlZV0Or2xsbGvr89kMrndboVCwWKxxsbGjo6OAK/Xu7i4WF9fz+PxJiYment7pVIpDMPBYFCn0/F4vH9+097ebjab7+7uxGLxwMCAyWSKxWK/AA/OGSdgsIHyAAAAAElFTkSuQmCC"}},"url":"https://cdn.sanity.io/images/yb17ktc4/production/499348f1ebb6bb5fc7bad774a2c64dd8738c5552-1024x1024.png"}}}},"pageContext":{"id":"-2cff5e1d-992a-5565-b4b5-eb17f6ce153c","currentSlideshow":4,"nextSlideshowId":"-4552daa1-9046-5f03-8fad-8156ea093f2e","totalSlideshows":6}},
    "staticQueryHashes": ["764694655"]}