Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <script src=""></script><nav id="navbar">
  <header>CSS Documentation</header>
    <li><a class="nav-link" href= "#Introduction"> Introduction</a></li>
    <li><a class= "nav-link" href="#What_you_should_know?"> What you should know? </a></li>
    <li><a class= "nav-link" href="#Syntax"> Syntax </a></li>
    <li><a class= "nav-link" href="#Color"> Color </a> </li>
    <li><a class="nav-link" href="#Text"> Text </a></li>
    <li><a class="nav-link" href= "#Boxes"> Boxes </a></li>
    <li><a class="nav-link" href="#Lists,_Tables_&_Forms"> Lists, Tables & Forms </a></li>
    <li><a class= "nav-link" href= "#Images"> Images </a></li>
    <li><a class= "nav-link" href="#References"> References </a></li>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header> Introduction </header>
      <p>CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.Once you have learned how to write a CSS rule, learning CSS mostly involves learning the different properties you can use. </p>
    <section class="main-section" id= "What_you_should_know?">
      <header> What you should know?</header>
      <p>This guide assumes you have the  following basic background: </p>
        <li> A general understanding of the Internet and World Wide Web (WWW)</li>
        <li>Good working knowledge of HyperText Markup Language </li>
        <li> A Text Editor like Notepad+ to create your code </li>
      <section class= "main-section" id=
        <p> CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration. </p>
        <code> For example:
          p { font-family: Arial;} selector = "p"  declaration = {font-family: Arial;} </code>
        <p> CSS declarations sit inside curly brackets and each is made up of two parts: a property and a value, seperated by a colon. You can specify several properties in one declaration, each seperated by a semi-colon.</p>
        <code> For Example: 
          {font-family: Arial;} property = "font-family" value = "Arial" </code>
      <section class= "main-section" id= "Color">
        <header> Color</header>
        <p> The color property allows you to specify the color of text inside an element. You can specify in one of three ways: </p>
          <li> RGB Values-express colors in teerms of how much red, green and blue are used ot make it up. </li>
          <code> color: rgb (100, 100, 90);</code>
          <li> Hex Codes- these are six-digit codes that represent the amount of red, green and blue in a color preceded by a pound or hash # sign.  </li>
          <code> color: #ee3e80;</code>
          <li> Color Names- there are 147 predefined color names that are recognized by browsers. </li>
          <code> color: DarkCyan; </code>
          <li> HSL (Hue Saturation Lightness)- is an alternative way to specify colors. The value of the property  starts with the letters hsl, followed by the individual values inside parentheses for:
          <code> background-color: hsl (0, 0%, 78%); </code>
          <li> HSLA (Hue Saturation Lightness Alpha) allows you to specify color properties using hue, saturation and lightness as above and adds a fourth value which represents transparency. The a stands for alpha.</li>
            <code> background-color: hsla(0, 100%, 100%, 0.5); </code>
        <p> Older Browsers do not recognize HSL and HSLA values it is a good idea to add an extra rule which specifies the color using a hex code, RGB value or color name. This should appear before the rule that uses the HSL or HSLA value. This provides a fallback </p>
          <p> CSS treats each HTML element as it appears in a box, and the background-color property sets the color of the background for that box. You can specify your choice of background color in the same three ways you can specify foreground colors: RGB values, hex codes, and color names. If you do not specify a background color, then the backgroudn is transparent. </p>
        <code> background-color: white or #ee3e80 or rgb(200,200,200);</code>
            <p> Other color related concepts: </p>
              <li> Hue- is near to the colloquial idea of color. Technically speaking however, a color can also have saturation and brightness as well as hue. </li>
              <li> Saturation- refers to the amount of gray in a color. At maximum saturation, there would be no gray in the color. At the minimum saturatoin the color should be mostly gray. </li>
              <li> Brightness - refers to how much black is in a color. At maximum brighness, there would be no black in the color. At minimum brightness the color would be very dark. </li>
              <li> Contrast- text is harder to read when there is low contrast between background and foreground colors. A lack of contrast is particularly a problem for those with visual impairments and color blindness; text is easier to read when there is higher contrast between background and foreground colors. If you want people to read a lot of text on your page, however, then too much contrast can make it harder to read; for long spans of text, reducing the contrast a little bit improves readability. You can reduce contrast by using dark gray text on a white background or an off-white text on a dark background. </li>
              <li> Opacity- the condition of lacking transparency or translucence, allows you to specify the opacity of an element and any of its child elements. THe value is a number between 0.0 and 1.0. 
              <code> opacity: 0.5; </code>
              <li> RGBA- this property allows you to specify a color, ust like you would with an RGB value, but adds a fourth value to indicate opacity. THis value is known as an alpha value and is a number between 0.0 and 1.0. Some browsers will not recognize RGBA colors you can offer a fallback so that they display a solid color. To careate the fallback, you can specify a color as a he code, color name or RGB value, followed by the rule that specifies an RGBA value. </li>
              <code> background-color: rgba(0,0,0,0.5); </code>
        <section class= "main-section" id= "Text">
          <p> The properties that allow you to control the appearance of text can be split into two groups. 1. that directly affect the font and its appearnace 2. those that would have the same effect on text no matter what font you were using. The formatting of your text can have a significant effect on how readable your pages are. </p>
            <li> font-family- property allows you to specify the typeface that should be used for any text inside the elements. The value of this property is the name of the typeface you want to use. You can find a list of typefaces by making a google search.</li>
            <code> font-family: Georgia; </code>
            <li> font-size- property enables you to specify a size for the font. There are several ways to specify the size of font. The most common are pixels, percentages and EMS. Pixels are commonly used because they allow web designers very precise control over how much space their text takes up. With percentages the default size of text in browsers is 16px. So a size of 75%  would be the equivalent of 12px and 200% would be 32px. EMS is equivalent to the width of a letter m. </li>
            <code> font-size: 12px; font-size: 200%; font-size: 1.3em; </code>
            <li> @fontface- allows you to use a font, eve if it is not installed on the computer of the person browsing by allowing you to specify a path to a copy of the font, which will be downloaded if it is not on the user's machine. <b>font-family</b> specifies the name of the font; <b>src</b> specifies the path to the font; <b>format</b> specifies the format of that the font is supplied in. </li>
            <code> @font-face { font-family: "ChunkFiveRegular"; src: url('fonts/chunkfive.eot?#iefix') format('embedded-opentype'),} </code>
            <li> font-weight- property allows you to create bold text. This property take two values commonly: <b>normal</b> which causes text to appear at a normal weight and <b>bold</b> which causes text to appear bold </li>
            <code> font-weight: bold;</code>
            <li> font-style- property allows you to create italic text. This property has three values: <b>normal</b> which causes text to appear in a normal style, <b>italic</b> which causes text to appear italic and <b>oblique</b> that causes text to appear oblique. </li>
            <code> font-style: italic; </code>
            <li> text-transform- property is used to change the case of text giving it one of the following values: <b>uppercase</b> causes the text to appear uppercase, <b>lowercase</b> causes the text to appear lowercase.<b>capitalize</b> causes the first letter of each word to appear capitalized.</li>
              <code> text-transform: uppercase; </code>
              <li> text-decoration- this property allows you to specify the following values: <b>none</b> which removes any decoration already applied to the text, <b>underline</b>adds a line underneath the text, <b>overline</b> adds a line over the top of the text, <b>line-through</b> adds a line through words, <b>blink</b> animates the text to make it flash on and off.</li>
            <code> text-decoration: underline; </code>
            <li> line-height- property sets the height of an entire line of text, so the difference between the font-size and line-height is equivilant to the leading.</li>
            <code> line-height: 1.4em; </code>
            <li>letter-spacing, word-spacing- you can control the space between each letter with letter-spacing and you can control the gap between words using the word-spacing property. Values for these properties should be given in ems and it will be added on top of the default value specified by the font. </li>
            <code> letter-spacing: 0.2em; word-spacing: 1em; </code>
            <li>text-align- property allows you to control the alignment of text. The property can take one of four values: <b>left</b> indicates that the twxt should be left-aligned, <b>right</b> indicates that the text whould be right-aligned, <b>center</b> allows you to center text, <b>justify</b> indicates that every line in a paragraph, except the last line should be set to take up the full width of the containing box. </li>
            <code> text-align: left; </code>
            <li> vertical-align- property is commonly used with inline elements such as image, em and strong elements. It performs a similar task to the HTML align attribute used on the image element. The values it can take are baseline, sub, super, top, text-top, middle, bottom, text-bottom. </li>
            <code> vertical-align: text-top; </code>
            <li>text-indent - property allows you to indent the first line of text within an element. The amount you want the line indented by can be specified in a number of ways but is usally given in pixels or ems. </li>
            <code> text-indent: 20px; </code>
            <li> text-shadow - it is used to create a drop shadow, which is a dark version of the word just behind it and slightly offset. It can also be used to create an embossed effect by adding a shadow that is slightly lighter than the text. The value is complicated and can take three legnth and a color for the drop shadow. <i>First legnth</i> indicates how far to thel left or right the shadow should fall. <i> Second </i> value indicates to the top or bottom that the shadow should fall. <i> Third </i> value is optional and specifies the amount of blur that should be applied to the drop shadow. <i> Fourth </i> value is the color of the drop shadow. </li>
            <code> text-shadow: 1px 1px 3px #666666; </code>
          <p> Pseudo Elements- specify the declarations as you would normally for ny other element:</p>
            <li> :first-letter and :first-line- you can specify different values for the first letter or first line of text inside an element.</li>
            <code> p.intro: first-letter {font-size: 200%}; p.intro: first-line {font-weight: bold;} </code>
            <li> :link- allows you to set styles for links that have not yet been visited. </li>
            <code> a: link { color: deeppink;} </code>
            <li> :visited- allows you to set styles for links that have been clicked on. </li>
            <code> a: visited { color: black;} </code>
              <li> :hover- this is applied when a user hovers over an element with a pointing device such as a mouse. </li>
              <code> a: hover { color: deeppink;} </code>
              <li> :active- this is applied when an element is being activated by a user </li>
              <code> a: active {color: darkCyan;}</code>
              <li> :focus-this is applied when an element has focus. Focus occurs when a browser discovers that you are ready to interact with an element on the page. </li>
              <code> a :focus { color: deeppink;} </code>
         <section class= "main-section" id= "Boxes">
           <p> You can set several properties that affect the appearance of boxes. The following properties are used to adjust the dimensions of boxes. </p>
             <li> height and width properties - the ways to specify the sixe of a box are to use pixels, percentages or ems. Pixesl have been the most popular method because they allow designers to accurately control the size. When percentages are used, the size of the box is relative to the size of the browser window or if the box is encased within another box, it is a pe34rcentage of the size fof the containing box. When you use ems, the size of the  box is based on the size of text within it. </li>
             <code> div { height: 300px; width: 75%;} </code>
             <li>min-width property - specifies the smallest size a box can be displayed at when the browser window is narrow. you can use this property to ensure that lies of text do not appear too narrow within a big browser window </li>
             <code> td. description { min-width: 450px;} </code>
             <li> max-width property -indicates the maximum width a box can stretch to when the browser window is wide; you can use this property to ensure that lies of text do not appear too wide within a big browsser window </li>
             <code> td. description { max-width: 650px;} </code>
             <li> min-height and max-height property- allows you to limit the height of a box on a page the same way you can limit the width of the box with min-width and max-width. </li>
             <code> p { min-height: 10px; max-height: 30px;} </code>
             <li> overflow property - tells the broser what to do if the content contained within a box is larger than the box itself. It can have one of two values: <i> hidden </i> a property that simply hides any extra content that does not fit in the box. <i> scroll </i> a property adds a scrollbar to the box so that users can scroll to use the missing content. </li>
             <code> { overflow: hidden;} p.two { overflow: scroll;} </code>
             <li> border-width property- is used to control the width of a border. The value of this property can either be given in pizel or using one of the following values: thin, medium and thick. You can control the individual size of borders using four seperate properties: <i>border-top-width, border-right-width, border-bottom-width and border-left-width.</i> You can also specify different widths for the four border values in one property, like so: bordeer-width: 2px 1px 1px 2px; </li>
               <code> { border-width: 2px;} </code>
             <li> border-style property - can control the style of a border. This property can take the following values: <i>solid</i> which is a single solid line, <i>dotted</i> is a series of square dots, <i> dashed </i> is a series of short lines, <i> double </i> are two solid lines, <i> groove </i> appears to be carved into the page, <i> ridge </i> appears to stick out from the page, <i> inset </i> appears embedded into the page, <i> outset </i> looks like it is coming out of the screen and <i> hidden/none </i> is for no border. You can individually change the styles of different borders using:<i> border-top-style, border-left-style, border-right-style and border-bottom-style.</i> </li>
             <code> p. one { border-style: solid;} p. two { border-style: dotted;} p. three { border-style: dashed;} etc. </code>
             <li> border-color property - allows you to specity the color of border using either RGB values, hex codes or CSS color names. It is possible to individually control the colors of the borders on different sies of a box using: <i> border-top-color, border-right-color, border-bottom-color and border-left-color. </i> </li>
             <code> p. one { border-color: #0088dd;} </code>
             <li> border property- allows you to specify the width,style and color of a border in one property. </li>
             <code> p { width: 250px; border: 3px dotted #0088dd;} </code>
             <li> padding property- allows you to specity how much space should appear between the content of an element and its border. The value is most often in pixels but also possible to use percentages or ems. You can specify different values for each side of a box using: <i>paddin-top, padding-right, padding-bottom and padding-left</i></li>
             <code> padding: 10px; padding: 10px 5px 3px 1px; </code>
             <li> margin property - controls the gap between boxes. Its value is commonly given in pixels altho9ugh you may also use percentages or ems. You can specify values for each side of a box using: <i> margin-top, margin-right, margin-bottom and margin-left. </i></li>
             <code> margin: 20px; margin: 1px 2px 3px 4px; </code>
             <li> display property- allows you to turn an inline element into a block-level element or vice vedrsa and can bue used to hide an element from the page. The values this property can take are: <i> inline </i> causes a block-level element to act like an inline element, <i> block </i> causes an inline element to act like a block-level element, <i> inline-block </i> causes a block-level element to flow like an inline element while retaining other features of a block-level element and <i> none</i> hides an element from the page. </li>
             <code> p { display: inline;} </code>
             <li> visibility property- allows you to hide boxes from users but it leaves a space where the element would have been. This property can take two values: <i> hidden </i> hides the element which will display a blank space <i> visible </i> shows the element. </li>
             <code> li.comming-soon { visibility: hidden;} </code>
             <li> border-image property- applies an image to the border of any box. It takes a background image and slices it into nine peices. The property requires the URL of the image, where to slice the image and what to do with the straight edges which can be <i>stretch </i> stretches the image, <i> repeat </i> repeats the image, <i> round </i> like repeat but if the tiles do not fit exactly, scales the tile image so they will. </li>
             <code> p. one { -moz-border-image: url("images/dots.gif") 11 11 11 11 stretch;} </code>
             <li> box-shadow property- allows you to add a drop shadow around a box. It must use at least the first of these two values as well as a color: <i>horizontal offset </i> where negative values position the shadow to the left of the box, <i>vertical offset </i> where negative values position the shadow to the top of the box, <i> blur distance </i> which if omitted, the shadow is a solid line like a border and <i> spread of shadow </i> if used a positive value will cause the shadow to expand in all directions and a negative value will make it contact. The <i> inset </i> keyword can also be used before these values to create an inner-shadow. </li>
             <code> {box-shadow: -5px -5px #777777;}</code>
               <li> border-radius propery- provides you the ability to create rounded corners on any box. The value indicates the size of the radius in pixels. You can specify individual values for each corner of a box using: <i> border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius and border-top-left-radius.</i></li>
               <code> p { border-radius: 10px; Shorthand (top, right, bottom, left) border-radius: 5px, 10px, 5px 10px;} </code>
           <section class="main-section" id="Lists,_Tables_&_Forms">
             <header>Lists, Tables & Forms</header>
             <p>There are several CSS properties that were created to work with specific types of HTML elements, such as lists, tables, and forms. Together, these properties allow you to take finer control over specific parts of your pages. </p>
             <li> list-style-type property- allows you to control the shape or style of a bullet point. It can be usedon rules that apply to the  and  elements. For an unordered list you can use the following values: <i> none, disc, circle and square </i>. For an ordered list you can use the following values: <i> decimal (1 2 3), decimal-leading-zero (01 02 03), lower-alpha (a b c), upper-alpha (A B C), lower-roman (i. ii. iii.) and upper roman (I II III) </i> </li>
               <code> ol { list-style-type: lower-roman;} </code>
               <li> list-style-image property - allows you to specify an image to act as a bullet point using the list-style-image property. The value starts with the letter url and is followed by a pair of parentheses. Inside the parentheses the path to the image is given inside double quotes. This property can be used on rules that apply to the and elements </li>
                 <code> ul { list-style-image: url("images/star.png");} </code>
                 <li> list-style-position property- indicates whether the marker should appear on the inside or the outside of the box containing the main points. This property can take one of two values: <i> outside </i> which makes the marker sit to the left of the block of text, <i> inside </i> which makes the marker sits inside the box of text. </li>
                 <code> ul.season { list-style-position: inside;} </code>
                 <li> list-style property- acts as a shorthand for list styles. It allows you to express the markers' style, image and position properties in any order. </li>
                 <code> ul { list-style: inside circle;} </code>
                 <p> Table properties commonly use several properties that you have already seen below like: <i> width, padding, text-transorm, letter-spacing, font-size, border-top, border-bottom, text-align, background-color and :hover </i> Some styling tips inclue: giving cells padding, distinguish headings, shade alternate rows, align numeral and online extras. </p>
                   <li> empty-cells property- to specify whether or not their borders should be shown for empty cells. It can take one of three values: <i>show</i> shows the borders of any empty cells, <i>hide</i>hides the borders of an empty cell and <i>inherit</i> value instructs the table cells to obey the rules of the containing table. </li>
                   <code> empty-cells: hide; </code>
                   <li> border-spacing proerty- allows you to control the distance between adjacent cells, so if you want to increase or decrease this space then this property allows you to control the gap. THe value of this property is usually specified in pixels You can specify two values if desired to specify seperate numbers for horizontal and vertical spacing. </li>
                   <code> border-spacing: 5px 15px; </code>
                   <li> border-collapse property- allows you to collapse adjacent borders to prevent the width of the lines to be twice that of the outside edges. Possible values: <i>collapse</i>shows borders collapsed into a single border and <i>seperate</i> is for borders who are detatched from each other. </li>
                   <code> border-collapse: collapse; </code>
                   <li> cursor property- allows you to control the top of mouse cursor that should be displayed to users. Commonly used values for this property is: <i>auto, crosshair, default, pointer, move, text, wait, help and url("cursor.gif"); </i></li>
                     <code> cursor: move; </code>
                 <p> Styling Tips: CSS properties commonly used with text inputs are <i> font-size, color, background-color, border, border-radius, :focus, :hover and background-image </i>. <br> Styling Submit Buttons: Some properties you can use to style submit buttons are <i>color, text-shadow, border-bottom, background-color and :hover. </i> <br> Fieldsets are particularly helpful in determining the edges of a form. The legend is used to indicate what information is required in the fieldset. Properties commonly used with these two elements include: <i>width, color, background-color, border, border-radius and padding.</i></p>
               <section class="main-section" id="Images">
                 <header>Images </header>
                 <p>Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of HTML markup. </p>
                 <p> You can control the size of an image using the <i>width </i> and <i>height</i> properties in CSS, just like you can for any other box. Specifying image size helps pages to load more smoothly because the HTML and CSS code will often load before the images, and telling the browser how much space to leave for an image shows it to render the rest of the page without waiting for the image to download. Whenever you use consistently sized images across a site, you can use CSS to control the dimensions of the images, instead of putting the dimensions in the HTML </p>
                 <code> img. large { width: 500px; height: 500px;} </code>
                 <p> Rather than using <i>width</i> and <i>height</i> attributes in image elements in HTML, you can use these names as values for the class attribute. In the CSS, you add selectors for each of the class names, then use the CSS width and height properties to control the image dimensions </p>
                 <p> Rather than using the image elements align atribute, web page authors are increasingly using the <i>float property</i> to align images. There are two ways that this is commonly acheived: </p>
                   <li> The <i>float property</i> is added to the class that was created to represent the size of the image. </li>
                   <li> New classes are created with names such as <i>align-left</i> or <i>align-right</i> to align the images to the left or right of the page. These class names are used in addition to classes that indicate the size of the image. </li>
                 <code> img. align-left { float: left; margin-right: 10px;} </code>
                 <p> By default, images are inline elements. In order to center an image, it should be turned into a block-level element using th <i>display</i> property with a value of <i>block</i>. Once it has been made into a block-level element, there are two common ways in which you can horizonally center an image. </p>
                   <li> On the containing element, you can use the <i>text-align</i> property with a value of center </li>
                   <li> On the image itself, you can use the <i>margin</i> property and set the values of the lfeft and right margins to auto.</li>
                   <code> img. align-center { display: block; margin: 0px auto:} </code>
                   <li> background-image property- allows you to place an image behind any HTML element. THis could be the entire page or just part of the page. By default a backgro9und image will repeat to fill the entire box. THe path to the image follows the letters url , and it is put inside parentheses and quotes, </li>
                   <code> body { background-image: url("images/patern.gif");} </code>
                   <li> background-repat property can have four values: <i>repeat</i> which will make the backgrouodn image repeat both horizontally and vertically, <i>repeat-x</i> which the image is repeated horizontally only, <i>repeat-y</i> which the image is repeated vertically only and <i>no-repeat</i>is when the image is only shown once. </li>
                   <code> body { background-image: url("images/header.gif"); backgroound-repeat: repeat-x;} </code>
                   <li> background-attatment property specifies whether a background-image should stay in one position or move as the user scrolls up and down the page. It can have one of two values: <i>fixed</i> is when the background image stays in the same position on the page and <i>scroll</i> is when the background image moves up and down as the user scrolls up and down the page. </li>
                   <code> body { background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-attatchment: fixed;} </code>
                   <li>background-position property- specifies where in the browser window the background image should be placed. This property usually has a pair of values. The first represents the horizontal positon and the second represents the vertical. Values can be: <i> left, top, center, bottom, and right </i> If you can specify one value the second value will default to center. You can also use a pair of pixels or percentages. This represents the distance from the top left corner of the browser window.</li>
                   <code> body { background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-position: center top;} </code>
                   <li> background property- acts alike a shorthand for all the other background properties you have just seen and also the <i> background-color </i> property. The properties must be specified in the following order, but you can miss any value if you do not want to specify it. </li>
                     <li>background-color </li>
                     <li> background-image</li>
                     <li> background-repeat</li>
                     <li> background-attatchment</li>
                     <li> background-position</li>
                   <code> body { background: #ffffff url("images/tulip.gif") no-repeat top right;} </code>
    <section id="References">
        <li>Duckett, J., 2011. HTML & CSS: DESIGN AND BUILD WEBSITES. Indianapolis: John Wiley & Sons Inc., pp.226-428.</li>


                body {
  min-width: 290px;
  color: black;
  background-color: lightGray;
  font-family: Arial;
  overflow-x: hidden;

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: blue;

header {
  color: gray;
  margin: 10px;
  text-align: center;
  font-size: 2em;
  font-weight: bold;

#main-doc header {
  text-align: center;

#navbar header {
  font-size: 1.2em;

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;

#navbar li {
  color: #4d4e53;
  border-top: 1px solid blue;
  list-style: none;
  position: relative;
  width: 100%;

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;

section li {
  margin: 15px 0px 0px 20px;

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;