To centerize fixed element

In order to center fixed element, use the following technique. This codes is also used in this html file. 
header {
    position: fixed;
    top: 10px;
    z-index: 120;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}

Show your codes with Prism Library.

# Prismの使い方 コードを美しく見せるcss/jsライブラリ さまざまなプログラミング言語のシンタックスに対応している。 ##使い方 preタグとcodeタグで囲む。 
<pre><code class="language-html">表示させたいコード</code></pre>
##コードハイライトで使いやすそうなPrismのプラグイン * Line Number 行番号を表示させてくれる。 * Keep Markup 注目してほしいコードの部分を<mark></mark>タグで囲むと強調される。 * Copy to Clipboard Button コードをクリップボードにコピーできるようになる。

The Prism library is a lightweight, flexible, and extensible syntax highlighting library specifically designed for modern web development. It has a wide range of color-coded syntaxs corresponding to programming languages. This website also takes advantage of these syntax highlighting library. Here's way to step by step apply it for your sharing codes.

  1. Go to the Prism website and select your desirable theme. This theme controls the apperance of code snippets.
    2. The apperance of Prism site
  2. The multiple code selections of syntax are shown. Select your target languages and formats.
    3. The appearance of Prism site
  3. Lastly, you can choose any favorite plugins to make your code look distinct. The below selected ones are what this site is applying for codes' indication.
    4. The appearance of Prism site
  4. Once your preference is determined, scroll to the bottom of page and click DOWNLOAD JS and DOWNLOAD CSS.
    5. The apperance of Prism site
  5. Place downloaded files into your working directory like following:
    6. Placement of downloaded files
  6. Load both .css and .js files within your HTML code. It might seem so:
    7. 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Apply CSS and JS Files into HTML</title>
        <meta charset="UTF-8">
       <link rel="stylesheet" href="prism.css">
    </head>

    <body>
        <h1>Apply CSS and JS Files into HTML</h1>
        <p>This web site applies Prism Library.</p>

        <script src="prism.js"></script>
    </body>

</html>

My Top Navigation

This website indicates a fixed navigation menu on the top of page. This is easy to create. Firstly, the structure of html looks like so: 
<header>
    <nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>
Then add the following css cascading styles. 
header {
    position: fixed;
    top: 10px;
    z-index: 120;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 22px;
    box-shadow: 2px 2px 4px 1px  gainsboro;
}

header > nav > ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin: 0 40px;
}

header > nav > ul > li {
    margin: 0;
}

header > nav > ul > li > a {
    text-decoration: none;
    display: inline-block;
    /* border: 4px solid antiquewhite; */
    background-color: white;
    border-radius: 12px;
    padding: 14px 6px;
    transition: 0.5s;
}

header > nav > ul > li > a:hover {
    background-color: black;
    color: white;
    transition: 0.5s;
}

Selectors

Selectors is a limit to which fields to have effects of css.

Definition
Selectors are patterns to target elements on a web page.
Types
  • Universal Selectors(*)
    • Target all elements.
  • Type Selectors(<p>)
    • Targets a specific HTML tag.
  • Class Selector (.class-name)
    • Targets elements with a specific class.
  • ID Selector (#id-name)
    • Targets an element with an unique ID.
  • Attribute Selector([type="text"])
    • Targets elements based on attributes.
  • Pseudo-Classes(:hover, :nth-of-type(1))
    • Apply styles based on the element's state or position.

Font-Family property

Serif

Definition
明朝体を意味します。
Serif fonts have small decorative strokes (serifs) at the ends of characters' lines.
Apperance
Traditional, formal, and classic
Usage
Commonly used in printed materials like books, newspapers and formal documents, as the serifs guide reader's eye along the line of text.
Example
  • Times New Roman
  • Georgia
  • Garamond

Sans-serif

Definition
ゴシック体を意味します。
Sans-serif means "without serifs" (from the French word sans, meaning "without").
Apperance
Modern, clean, and minimalist
Usage
Commonly used in digital content, like websites and apps, as they are easier to read onscreens.
Example
  • Arial
  • Helvetica
  • Verdana

Properties and Values

Box Model

Cascade and Sppecificity

Positioning

Flex Box

Grid Layout

Media Queries

Pseudo-classes and Pseudo-elements

Responsive Design

Z-Index

Transitions and Animations

Units

Variables

Shorthand properties

list-style (shorthand property for list)

HTML provide two types of list: <ul> and <ol>.

<ul> stands for an unordered list, while <ol> stands for an ordered list.

The settable values for the list-style-type property
values appearance meaning
disc
  • op1
  • op2
 the solid circle that is commonly used as the default bullet point in an unorderedl list.
square
  • op1
  • op2
circle
  • op1
  • op2
armenin
  • op1
  • op2
decimal
  • op1
  • op2
decimal-leading-zero
  • op1
  • op2
georgian
  • op1
  • op1
lower-alpha
  • op1
  • op2
upper-alpha
  • op1
  • op2
lower-greek
  • op1
  • op2
lower-latin
  • op1
  • op2
upper-latin
  • op1
  • op2
lower-roman
  • op1
  • op2
upper-roman
  • op1
  • op2
Looking at the table above, you'll notice that lower-alpha and lower-latin have the same appearance, as do upper-alpha and upper-latin.

HTML

Content Models

  1. Flow Content
    • Definition: Elements that can be used as part of the general structure of a documemt.
    • Can contain: Other flow content, form elements, and script elements.
    • Example
      • <div>, <p>, <a>, <section>, <header>, <footer>
  2. Sectioning Content
  3. Metadata Content
  4. Embedded Content
  5. Form Content
  6. Script Content
  7. Transparent Content