CSS is a short term of "Cascading Style Sheets".
It is what's called a style sheet or a style language in the sense that it can't really do anything by itself. Its only purpose in life is to style markup language(HTML, XML, etc..).
CSS will bring your website from 90's lame styled website to current day.
First of all, I recommend you this site. This site lets you know the nice colortones.
There are 3 ways of embeding css in your website
1. inline-css in each tag.
2. style tag in your html file.
3. creating css file outside of your html and embedding link tag to your html file.
Actually, It is very cumbersome to write all the css codes into tag and It will make maintenance very hard in case of inline-css!
so I recommend you to create css file outside of your html file and embed link tag to your html file.
When you embed a link tag to your html file, you should be careful of the css path.
Directory Path
1. ../
- This means starting from outside of your current directory.
2. ./css/ or css/
- choosing css folder in your current directory.
- relative to subdirectory.
3. /css/
- choosing css folder from your root. Do not use this when you write your path.
- relative to root.
Anatomy of CSS syntax
1. What is Syntax?
- grammer of CSS.
2. Selector{property: value;}
- Selector : Who is it that you want to modify in your web page?
- Property : What about this background, font-style,etc.. ??
- value : How do you want to change the background font-style?
3. Kinds of selector?
- tag selector code
- class selector code
- Id selector code
4. classes vs ids
ids:
You can only have a single instance of one particular id name inside a single page so you can't make same id name inside a same single page.classes:
You can use it to group related elements that are going to behave or have a similar style.
2 classes rules can be applied to one tag.
5. What is "User Agent Stylesheet"?
- It comes from browser. If you specify something using css, then it overrides the default setting for the browser.
6. Pseudo classes
- HTML elements have different states. For example, You can change css style based on the state by using pseudo.
ex) a::hover{}
Favicon
1. What is "favicon"?
- Back in the olden days when people were still using shock and horrible internet explorer 5, favicon was an icon that shows up your browser bar if you favorited the website. You could check how many times people requested to display your favicon. It could give you some estimate of how many people had bookmarked or favorited your website but that doesn't work anymore.
DIV tag
1. div stands for a content division element.
2. It does nothing unless you use css with it.
3. It is only there for you to structure and divide up your content.
4. It has height if it has contents or you have to set up height in CSS.
ViewPort
- The screen that you are viewing the website on.
CSS BOX Model
Let's say we have some content in our box.
We want to have a little bit of padding or a little bit of spacing between the text and the edge of the element where the border starts.
We can add some padding between the texts and elements.
We want to have margin too so I added some margin. margin is to give some space outside of your element.
CSS display property
1. block
By default, some elements are what's called block display.
ex) h1~h6, p, div,ul ,ol ,li , formBlock elements essentially take up the whole width of the screen of the page.
These display type of tags blocks out any other elements from sitting next to the block element on the left or right.
2. inline
By default, some elements are what's called inline display.
ex) span, img, ait only takes up as much space as it needs to in the height and in its width.
You can't change the width of inline elements.
3. inline-block
- You can change the element width.
- You can make them go onto the same line.
- inline + block
4. none
- It gets rid of our elements.
5. As an Offshoot
- visibility : hidden ->
It makes the element disappeared but the element keeps the original position.
What you must remember!
1. Content is everything : your content is the first thing that determines how large things get displayed and what the height and the width will be.
2. Elements order comes from code.
3. Children tags sit on the top of the parents.
Position
1. Static
All HTML elements are static in their position by default.
Static means go along with the HTML rules and keep the default HTML form.
2. Relative
It allows us to do is to position the elements that we select relative to how it would have been positioned and had it been static.
We can set values for them in order to determine how we want to move our elements ex) left, right, top, bottom property in CSS.
When you move an element that has a relative position, It doesn't affect the position of anything else on scren. It is as if the old position was kept and everything else just flows around it as if it never moved.
3. Absolute
the gap where the positioned element should be in the document flow is no longer there
We can set values for them in order to determine how we want to move our elements but acts differently with "relative" ex) left, right, top, bottom property in CSS.
4. Fixed
- This works in exactly the same way as absolute positioning, with one key diffrence: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor(the initial containing block if there isn't one), fixed Positioning usually fixes an element in place relative to visibile portion of the viewport.
Fonts
1. Ways to use various fonts
web safe fonts : sets of font families where most operating systems will be able to render it correctly.
font-embedding : https://fonts.google.com/
2. Default font style
- cursive : hand written
- fantasy : You can image "Avatar" letter style.
- sen-serif, serif : Variable to each letter.
- monospace : All letters have same space.
3. Fonts Property Example
- font-family : verdana, sans-serif -> Use verdana in sans-serif fonts