Note: CSS

CSS is a short-cut of cascading style sheet. It can transform HTML into a beautiful web page we see in our daily life.

CSS selector:

The usage of CSS is more like declare some attribution on the element in HTML. Therefore, we need a method to select and recognize the HTML element. In general, we can select it by declaring the tag, .class and #id.
If there is any possible conflict, the more precise one will have higher priority.

# To link CSS and HTML together, add a link tag with the CSS’s file name in the head part.
# Multiple CSS may conflict each other as well, the lastest has the highest priority.

Common function:

font-size : Set the size of the text.
# Has several unit, such as px (absolute), em/%( percentage change of upper layer), rem(percentage change of the top layer[ html]).
# For the convenient issue of operating on different devices, prefer to use relative size.

width: Set wide of the block.
height: Set height of the block
# Unit can be px, % and auto (let the system decide).

font-family: Set the type of the text.
font-weight: Set the text to be normal/bold

text-align: Align the text, including the following option: left(default), right, center, justify

color: Set the text’s color.
background-color: Set the background color.
# For parameter input for color, it can be text related to default color(EX: red, white), color code(#ff0000), combination of color (rgb(255,0,0)).
# Better use some assistant technology to support you to recognize color code.

Box-Model:

In a box model, a brack of content can be view as a box surround by the border. The area inside the box is padding, outside is margin.

margin: Set the size of each margin surrounded the box. You can specifically set the particular direction margin, or set all in a one-line code : margin: px, px, px, px. The order of each px is clockwise direction from the top.

border: Set the detailed style of the border- border: width, color, style.

padding: Set the range between content and border.

box-sizing:border-box — This command can set the box size equal to the width setting. Otherwise, the box’s size will actually equal to width+padding+border.

border-radius: Modify the corner of the box and maker it smooth. The degree depends on the px entered.
# If the px entered are half of the width or height, then you can modify the square box to a circle box.

Block and inline

Element in HTML can be split into either block or inline.

#Block element will occupy the whole row, any other element would not show in the same row.

#Inline instead is the element can be shown with other inline elements in the same row. Inline element only represents the range its text included, so it does not have width and height attribution.

#To transform an inline element into a block, just setting display: block. There is also another inline-block type you can set here. It has the attribution between those two types, it won’t occupy the row but can represent a range depended on width and height.

Useful Assistant Technology

SCSS/SASS:

A program makes CSS easier to write and arrange. For example, with SCSS you can sort the different code in the same bracket if they are from the same section. It is also possible to add the variable as well.

Therefore, it is recommended to code in SCSS and then translate into CSS by the program. It is possible to translate automatically during coding, so it would not affect the work too much.

FlexBox:

A program provides an easier way to build the layout. Most internet explorers allow this to work except some old version. It can be set at the display function by doing “display: flex”.

In the flexbox, all block are aligned in a row. There is a lot of methods to control the way and direction the block display.

Bootstrap:

A tool can provide a set of default style for HTML element. Bootstrap does not implement in CSS, but the class of HTML element. It provides a faster and efficiently programming option and can create a not bad view in a short time. This is very useful for the one just want a glance of what he has done, particularly for the backend developer.

# Require additional practice and knowledge, and it might let the HTML data look messy because it is written in the class of the element.

RWD:

Short-cut of responsive web development. It is applied to solve the problem that a website might need different appearance in different devices or different image resolution.

To apply RWD, create another CSS and write the different image resolution condition and the matching CSS setting in the @media bracket.