Exercise 1:
You will need to use selectors to select the HTML elements identified and apply the styles outlined. Once styled, the HTML, when rendered in the browser, should look like figure 1. Once finished upload all files
(external.css, static.html, image-1.png, image-2.png, logo.png) to your prac1/class3 on your TWA site.
In the file called external.css you will write your CSS style rules. You are given a description of what needs to be selected by the selector, and then you will be given an outline of the style declarations which need to be applied.
For instance:
- The <header>tag needs to have:
- A background colour of #004165
In the external.css file you will see this style rule has already been completed for you.
Write all the following style rules in the external.css file to style the static.html HTML document.
- All elements need to have:
- A font family of Arial, sans-serif
- Zero margin
- Zero padding
- The imgwith the id logo needs to have:
- Padding all-around of 5px
- The <nav>tag needs to have:
- A floating positionof right
- Padding all-around of 20px
- All <a>tags that are children of the <nav> tag need to have:
- A colour of white
- No text decoration
- A right margin of 20px
- All <a>tags that are children of the <nav> tag and in a state of hover need to have:
- A text decoration of underline
- All direct unordered list (<ul>) children and their list items (<li>) of the <nav>tag need to have:
- A display of inline-block
- All <h1>tags need to have:
- A font-size of 0em
- A colour of #333333
- All horizontal rules <hr>need to have:
- No borders
- A top border width of 1px
- A border style of dashed
- A border colour of #000000
- A top margin of 5px
- A bottom margin of 5px
- All <article> tags need to have:
- Padding all-around of 20px
- All first direct paragraphs of a section need their first letter to have:
- A font size of 5em
- A colour of #ff0000
- A font family of Times New Romanand serif
- All elements with the class of right-floated-imageneed to have:
- A floating position of right
- A border width of 1px
- A border style of solid
- A border colour of #000000
- Padding all-around of 5px
- All elements with the class of info-boxesneed to have:
- A text alignment of centre
- Padding all-around of 5px;
- All elements with the class of info-boxneed to have:
- A display of inline-block
- Padding all-around of 10px
- A background colour of #004165
- A width of 31%
- All <p>tags within all elements with the class of info-box need to have:
- A colour of #ffffff
- A font weight of bold
- A bottom border width of 1px
- A bottom border style of solid
- A bottom border colour of #ffffff
- All <div> tags within all elements with the class of info-box need to have:
- A text alignment of centre
After writing all the following style rules in the external.css remember to upload it to your TWA site under prac1/class3
Exercise 2
You will need to create a media query to enable a responsive design. You are given a description of what needs to be selected by the selector within this media query, and then you will be given an outline of the style declarations which need to be applied. Once styled, the HTML, when rendered in the browser in mobile view (iPhone6/7/8 or Pixel 2) (https://developers.google.com/web/tools/chrome-devtools/device-mode/), should look like figure 2. Once finished upload your updated external.css file to prac1/class3 on your TWA site.
Media Query:
Create a media query for the screen with a max width of 1000px
Style Rules:
- All elements with the class of info-boxto have:
- A width of 95%
- A top margin of 5px
- All <h1>tags need to have:
- A font size of 5em
- All elements with the class of right-floated-image need to have:
- A text alignment of centre
- A floating position of nothing
- All <nav>tag elements need to have
- A right padding of 5px
