Web Applications

Demonstration: GET vs. POST

Change the method to POST, open Network tab and examine the request. Try setting enctype attribute for the form. What happen when you refresh the page?

CSS Introduction

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. Example of complete design change is CSS Zen Garden. This presentation is also a single webpage.

There are different CSS levels and modules. Levels and modules determine which properties are available. You should be aware of what subset of CSS you can use. There is also W3C CSS validator.

ReCodex is limited to CSS Level 2!

CSS and Specificity

What is the CSS selector specificity of the following selectors and why does it matter?

• li.sidebar a.external
• div#navigation a[href^="http"]:hover

Specificity Calculator seems to work.

Shorthand properties

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously.

.border {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
/* vs */
.border {
  border: 1px solid black;
}
    

.one   { border-width: 1px; }
.two   { border-width: 1px 2px; }
.three { border-width: 1px 2px; }
.four  { border-width: 1px 2px 3px 4px; }
    

Property 'display'

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.

Use display: none; to remove element from page without leaving space for it.

Sometime there are alternatives you need to choose from. For example inline-block vs flex (wait for next practical).

Inline elements are affected by text-align property. You can test this using Codepen Example.

Float

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

Rules:

• Displayed as inline-block, implies one should explicitly set width (unless implicit).
• Shifted to the left/right of the current line until its edge touches the containing block edge or edge of another float.
• Positioned vertically as it would be within the normal flow, aligned with the top of the current line box.
• If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
• Other boxes laid out as if the float didn't exist, except for the current and subsequent line boxes shortened as necessary to make room for it. Implies that parent block does not increase size to encompass the float and the float may overflow

Demonstration: Float - clear

Values: left, right, both, none.

Positioning

Combination of position, left, left, right, top, bottom, and z-index.

By appropriate combination of display modes and positioning we can create layouts.

Reminder

Relative - positioned element moved relative to the original position according to left/right/top/bottom. Rest of the layout as if not affected. Move is after positions are determined. We can move by 0 to make element positioned.

Absolute - positioned element moved relative to the closest positioned ancestor. Rest of layout as if the positioned element is not present. This implies that parent block does not increase size to encompass the element and the element may overflow.

Fixed - Element moved relative to the viewport and it doesn't move when scrolling. Rest of layout as if the positioned element is not present.

Positioning

Distance from the edge of containing block for absolute and fixed. Offset from normal position for relative. Values be absolute or percentage of containing block's size.

There is no need to set unit for 0, some linters even raise a warnings if you do.