CSS

3 values of the display property

1) inline 2) block 3) inline-block

margin properties

1) margin-top 2) margin-right 3) margin-bottom 4) margin-left

five properties for adjusting the position of HTML elements in the browser

1) position 2) display 3) z-index 4) float 5) clear

box model properties

1) width and height 2) padding 3) border 4) margin

flow of HTML

A browser will render the elements of an HTML document that has no CSS from left to right, top to bottom, in the same order as they exist in the document. This is called the flow of elements in HTML. In addition to the properties that it provides to style HTML elements, CSS includes properties that change how a browser positions elements. These properties specify where an element is located on a page, if the element can share lines with other elements, and other related attributes.

default stylesheet

All major web browsers have a default stylesheet they use in the absence of an external stylesheet. These default stylesheets are known as user agent stylesheets. In this case, the term "user agent" is a technical term for the browser.

What's the difference between display: none and visibility: hidden?

An element with display: none will be completely removed from the web page. An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.

minimum and maximum height and width

Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size. To avoid this problem, CSS offers two properties that can limit how narrow or how wide an element's box can be sized to.

block display

Block-level elements are not displayed in the same line as the content around them. Block elements take up the width of their container, which can be specified, and can have manually-adjusted heights.These elements fill the entire width of the page by default, but their width property can also be set. Unless otherwise specified, they are the height necessary to accommodate their content. Elements that are block-level by default include all levels of heading elements (<h1> through <h6>), <p>, <div> and <footer>.

block-level elements

Block-level elements create a block the full width of their parent elements, and they prevent other elements from appearing in the same horizontal space. Block-level elements also consistently appear on the left side of the browser. This is the default position for block-level elements.

visibility

Elements can be hidden from view with the visibility property. The visibility property can be set to one of the following values: 1) hidden — hides an element. 2) visible — displays an element. Users can still view the contents of the list item by viewing the source code in their browser. Furthermore, the web page will only hide the contents of the element. It will still leave an empty space where the element is intended to display.

display

Every HTML element has a default display value that dictates if it can share horizontal space with other elements.

float

If you're simply interested in moving an element as far left or as far right as possible on the page, you can use the float property. Floated elements must have a width specified or the element will assume the full width of its containing element, and changing the float value will not yield any visible results.

inline-block display

Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the width and height properties. Images are the best example of default inline-block elements. Inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width.

margin collapse

Padding is space added inside an element's border, while margin is space added outside an element's border. One additional difference is that top and bottom margins, also called vertical margins, collapse, while top and bottom padding does not. Horizontal margins (left and right), like padding, are always displayed and added together. For example, if two divs with ids #div-one and #div-two, are next to each other, they will be as far apart as the sum of their adjacent margins.

margin

Specifies the amount of space between the border and the outside edge of the element. Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space.

padding

Specifies the amount of space between the content area and the border. The padding property is often used to expand the background color and make content look less cramped.

border

Specifies the thickness and style of the border surrounding the content area and padding. A border is a line that surrounds an element, like a frame around a painting. Borders can be set with a specific width, style, and color.

width and height

Specifies the width and height of the content area.

box model

The box model comprises the set of properties which define parts of an element that take up space on a web page.

clear property values

The clear property can take on one of the following values: 1) left — the left side of the element will not touch any other element within the same containing element. 2) right — the right side of the element will not touch any other element within the same containing element. 3) both — neither side of the element will touch any other element within the same containing element. 4) none — the element can touch either side.

clear

The clear property specifies how elements should behave when they bump into each other on the page.

inline display

The default display for some tags, such as <em>, <strong>, and <a>, is called inline. Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content and not requiring a new line after each element. The height and width of these elements cannot be specified in the CSS document. For example, the text of an anchor tag (<a>) will, by default, be displayed on the same line as the surrounding text, and it will only be as wide as necessary to contain its content. inline elements cannot be altered in size with the height or width CSS properties.

position

The default position of an element can be changed by setting its position property. The position property can take 1 of 4 values: 1) static (default) 2) relative 3) absolute 4) fixed

float multiple elements at once

The float property can also be used to float multiple elements at once. However, when multiple floated elements have different heights, it can affect their layout on the page. Specifically, elements can "bump" into each other and not allow other elements to properly move to the left or right.

float property values

The float property can be set to one of two values: 1) left - this value will move, or float, elements as far left as possible. 2) right - this value will move elements as far right as possible.

overflow

The overflow property controls what happens to content that spills, or overflows, outside its box. It can be set to one of the following values: hidden, scroll, visible. The overflow property is set on a parent element to instruct a web browser how to render child elements. For example, if a div's overflow property is set to scroll, all children of this div will display overflowing content with a scroll bar.

z-index

The z-index property controls how far "back" or how far "forward" an element should appear on the web page when elements overlap. This can be thought of the depth of elements, with deeper elements appearing behind shallower elements. The z-index property accepts integer values, which instruct the browser on the order in which elements should be displayed on the web page. This property DOES NOT WORK on static elements.

max-height

This property ensures a maximum height for an element's box.

max-width

This property ensures a maximum width of an element's box.

min-height

This property ensures a minimum height for an element's box.

min-width

This property ensures a minimum width of an element's box.

relative

This value allows you to position an element relative to its default static position on the web page. Note that the making the position of an element relative only instructs the browser to expect a relative positioning of the element, but doesn't specify where the element should be positioned on the page.

offset properties

To specify where the element should be positioned on the page, you can use offset properties. 1) top - moves the element down. 2) bottom - moves the element up. 3) left - moves the element right. 4) right - moves the element left.

user agent stylesheets

User agent stylesheets often have default CSS rules that set default values for padding and margin. This affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page. Many developers choose to reset these default values so that they can truly work with a clean slate.

fixed

We can fix an element to a specific position on the page, regardless of user scrolling, by setting its position to fixed.

absolute

When an element's position is set to absolute all other elements on the page will ignore the element and act like it is not present on the page. The element will be positioned relative to its closest positioned parent element. When an element's position is set to absolute, the element will scroll with the rest of the document when a user scrolls.

scroll

When overflow is set to this value, a scrollbar will be added to the element's box so that the rest of the content can be viewed by scrolling.

hidden

When overflow is set to this value, any content that overflows will be hidden from view.

visible

When overflow is set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.

border-radius

You can modify the corners of an element's border box with the border-radius property. You can create a border that is a perfect circle by setting the radius equal to the height of the box, or to 100%.

centering content (margin: 0 auto;)

margin: 0 auto; will center the selected elements in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element. In order to center an element, a width must be set for that element. Otherwise, the width of the div will be automatically set to the full width of its containing element, like the <body>, for example. It's not possible to center an element that takes up the full width of the page.

padding properties

padding-top padding-right padding-bottom padding-left