Linking CSS
- Inline
- Style tags
- External stylesheets
Link 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.
- !important
- ID selectors (e.g.,
#example). - Class selectors (e.g.,
.example), attributes selectors (e.g.,[type="radio"]) and pseudo-classes (e.g.,:hover). - 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.
Difference between padding and margin – margin adds space around an element, padding adds space inside of an element.
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 DOMDifference between inline and inline-block.
HTML Document
<!DOCTYPE html>
<html lang="en"> //language
<head>
<meta charset="utf-8"> // UTF-8 is a character encoding system. It lets you represent characters as ASCII text, while still allowing for international characters, such as Chinese characters. As of the mid 2020s, UTF-8 is one of the most popular encoding systems
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //page looks the same on all devices.
<title>Colored Markers</title>
</head>
<body>
</body>
</html>