TIL4 - CSS - Intro, Selectors

Peter D Lee·2020년 8월 11일

CODECADEMY CSS TIL WeCode

CSS

목록 보기

1/8

CSS Intro

1. What is CSS?

Cascading Style Sheets
> CSS is used to style the webpage

2. Using CSS Inside HTML

CSS can be used directly in the HTML file 'inline', through the style attribute within an HTML element's opening tag
> ex)
 <p style="color: red; font-size: 20px;">Using CSS inline</p>
It can also be used as a <style> element inside the <head> element, which would be more versatile than using as the attribute
> ex)
 <head>
   <style>
   p {
     "color: red;
     font-size: 20px;
   }
   </style>
 </head>

3. Linking CSS to HTML

CSS codes should be written in a separate '.css' file and then linked to the HTML file.

<link>

CSS file is linked to HTML through the <link> element, inside the <head> element

The <link> element is a self-closing tag - it only has opening tag

It requires 3 attributes:

href - the source or the path to the file being linked to HTML. Can be an absolute path URL or relative path. For CSS, the value would usually be a relative path.
> For a CSS file named 'style.css', the value of href would be "./style.css", or just "style.css"

type - specifies the 'type' of the file being linked to HTML.
> For CSS, the value of type should be "text/css"

rel - specifies the 'relationship' between the file being linked and HTML.
> For CSS, the value of rel should be "stylesheet"

ex)
<head>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>

4. CSS Selectors

CSS selectors are used to 'select' HTML elements

CSS can select HTML elements by tag, class, or id
In other words, CSS selectors can have 3 types:

tag - use the HTML element's tag as the selector (without double angle brackets)
> ex)
<h1>Hello</h1>
h1 {
  font-family: Georgia;
  font-size: 20px;
  color: red;
}

class - use '.' + class name as the selector
<h1 class="bold blue">Hello</h1>
.bold {
  font-weight: bold;
}
.blue {
  color: blue;
}

id - use '#' + id name as the selector

<h1 id="hello">Hello</h1>

#hello {
  font-family: cursive;
  font-size: 30px;
  color: purple;
}

5. Specificity of Selectors

The different CSS selectors have order of specificity.

tag > class > id

tag selectors are most general

class selectors are more specific

id selectors are most specific

styles for selectors with higher degree of specificity overrides those of more general specificity

id selector overrides class & tag selectors

class selector overrides tag selector

*Best practice in CSS is to style elements using the lowest degree of specificity.

You should use the id selectors sparingly, since an id selector can only be replaced by another id selector with additional styling

6. Chaining Selectors

You can 'chain' CSS selectors to be more specific in which HTML elements to style

Selecting only particular tags of a class
h1.bold {
  font-weight: bold;
}
> this would select only the <h1> tags of the class bold

Selecting nested elements of a class
Consider following HTML:
<ul class="main">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>
the li elements can be selected in CSS by:
.main li {
}

Adding more than one tag, class, or id to a CSS selector increases the specificity of the selector

7. Multiple Selectors

More than one HTML elements can be selected at the same time to avoid repetitive CSS codes

Use comma to separate multiple selectors

ex)
h2, p {
  font-size: 20px
  color: blue;
}

Peter D Lee

다음 포스트