css basic

- you can write css for a website using either internal or external stylesheet.
- external stylesheet works better because you can apply it on several pages, and
changes on the file will apply on all the pages using it.
- external stylesheet is linked to the html page using link tag
- the link tag is usualy placed ine the head element, though on current browsers it
can be placed in the body tag. but it usually better to type it in the head tag.
- external stylesheet is also better because it is cached in the memory once the
first page opened thus the next one will load faster.
- in html 5 the type attribute for the link tag can be omitted
- you can add as many as link to css files on the html file. If there are any
conflicting rules, the later added will be the one that apply.

///AT RULES// source:https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

CSS at-rules are the rules that specify how the css should behave. They starts with
@ and ends with ;. They are:

//@charset----------------------------------------------------
- Specifies what the character set the style sheet should use.
- This rule MUST be the first rule on the stylesheet and should not be preceded by
any other character, as it is not a nested at-rules.
- This rule also can't be used in conditional group at-rules.
- This rule is only for external style sheet.
syntax:

@charset "utf-8"; //note that it must use double quotes and only ONE space
preceding the first quote!

//@import------------------------------------------------------

is used to import style rule from other css file. syntax:

a. inline css:
<style>
@import url('path');
</style>

b. external css file:

@import 'path/to/file.css';
@import url("path");
@import url('path') print/screen/all and (orientation:landscape);

- However this rule MUST precede any other rules in the file, except the @charset
rule.
- You can add multiple css files using @import
- You can use media dependent import rules.

///NESTED AT-RULES:
//@media ------------------------------------------------------

-a conditional group rule that apply its content if the device meets the criteria
of the media query

---media queries---
is used to apply rules depending on the device's general type (print/screen)
or/and several media characteristic/feature (resolution/viewport).

is used on:
-@media and @import rules
-media attributes on html elements like <style>, <link>, etc
-To test and monitor media states using the Window.matchMedia() and
MediaQueryList.addListener() JavaScript methods.

-multiple queries can be combined using logical operator "and,not,only,

comma(,)" -- NOT and ONLY -> REQUIRES media type. Comma (,) is used to combine
several queries as a list of query and if one of them returns true then the list
returns true.
-is case insensitive

Media Type:
all
print
screen
speech

Media types can be added in link tags for css files using media property.

Media Features (not all):

display-mode : the display mode of the application, values:fullscreen,
standalone, minimal-gui, browser
height : height of the viewport, values: in px,rem and can use min- or
max-
width : width of the viewport including the scrollbar, values: just
like the height
orientation: orientation of the viewport, values: portrait or landscape
resolution: pixel density of theoutput device, values: in dpi,
dppx(96dpi) can use min- or max-
scripting: detect if scripting, like JS, is enabled. values: none,
initial-only, or enabled
color
monochrome
hover
--some media features has range values thus can be preceded with min-
and max-
--media features must present in parentheses and the feature-value pair
is separated by colon.

Logical:
not, only, comma

example:
@media screen(min-width:360px)and(orientation:portrait){
div{...}
}
 How to use:
1. As separate css and used in link tag in media property
2. As separate css and using @import: @import url(...) screen and ,,,,,,,
3. All queries in the main css file

//@namespace
@namespace is an at-rule that defines XML namespaces to be used in a CSS style
sheet. The defined namespaces can be used to restrict the universal, type, and
attribute selectors to only select elements within that namespace. The @namespace
rule is generally only useful when dealing with documents containing multiple
namespaces—such as HTML5 with inline SVG or MathML, or XML that mixes multiple
vocabularies.

//@support---------------------------------
- apply some rules if the browser meets some criteria (CSS features)
- example:
@support (display:grid){...}

or using function selector(): //experimantal

@suport selector(a > b){...}

-this at-rule support conditional operators

//@document //experimental-----------------------------------

//@page------------------------------------------------------
Specify css applied to a document when being printed, but limited only to:
-margins
-orphans
-page breaks

-examples:
@page{
margin:1cm;
}
@page:first{
margin:2cm;
size:A4;
}
-descriptors:
size: auto/portrait/landscape ; -> scalable size //this
A4/A5/letter/B5/legal ->height=width //is
1in 6in ->width then height
//experi-
A4 portrait ->mixing values
//mental
marks //experimental
bleed //experimental
-pseudo class supported:
-first
-left
-right
-blank

//@font-face--------------------------------------------------
example:
@font-face{
 font-family:example;
local("example");
src:url("example.ttf");
src:url("example.woff");
}

//@keyframes--------------------------------------------------
syntax:
@keyframes name{
from{...}
to{...}
------or-----
percentage
}

//@viewport //experimental------------------------------------

//@counter-style //still in recommendation stage--------------

//@font-feature-values //still inrecommendation stage---------

===================================================================================
===================================================================

///GRADIENT///
- new in CSS3.
- can be used as value of background-image
- there are two basic gradients: radial and linear, both with varians:
linear-gradient
repeating-linear-gradient
radial-gradient
repeating-radial-gradient

- syntax: linear-gradient(<direction>,<color stop list separated in commas>);

- example:
linear-gradient(to right, white, red);

direction can be: to top/down/left/right or "to left top" or deg or rad or

grad or turn.

radial-gradient(circle,closest-side at 55% 60%,red,blue 90%);

-- shape can be either circle or ellipse

-- how far the shape ends:
closest-side/farthest-side/closest-corner/farthest-corner
-- center of shape: percentage/ top left / px

===================================================================================
====================================================================
///ANIMATION RELATED EVENT FOR JS///
- animationstart
- animationend
- animationiteration
- transitionend

///LAYOUT///
Type of layouts:
- fixed -> uses px.
- elastic -> uses em or rem
- fluid -> uses %
tips:
- use reset.css
- use fluid layout
- use media query to set breakpoints
- use different images for different density
- to make the collumns having the same heights, use js
- use max-width and min-width for text containers
- to make inline images scales up to max size when resizes, use max-width:100%
- to make a scalable background image, use a div with no content but with a
background property refers to an image. Dont forget to add padding bottom.
ex:
.img{
background: url("abc.jpg") 0 0 no-repeat;
width:100%;
position:absolute;
z-index:-1;
padding-bottom: 75%;
background-size: 100% 100%;
}
- think about wrapping content
- think about spacing: use percentage for elements width and em for element padding
- use border-box for box-sizing

steps:
- make html structure from outside in as follows:
wrapper
row
cols
/row
/wrapper
- one row span is span1, number increases as spans added
- gutter is achieved using padding with box sizing set to border-box
- row::after is for clearing the bottom of the cols
- use media query to set different settings based on the screen width