Css Page Layout

Css Page Layout

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.  The page layout techniques we'll be covering in more detail in this module are

• Normal flow
• The display property
• Flexbox
• Grid
• Floats
• Positioning
• Table layout
• Multiple-column layout

Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

Css Page Layout Examples

Box-shadow:

0   0   0    2px     #000,

0   0   0    3px     #999,

0   0   0    9px     #fa0, 

0   0   0   10px    #666,

0   0   0    16px   #fd0,

0   0   0    18px   #000;

CREATIVE PAGE LAYOUT EXTRACT

.columns  { column-count:  4;   column-gap:   10px; }

column-count = determine how many columns we need.

Column-gap = Determine the space between the columns(the gutter).

Css Text Align

The text-align property in CSS is used for aligning the inner content of a block element.

These are the traditional values for text-align:

• left - The default value. Content aligns along the left side.
• right - Content aligns along the right side.
• center - Content centers between the left and right edges. White space on the left and right sides of each line should be equal.
• justify - Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.
• inherit - The value will be whatever the parent element's is.

TEXT ALIGN EXTRACT

ta_1   {  text-align:  left;  }

Text-align = Specific the horizontal alignment of text.

Left = In this case, it sets all textto the left(instead of center or right aligned). 

Examples

This text is left aligned.

This text is right aligned.

I'm centered!

I'm justified. I fill the space exactly (except on the last line), even if I have to stretch a bit at times.

I inherit the alignment of my parent. In this case, that means left.

Css Font Weight

The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser

The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:

• normal
• bold
• bolder
• lighter

FONT WEIGHT EXTRACT 

bold  {  font-weight:  bold;  }

Font-weight = Sets how thick or thin characters in text should be displayed.

Bold = In this case makes text BOLD. It can be either set to normal, bold, bolder, or, lighter.

Css Margin

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

We have the following properties to set an element margin.

• The margin specifies a shorthand property for setting the margin properties in one declaration.
• The margin-bottom specifies the bottom margin of an element.
• The margin-top specifies the top margin of an element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an element.

The margin property allows you set all of the properties for the four margins in one declaration.

Extract To Align Text With Display And Margin Property

centre { text-align: centre : margin : auto ; display: block; }

Text-align = Specific the horizontal alignment of text.

Margin = Specific all the margin properties.

Display = Specific the type of box used.

Css Text Decoration

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

Values 

• none:  no line is drawn, and any existing decoration is removed.
• underline:  draws a 1px line across the text at its baseline.
• line-through:  draws a 1px line across the text at its "middle" point.
• overline:  draws a 1px line across the text, directly above its "top" point.
• inherit:  inherits the decoration of the parent.

The blink value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to "blink" by rapidly toggling it between 0% and 100% opacity.

Text Decoration Extract

no_td : hover  { text-decoration : none; }

Text-Decoration = Used to remove underlines from links.

None = In this case, underline is removed when the mouse hovers over the link.

Css Float And Clear

The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

Clear And Float Extract

clear  { float: none; clear: both; }

Float = Used to remove underlines from links.

clear: both; = Specific which side(s) of an element floating elements are not allowed. In this case no floating elements allowed on the left or the right side of the text.