Back
Goal: Learn CSS to create visual style for HTML pages
Task: Use CSS to design the HTML pages you created last time (or create new pages), create similar style for all pages.
- Choose nice color combination for your pages.
- Get inspiration from colorhunt.co palettes, Canva or Visme blogs etc.
- Create the header and layout as described here:
- Create external CSS file, include it in the document using
link tag.
- On top of the document create a 500px wide header using
div tag.
- Inside the header create a horizontal menu with links, using
ul, li tags and list-style: none CSS property.
- Use "a:hover" pseudoclass to change link menu link color when hovering over link.
- Use padding and margin properties to style the menu links.
- Create a horizontal line under header using
border property.
- Style the contents:
- Add
class and id attributes to any HTML elements you want to style.
- Use CSS properties to style text, example,
font-family, font-size etc.
- Style all visited links to not have underline and have grey color.
- Create paragraphs using
p tag. Add images inside paragraphs using img tag. Use float property to put image on left or right side of text.
- Create print style:
- Page should look differently when shown on screen or printed on paper. For example, to save ink/toner printed pages should have images and navigation hidden using attribute
display: none; vai visibility: hidden;.
Here are some examples:
html
css
Create files in a new folder named "Name Surname Assign2" (replace with your name and surname).
Archive the folder as zip file.
Send the archive to mikelis@va.lv.