# M1D5: CSS Part 2

• Inline
• Style tags
• External stylesheets

t is a self-closing tag and requires the following three attributes:

• href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
• type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
• rel — this attribute describes the relationship between the HTML file and the CSS file.
<!-- In the HTML file, add this to the <head> tag -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">

Note that in HTML5, you actually don’t have to specify type="text/css" here.

@import – links a CSS file to another CSS file. You can have all your styles living inside one main CSS file, or you can use @import to break your styles (one for layout, one for images, one for blog cards, etc.) into a number of smaller, focused files.

// at the top of your main CSS file

@import “./layout”;
@import “./images”;
@import “./blog-cards”;

Inline CSS

Add the CSS code as an attribute.

<div id="test" style="font-size:54px">This is HTML.</div>

Style Tags

<!-- In the HTML file, add this to the <head> tag, style tag-->
<style>
#test {
text-transform: uppercase;
}
</style>

## Specificity

Here is the logical order of selectors from least to most weight assigned. Hierarchy, least important to most important.

1. !important
2. ID selectors (e.g., #example).
3. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
4. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Note on !important – Always look for a way to use specificity before even considering !important. Never use !important on site-wide CSS.

## The Box Model

The difference between the padding and the margin is the location of the space based on the border. Note that not all elements have visible borders, which makes the padding and the margin confusing.

Padding – space you add inside the border, this will be the space of the element from the border.
Margin – space you add outside the border.

Content – content of the box itself, which has a height and width. This could be an image, text, or any elements.

Padding – this is the space between the box’s content and its border. The size is in addition to the content’s height and width.

Border – this is the usual border. Most contents have invisible border

border-bottom: 1px solid #5D6063;

Margin – surrounds the rest of the box. This is outside the border.

## Display and Positioning: Inline & Block

CSS Display Property

display: inline; //no with and height, because it just occupies the space it takes up with its text content

display: inline-block; //like inline except you can add width and height

display: block; //takes up its entire line no matter what

display: none; //nothing is displayed -- takes up no width and height from the DOM

Difference between inline and inline-block.

## HTML Document

<!DOCTYPE html>
<html lang="en"> //language
</html>