What is CSS?
- CSS
- Cascading Style Sheets
- A language for describing how documents are presented visually - how they are arranged and styled.
- Allows us to style and manipulate the visual representation of the HTML content on the page.
- CSS Rules
- Almost everything done in CSS follows the basic pattern:
selector {
property: value;
}
//examples
h1 {
color: purple;
}
img {
width: 100px;
height: 200px;
}
input[type="text"]:nth-of-type(2n){
border: 2px solid red;
}
Including Styles Correctly
- Inline styles
- Write your styles directly inline on each element in HTML
- It makes it impossible to share styles between elements.
- NOT RECOMMENDED
- The <style> element
- Write your styles inside of a <style> element in HTML
- This is easy, but is makes it impossible to share styles between documents.
- NOT RECOMMENDED
- External Stylesheet
- Write your styles in a .css file, and then include the file using a <link> in the head of the HTML file.
- RECOMMENDED
- <link>
<head>
<title>Forms Demo</title>
<link rel="stylesheet" href="my_styles.css">
</head>
Color & Background-Color
button {
color: magenta;
background-color: olive;
}- background property: can insert image or gradient.
Named Colors
- Has name that all the browsers recognize.
- Only has 140 colors.
RGB Colors
- Red, Green, Blue Channels
- Each channel range from 0 to 255
- example:
h2 {
color: rgb(88, 24, 123);
}Hexademical
- Still red, green, and blue channels.
- Base 16 number system
- Each sot has 16 choices (0~F)
- example:
h2 {
color: #25FA3B;
}
Common Text Properties
- text-align
- sets the horizontal alignment of a block element or table-cell (for vertical aliment, use "vertical-align")
- default: left
- keyword values: left, right, center
- font-weight
- keyword values: normal, bold, lighter, bolder, 100(min), 400(normal), 700(blod), 900(max)
- If the value doesn't exist for the font, the browser will choose the closest one.
- text-decoration
- keyword values
- line: underline, overline, line0through...
- color
- style: dotted, wavy, dashed, solid, double...
- thickness
- If set "none", default line (ex. <a>) disappears.
- keyword values
- line-height
- Sets the geight of a line box
- It's commonly used to set the distance between lines of text
- Example
h1 {
text-align: center;
font-weight: 400;
text-decoration: underline red wavy;
line-height: 2.3;
letter-spacing: 15px;
}
Font Size Basics with Pixels
- font-size
- sets the size of the font
- keyword values
- <absolute size> values : xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
- <relative size> values : smaller, larger
- <length> values : px, em
- value units
- Relative : em, rem, vh, vw, %...
- Absolute : px, pt, cm, in, mm...
The Font Family Property
- font-family
- Specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- If the user's computer doesn't have the font, the browser will show another font for the text.
- example
h1 {
font-family: Verdana, sans-serif;
}
/*
sans-serif is a backup font (generic)
There can be more than one backup font.
*/
* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.
'TIL: Today I Learned' 카테고리의 다른 글
| [TIL] 20201116 The CSS Box Model (0) | 2020.11.16 |
|---|---|
| [TIL] 20201113 The World of CSS Selectors (0) | 2020.11.13 |
| [TIL] 20201107 HTML: Forms & Tables (0) | 2020.11.07 |
| [TIL] 20201106 HTML: Next Steps & Semantics (0) | 2020.11.07 |
| [TIL] 20201101 HTML: The essentials (2) (0) | 2020.11.02 |
