CSS computing

CSS computing

1. What is it?

   • Cascading Style Sheets
   • describes the display of HTML elements
   • it is easier than spending a lot of time writing HTML tags
   • can control a lot of webpages at the same time

2. How can I use it?

   • there is a certain order things need to be in
     • selector
       • selects what is going to be stylised (header etc.)
     • declarations
       • includes the property name and value
         • seperated with colon :
       • shows what you are doing to that component (font etc.)
       • seperated with semicolon ;
       • surrounded by special brackets {}
       • ends in semicolon (before the brackets)

3. How is it different to HTML?

   • HTML defines the structure and content
   • CSS defines the style and layout

4. Responsive Design

   • accessed on multiple platforms
     • tablets, phones, laptops etc.
   • the website is adjusted due to the sizes
     • keep a common layout so it doesn't change drastically and is still recognised as the same website
       • more people look at the left hand side so keep this in mind
   • instead of determining certain aspects by using px, use percentage so it automatically adjusts
   • this essential to make it a good website because more people can access anywhere, any time.

5. graphics

   • use a colour picker and enter the coded to get the exact colour because you might want a specific shade
   • limit the colour palette
     • roughly not more than 3 (and white+black)
   • choose similar colours
     • same colour, different shade
     • next to each other on the colour wheel
     • complimentary colours, opposite on the colour wheel
   • consider your audience
     • children
       • brighter colours
       • more videos and pictures
     • adults
       • monochrome, stylish
       • simple
       • more writing
     • what is the website about?
       • if it is about fashion, for example, use content that is fashionable and trending colours

6. how to get the most out of CSS

   • float:right;
     • moves an image to the right etc. to use up more space and fill up blanks
     • looks more professional
     • less boring
   • <button >
     • creates a button
     • a great alternative from just links