What I learned this week…

Web Standards

Web Standards are an important part of how the Web is regulated (technologically). The W3C (World Wide Web Consortium) coordinates most aspects of web technologies W3C’s mission is to guide the web to its full potential.

The purpose of HTML is to provide structure to documents meaning to content. As, people might use many browsers such as Mozilla, Firefox, Opera and Safari it is important to for people see elements of the website to look the same in all browsers and also be able to function properly. The purpose of web standards is to create a universal, accessible and easy to use website that everybody can trust.

Content, Structure, Presentation, and Behavior

There are 4 layers that makes a web page and these are:

  • Content Layer – Text and foreground images.
  • Structure Layer – HTML
  • Presentation Layer – CSS
  • Behavior Layer – JavaScript

CSS Selectors

CSS selectors are used to select the content you want to style. There are different selectors to select the HTML elements which are according to its id, class and many more.

h1 {color: red;}

The above example code has a selector, property, declaration and a value. Each declaration has a property and a value and is always enclosed in a curly braces and the colon character is used as a separator between the property and its value.

CSS Box Model

All HTML elements can be considered as boxes. This is called the Box model which consists of content, padding, border and a margin. The box model allows us to define space between elements and also add border around the elements.

CSS Resets

As, all browsers have their default styling added to the browser, in which the CSS reset can help fix that problem. Having a CSS reset removes all the default styling from the browser so that you are able to apply your own styling to your HTML elements. An example of an reset is shown below.

/* the universal selector reset */ * { margin: 0; padding: 0; }

Useful CSS references

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

https://meyerweb.com/eric/tools/css/reset/

Leave a Reply