FreeCodeCamp(Part 1)

• Nesting just means putting one element inside of another element.
• Make Dead Links using the Hash Symbol (#)

Sometimes you want to add a elements to your website before you know where they will link.
This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.
Replace the value of your a element's href attribute with a #, also known as a hash symbol, to turn it into a dead link.

• Turn an Image into a Link

You can make elements into links by nesting them within an a element.
Nest your image within an a element. Here's an example:

<a href="#"><img src="https://bit.ly/fcc-running-cats" 
alt="Three kittens running towards the camera. "></a>

Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link.

• Add Placeholder Text to a Text Field

Your placeholder text is what appears in your text input before your user has input anything.
You can create placeholder text like so:

<input type="text" placeholder="this is placeholder text">

• Use HTML5 to Require a Field

You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.
For example, if you wanted to make a text input field required, you can just add the word required within your input element, you would use:

<input type="text" required>

Make your text input a required field, so that your user can't submit the form without completing this field.

• Create a Set of Radio Buttons

You can use radio buttons for questions where you want the user to only give you one answer.
Radio buttons are a type of input
Each of your radio buttons should be nested within its own label element.
All related radio buttons should have the same name attribute.
Here's an example of a radio button:

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

• Check Radio Buttons and Checkboxes by Default

You can set a checkbox or radio button to be checked by default using the checked attribute.
To do this, just add the word "checked" to the inside of an input element. For example:

<input type="radio" name="test-name" checked>

• You may have already noticed this, but all HTML elements are essentially little rectangles.

Three important properties control the space that surrounds each HTML element: padding, margin, and border.
An element's padding controls the amount of space between the element and its border.
An element's margin controls the amount of space between an element's border and surrounding elements.If you set an element's margin to a negative value, the element will grow larger.

• Inherit Styles from the Body Element

Remember, you can style your body element just like any other HTML element, and all your other elements will inherit your body element's styles.

• Override Styles in Subsequent CSS

We just proved that our classes will override the body element's CSS
Note: It doesn't matter which order the classes are listed in the HTML element.
However, the order of the class declarations in the <style> section are what is important. The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text

• Override Class Declarations by Styling ID Attributes

Id declarations override class declarations, regardless of where they are declared in your style element CSS.

• Override Class Declarations with Inline Styles

There are other ways that you can override CSS. Do you remember inline styles?
Use an in-line style to try to make our h1 element white. Remember, in line styles look like this:

<h1 style="color: green">

Leave the blue-text and pink-text classes on your h1 element.

• Override All Other Styles by using Important

Yay! We just proved that in-line styles will override all the CSS declarations in your style element.
But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important
Let's go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and in-line styles.
An example of how to do this is:

color: red !important;

• Hex codes

Hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.
From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!

• Use Abbreviated(缩写) Hex Code

For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue.
This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.