TIL: CSS Basics

위코드 사전스터디 1주차 자기소개 페이지 만들기를 위한 CSS 공부

CSS is for styling

Inline vs Internal vs External CSS

-Inline: located in html tags, inside the body tag

-Internal: a better way to apply a particular elements all at once across all webpage. by using < style> < /style>

-External: to have single location(folder) where changing the code gets reflected across all the pages

by adding tag below to all your pages, style gets refelcted
you don't need < style> tag anymore

<link rel="stylesheet" href="css/style.css">

file hirearchy is important. /root (later on when JS)

Properties

h1      { color:    red;
}

selctor { property: value; }

Best practice: put your "properties" in alphabetical order

Selectors

1. Tag selector

name{ }

2. Class selector

.name {}
-Class is used to group, behave the similar style
-any html can have more than one class, but it can have only one id

<img class="apple" src=" img address">

*/css/*

.apple {
	background-color: red;
}

 <img class="laptop circular" src="https://" alt="laptop">

-any html elements can have more than one class
-avobe tag has two class names as laptop and circular

3. Id selector

'#' name{}
-pound sign, name and curly bracket
-id only a single one of them on a particular page, unique! Can be used only once

When to use id or class?

• Both used to identify html element that you want to style
• both override tag selectors
• When property is more specific(id, class), it overides the general property
  e.g. name(class) vs passport(id)

Div

-Div is for structure, content division element, split up each boxes separately
-Div doesn't do anything unless you use "CSS" with it

height
width
px or %

You can see the box clearly, by putting distictive colour on your div

Box model

it determines how each html elements show up and lay out on the page

width, height
margin, border, padding

{ border : solid; }
{ border-width : 5px; }
{ border-width : 5px 10px 20px 30px; }

{ padding: 10px; }

{ margin: 10px; }

Display

1. Block (element)

-take up the whole screen by defalut
-but can change the width (flexible)
-can change the display property as inline (but can't change width in this case)
-Blocking any other elements from being on the same line next to it.

< h1>, < p>, < div>, < form>, < ol>

p{
	display: inline;
}

2. Inline (element)

not blocking any other, placing next to each other
Can’t change the width

< span>, < img> , < a> (anchors)

<p>a <span class="pro">pro</span>grammer.</p>

3.Inline-block ***

occupy the same line, and can set the width
versitile! gives best of both worlds of black and inline

p{
	display: inline-block;
}

4.None

display none
gets rid of the element, takes it out of the flow,
when you want to make things appear and disapear

e.g. quiz

p{
	display: none;
    visibility: hidden;

visibility: hidden;
}

Positioning

Rule of Thumb

1. content is everything
2. Order comes from code
3. children sits on top of parents (3 dimentional x,y,z)
   which element will be displayed on the other one

e.g.
< div>
< h1> hi < span> hello /// ('span' is nested inside 'h1')

 div
    	 h1
     		 span
 
    screen towards the viewer 
    parent to children
    top to bottom of the hierarchy 

1. Static

HTML is by default 'static'

2. Relative

-position the element we select relative
to how it would have been positioned had it been static
-adding a margin relative to where it should have been (like a ghost)
-Doesn't affect any others

Coordinates properties (clockwise) : top right bottom left

.red{
	position: relative;
   left: 20px;
}

similar to margin
pushed from the original position

3. Absolute

-positioning the element relative to its parent (like body element)
-adding a margin relative to its parent element
-it affects the flow of your html! (can take it out of its flow)

-much easier moving things around! being relative to 'body'
-parent doesn't need to be body, it can be any other parent element
-combination of relative and absolute,
using container to fine tune the position (like grey square)

4. Fixed

div will be fixed as user scroll through your website.
side bar etc

Centering Elements

1. easitest way

as long as inside parent(this e.g. is body), inline-block

2. using margin 0 auto 0 auto (clockwise)

body {
1. text-align: center;
2. margin: 0 auto 0 auto
}

• text positioning
  -line-height: 2;
  -text-align: center;

float and Clear

1.float: texts wrap around the image
-only use it when really really necessary for text to wrap around the image,
don't use it for positioning as it's likely cause issues.

.img {
float: left;
}

2.clear

Psuedo classes

e.g.
:hover (change the state when mouse over)

img:hover {
		background-color: gold;

Leaving a comment

/ comment /
character * : Asterisk
/forward slash

from Udemy course 'The Complete Python Pro Bootcamp for 2021 by Dr. Angel Yu'