CSS summary

CSS summary

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.

https://colorhunt.co/


There are 3 ways of embeding css in your website

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.

  • This means starting from outside of your current directory.


  • choosing css folder in your current directory.
  • relative to subdirectory.


  • choosing css folder from your root. Do not use this when you write your path.
  • relative to root.





  • grammer of CSS.
  • 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?
  • tag selector code
  • class selector code
  • Id selector code
  • 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.

  • It comes from browser. If you specify something using css, then it overrides the default setting for the browser.
  • HTML elements have different states. For example, You can change css style based on the state by using pseudo.

ex) a::hover{}





  • 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.







  • The screen that you are viewing the website on.


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.





  • By default, some elements are what's called block display.
    ex) h1~h6, p, div,ul ,ol ,li , form

  • Block 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.

  • By default, some elements are what's called inline display.
    ex) span, img, a

  • it 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.

  • You can change the element width.
  • You can make them go onto the same line.
  • inline + block
  • It gets rid of our elements.
  • visibility : hidden ->
    It makes the element disappeared but the element keeps the original position.









  • All HTML elements are static in their position by default.

  • Static means go along with the HTML rules and keep the default HTML form.

  • 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.

  • 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.

  • 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.





  • web safe fonts : sets of font families where most operating systems will be able to render it correctly.

  • font-embedding : https://fonts.google.com/

  • cursive : hand written
  • fantasy : You can image "Avatar" letter style.
  • sen-serif, serif : Variable to each letter.
  • monospace : All letters have same space.
  • font-family : verdana, sans-serif -> Use verdana in sans-serif fonts

Did you find this article valuable?

Support Junho Dev Blog by becoming a sponsor. Any amount is appreciated!