https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/index.html After HTML, CSS is the most common programming language on the internet, and can be the most exciting when you delve into the more advanced side of things. Typically, CSS is used to change the look and feel of a website, colours, fonts, sizes, layout, how and where things appear on the page, but as CSS gets bigger and better, you can even use it to animate elements on your webpage! Hugo en-au https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/1_our_first_styles/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/1_our_first_styles/index.html There are two parts to CSS: selectors and declarations. We’ll just focus on selectors for now. The selector tells the webpage which part of the page to apply the styles (declarations) to. There are three different kinds of selectors: Tag ID Class Take a look at the HTML provided to you. You should notice that our div elements look a bit different to what we’ve seen before. They all have classes and ids: https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/2_css-properties/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/2_css-properties/index.html The other part of CSS is the declarations. A declaration is made up of a property and its value: We’ve already written some declarations when we were changing the colours of different elements! There are lots of different CSS properties available, and we are going to use a few of them to improve your earlier website into something more structured like this: https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/3_sizing/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/3_sizing/index.html The images on our page are all enormous, so let’s start by learning how to specify element sizes. Step 1 Add the following to your CSS: ​ css /* Your CSS here */ img { height: 200px; } The tag selector will get every img element. The height property changes the height of an element by whatever value you provide - in this case, we’ve specified 100 pixels (px). https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/4_layout/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/4_layout/index.html Ok, so our images are now at a much more manageable size. The next thing that we are going to do is figure out how to modify the layout of elements, e.g. put our images side by side, etc. Once again, we’ll start at the top of the page and work our way down, using our preview as a guide: https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/5_colour/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/5_colour/index.html The next thing we’ll do is add some colour. This will also help us to see where one section ends and another starts. Add the following After - Add code a:link { color: #ffffff;; } Test The nav element should turn white. Colours in CSS Did you notice how we’ve been defining our colours?. We used a strange code (#ffffff;) that would make things white, or ( #8246af) that would make things purple. This is called a Hex Code, which is a 6-character code for representing colours which works in CSS. https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/6_spacing/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/6_spacing/index.html Now that we’ve added some colour, it makes the awkward spacing around elements a bit more obvious. Let’s fix that! Step 1 At the moment, the nav is shoved against the top of the page. Let’s add some space between the end of the nav and the text. We can do this using the padding property. Add the following to your CSS: Add this code nav { padding: 30px; } Test There will now be more space in the nav around the text. https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/7_fonts/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://tutorials.shecodes.com.au/html_and_css/3_intro_to_css/7_fonts/index.html There are a lot of different things we can do with fonts, including changing their family and size. Family Head over to Google Fonts and pick out a font that you like. Select that font then view all your selected fonts: Select the @import option: