Webpage Styling Using CSS

Construct and analyze styles that position content

<!--
THINGS TO KNOW: the term short hand version of a property is when                 a property will take multiple values at once and only takes up a single line.
For example: border: 1px solid black;
This declaration defines the border and uses three different values for the short version of the declaration.
1. 1px defines the thickness of the border.
2. solid defines the style of the border.
3. black defines the color of the border.

Longer hand version
border-style: solid;
border-color: black;
border-weight: 1px;

Longest hand version
border-top-style: solid;
border-top-weight: 1px;
border-top-color: black;

border-bottom-style: solid;
border-bottom-weight: 1px;
border-bottom-color: black;

border-left-style: solid;
border-left-weight: 1px;
border-left-color: black;

border-right-style: solid;
border-right-weight: 1px;
border-right-color: black;

-->

What is CSS?

CSS stands for Cascading Style Sheets.

What does CSS do?

CSS is used to style elements and make them look however you would like.

What is a CSS rule?

A CSS rule for Internal or External styling is composed of three parts.

• Selector – selects the elements or tags to be affected by the CSS rule.
• Declaration Block – anything placed withing the opening and closing curly brace.
• Declarations – the rule that is used to style an element or a tag.
  • Declaration blocks have the following format: name: value;

//Note: the "p" is the location of the selector.
//{} brackets is the declaration block.
// color: blue; is the declaration.
     color - is the name of the declaration
     :(colon) is the separator between the name and the value.
     blue is the value of the declaration.
     ;(semicolon) is the stop in the declaration where it ends.

P {
     color: blue;
}

CSS Properties

CSS POSITION PROPERTY

position – tells an element how it should move based on a fix place or its current place.

Possible values include absolute and relative.

Absolute value tells the browser to move the element starting from the top left hand corner of the document body or relative to the nearest positioned ancestor.

Relative positioning – states that the element will starting moving from wherever it currently is.

Sticky positioning – an element is positioned based on the users scroll bar.

Static – an element moves according to the natural flow of the page.

P {
    position: relative;
}

NOTE: the position declaration only tells an element how to move. However, it is still necessary to provide another declaration or multiple declarations on how to move the element.

top – how much to move closer or further from the top.

bottom – move closer or further from the bottom of the page

left – move closer or further away from the left side of the page.

right – move closer or further away from the right side of the page.

P {
    position: realtive;
    top: 100px;
    bottom: 100px;
    left: 100px;
    right: 100px;
}

CSS Max-width Property

The max-width property is used to provide the maximum width that any element can be sized to. In other words, if an element has a max-width of 500 pixels, it means that the element can be any size up to and including 500 pixels, but not greater.

div {
   max-width: 500px;
}

CSS Overflow Property

The CSS overflow property defines to an element what should happen with the element in the event that the element has more content than it can display. These are some of the options available to the overflow property:

• scroll – the overflowed content is not visible but a scroll bar is provided to view the content within the element.
• visible – This is the default behavior and the overflow content is not hidden. The content will spill out of the element.
• hidden – The overflow content is not visible and it is hidden from the user with no way to view the actual hidden content.
• auto – It decides when scrollbars are to be added or not.

div {
   overflow: scroll;
}

CSS Height & Width properties

The height property defines the specific height or vertical measurement to an element. The width property defines the horizontal measurement of an element. The value for height and width can be defined in multiple units of measurement. These are some units of measurement available.

• px – pixels.
• pt – points
• % percent
• vh – viewport height
• em – relative to the size of the elements font.
• Centimeters (cm): Physical units, typically used for print.
• Millimeters (mm): Another physical unit, smaller than a centimeter.
• Inches (in): Yet another physical unit, commonly used in print.
• Points (pt): Commonly used in print, with 1 point being equal to 1/72 of an inch.
• Picas (pc): A picas is equal to 12 points.

div {
    height: 300px;
    width: 300px;
}

CSS margin Property and the Text-align Property

The margin property defines how much space an element should have between itself and a specific margin. Each element will have a top, bottom, left, and right margin. You can define each margin by using the following properties:

• margin-top – defines the top margin with some value.
• margin-bottom – defines the distance between the element and the bottom margin.
• margin-left – defines the distance between the element and the left margin.
• margin-right – defines the distance between the element and the right margin.

Note: Margins can be defined using multiple units of measurement. I typically define it using pixels. You can use one of these properties or all of them at once.

Also, the short hand version of margin can be provided one value to represent all margins.

//Short version
div {
    margin: 10px;  //All ten pixels will be provided to all margins.
}
//Not as short version
div {
    margin: 10px 15px 5px 3px; //top, right, bottom, left
}

//Very long version of the property
div {
   margin-top: 100px;
   margin-bottom: 100px;
   margin-left: 100px;
   margin-right: 100px;
}

CSS display Property

The display property is used to define to an element how it should be displayed. Those options can be:

• inline – display the elements next to each other only using the space needed by the element.
• block – display the element as a greedy element and one that uses more space than it needs (the entire line) and has a line break.
• inline-block – an element that is displayed as an inline element but width and height can be applied.

P {
   display: inline;
}

Inline Elements Vs. Block Level Elements

Inline level elements are not greedy. Inline level elements only use up the space they need. Multiple inline level elements can fit in one line. However, block level elements are greedy and require the entire line whether they need it or not. A block level element also always starts on the next line.

<element> <element> <element> <element> inline level elements

<p>the                                                           </p>
block level element. 

CSS Visibility Property

The visibility property is used to define when an element should be visible or hidden.

• hidden – the element will be hidden.
• visible – the element will be visible.

p {
   visibility: hidden;
}

Box Model Defined

The box model defines that every element is a box and each element is capable of having content, padding, margin, and a border. Many define this model as a box that contains content, followed by padding, followed a border, followed by padding.

Even though those properties are not visible on the element, it is understood that you can make those properties visible.

p {
   padding: 10px;
   margin: 10px;
   border: 1px solid black;
}

CSS Padding Property

The padding property provides space between the content and the border of the element. Padding can be defined in short hand and long hand version.