**Slide Show**
`/* Below are all of the styles for our header slideshow at the top of each page. */` `/*--------------WORD BANK---------------` ` ``* ELEMENTS: Elements are the tags with '<>' around them such as and ` ``* We access them here by giving them a Class name or ID. ` ` ``* PROPERTIES: Properties are used to define certain styles to a class or ID.` ` ``* CLASS: Generally used to assign a style to a group of HTML elements but can be used on single elements as well.` ` ``* They are assigned within HTML elements like this: where MyClass would be your class name.` ` ``* ID's: Generally used to assign styles to a single element but can be used on multiple elements as well.` ` ``*` ` ``*--------------CLASSES-----------------` ` ``*` ` ``* To learn more about the CSS Position Property see: https://www.w3schools.com/cssref/pr_class_position.asp` ` ``* For more information on CSS Syntax and Selectors see: https://www.w3schools.com/css/css_syntax.asp` ` ``* It is not recommended to adjust with the position of elements unless you are sure about the changes being made. This can dramatically change how content is positioned. ` ` ``*/` `/* Class Names and Elements` ` ``* [.slideshow-header]: Container that contains our slides and overlay.` ` ``*` ` ``* Properties` ` ``* @position: Adjust the position of the slideshow-header. For more information see: https://www.w3schools.com/css/css_positioning.asp` ` ``*/` `.slideshow-header {` ` ``position``:``relative``;` `}` `/* Class Names and Elements ` ` ``* [.slideshow-header]: Container that contains our slides and overlay.` ` ``* [.slides]: Controls the style properties of the individual slides.` ` ``* ` ` ``* Properties ` ` ``* @z-index: Adjust the stack placement of the [.slideshow-header] and [.slides] along the Z axis.` ` ``* @position: Define the position of the page. ` ` ``* @top:Change in the position from the top of an element.` ` ``* @left: Change in the position from the left of an element.` ` ``* @right: Change in the position from the right of an element.` ` ``* @bottom: Change in the position from the bottom of an element.` ` ``* @display: Adjusts how the content is displayed on the page. See: https://developer.mozilla.org/en-US/docs/Web/CSS/display and https://www.w3schools.com/css/css_display_visibility.asp` ` ``* @align-items: Aligns the child elements of this PARENT element to be centered. For a visual example see: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items` ` ``* @justify-content: Defines how the space disturbed around the child elements. For a visual example see: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content` ` ``*` ` ``* These are the style properties and values of the slideshow header and its individual slides.` ` ``*/` `.slideshow-header .slides {` ` ``z-index``: ``0``;` ` ``position``:``absolute``;` ` ``top``:``0px``;` ` ``left``:``0px``;` ` ``right``:``0px``;` ` ``bottom``:``0px``;` ` ``display``:flex;` ` ``align-items: ``center``;` ` ``justify-``content``: ``center``;` `}` `/* Class Names and Elements` ` ``* [.slideshow-header]: A container that contains our slides and overlay.` ` ``* [.overlay]:` ` ``*` ` ``* Properties` ` ``* @z-index: Used to layer elements. Elements with a higher z-index number will appear before elements that are lower.` ` ``* @position: Set the position property for the element. We recommend you do not adjust this property unless you have knowledge on how the changes will affect your page.` ` ``*` ` ``* These are the styles for the overlay, as well as additional properties for the slideshow-header.` ` ``*/` `.slideshow-header .overlay {` ` ``z-index``: ``1``;` ` ``position``:``relative``;` `}` `/*--------------ID'S---------------*/` `/* ID Names and Elements` ` ``* [#slideshow-header] is the container used to contain the images you have chosen for your header` ` ``*` ` ``* Properties` ` ``* @overflow:` ` ``* @opacity:` ` ``* @box-shadow: Create a box shadow for this element.` ` ``* EX: box-shadow: a, b, c, d(e, f, g, h); ` ` ``*/` `#slideshow-header {` ` ``overflow``: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow` ` ``box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow` `}` ` ` `/* ID Names and Elements` ` ``* [#slideshow-header] is the container used to contain the images you have chosen for your header` ` ``*` ` ``* Properties` ` ``* @width: 100% width will take of 100% of that element.` ` ``* @position:` ` ``*/` `#slideshow-header > div {` ` ``width``:``100%``;` ` ``position``: ``absolute``;` `}` ` ` `/* ID Names and Elements` ` ``* [#slideshow-header]: is the container used to contain the images you have chosen for your header.` ` ``* [div]: Refers to our HTML elements. ` ` ``* [img]: Refers to our images in the slideshow. ` ` ``* ` ` ``* Properties` ` ``* @width: Defines the width of the images, divs and slideshow-header. A value of 100% will display the image across the entire page. ` ` ``*/` `#slideshow-header div img {` ` ``width``: ``100%``;` `}` |