Workshop: Introduction to CSS

Whilst logged into GitHub with your Birkbeck email address, get the starter repository from the link in moodle. Clone it using Visual Studio Code following the instructions in the prep video How to clone a GitHub repository with VS Code.

Styling text

1. In the HTML template page (index.html), create a top heading and 3 paragraphs of text using one of the lorum ipsum alternative sites on this page: https://www.justinmind.com/blog/awesome-lorem-ipsum-alternatives/.
2. Create an external stylesheet for your CSS rules.
3. Change the width of the main element so it is less than 100% (but over 50%). Centre it horizontally using margin.
4. Using an appropriate element selector, style the top heading using your choice of font from https://fonts.google.com/.
5. Using an appropriate element selector, style the paragraphs in a web safe font of your choice (https://www.cssfontstack.com/).
6. Choose a colour of your choice for the top heading, and another colour for the paragraphs, adding these colours in hexadecimal form to the appropriate element selectors.
7. Add one link to a selection of text (a word, or a few words) in each paragraph, and use a class to change the colour of all the links. Make the links a different colour when you hover over them.
8. Make a selection of text (a word, or a few words) in each paragraph bold and or italic, changing its colour and/or underlining it. Style each text selection in a unique way using a different id each time as the selector for your style declarations.

Styling boxes and adding backgrounds

1. Underneath your three paragraphs, create three divs of the same or different widths.
2. Add a list with 5 items into each div, making two lists unordered and one ordered, and changing each list-style-type to something else of your choosing (https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type).
3. Change the display of each div to be either block or inline-block according to preference, adjusting widths as needed to create the layout you want.
4. Add a background colour to each box (all different, one different, or all the same colour), making sure the list text inside it contrasts the background enough to be read easily.
5. Add colour to either the border and/or the margin to outline the div boxes in the style you want.
6. Add a background image to the body of the page (https://www.pexels.com/search/background/). Style it using background-repeat, background-position and/or background-size.

Styling tables (optional)

1. Change the styles of the animalsHumans.html file according to taste.
2. Alternatively create your own table with interesting information, and style that page and table as you wish.