Skip to content

Latest commit

 

History

History
58 lines (47 loc) · 3.54 KB

README.md

File metadata and controls

58 lines (47 loc) · 3.54 KB

Internet

Day 09 of 90

In all of our previous sessions, we have handled the layout and structure of elements in the webapages. In this session, we will look at How to style webpages using CSS

Intro

CSS is the language used to style HTML documents. It describes how the HTML document should be rendered We'll explore the many ways in which you can use Cascading Style Sheets (CSS) to elevate the design and user experience of your website. Whether you're a beginner or a seasoned developer, we'll provide you with the knowledge and resources you need to master the art of styling webpages with CSS. From layout and typography, to colors and animation, we'll cover it all. Lets dive deep into the world of CSS and discover the endless possibilities it has to offer

Learning objectives

By the end of this session, you should be able to explain the following concepts to a five year old without the help of Google. By mastering these core concepts, you'll have a solid foundation for creating well-designed, visually appealing webpage

  • What is CSS and why is it important?
  • A brief history of CSS
  • CSS Syntnax
  • CSS rulesets
  • CSS Selectors
  • Typography
  • The Box model
  • CSS units
  • Cascadding in CSS

Resources

Take a look at the following resources.

  1. W3schools - Learn CSS
  2. Web.dev - Learn CSS
  3. Learn to code HTML and CSS
  4. Responsive Web design
  5. CSS crash course
  6. HTML and CSS tutorial
  7. CSS master class
  8. Google
  9. Youtube

Wrapping up

  • CSS in 100 Seconds
  • CSS is the Language for styling web pages, describing the presentation of documents written in Markup languages
  • CSS ruleset has three sections, a selector, property and value in the following syntax
selector{
    property-1: value-1;
    property-2: value-2;
    property-n: value-n;
}

  • CSS has several units of measurement that can be used to specify the size and position of elements on a web page. Some of the most commonly used units include: - px (Pixels) - Pixels are fixed-size units that are used to specify the size and position of elements on a screen.

      - __em__ - The 'em' unit is a relative unit based on the font-size of the parent element. 1em is equal to the current font size. E.g. if the font-size of the parent element is 16px, then 1em is equal to 16px, 2em is equal to 32px, etc.

  - __rem__ The 'rem' unit is also relative but it is based on the font-size of the root element (usually the <html> element) instead of the parent element.

  - __%__ - The percentage unit is a relative unit based on the size of the parent element. For example, if an element is set to have a width of 50%, it will be half the width of its parent element.

  - __vh__ and __vw__ - These are relative units based on the size of the viewport. 1vw is equal to 1% of the viewport width and 1vh is equal to 1% of the viewport height.

  - __calc__ - This is a special function in CSS that allows you to perform calculations to determine the size and position of elements. It can be used to combine different units of measurement.