ife2018 Zero Foundation Academy day 3

Day 3 of ife2018 Zero Foundation Academy: Make your resume a little colorful

What is CSS and how does CSS work!

Taken from How CSS Works

what is css

CSS is a language used to specify to the user how documents are rendered—how they are styled, laid out, and so on.
Documents are usually text files structured in a markup language - HTML is the most commonly used markup language, but you can still encounter some other markup languages ​​such as SVG or XML.

How CSS Works

When a browser displays a document, it must combine the content of the document with its style information. It processes documents in two stages:

1. Browsers convert HTML and CSS into DOM (Document Object Model). DOM represents documents in computer memory. It combines document content with its styling.
2. The browser displays the contents of the DOM.
   

What is the basic syntax of CSS

Taken from CSS Syntax

Properties and values ​​form a declaration, multiple declarations form a declaration block, and declaration blocks and selectors form a complete CSS rule

At its most basic level, CSS is composed of two pieces of content:

• Properties : Some human-readable identifiers that indicate which styles you want to modify, such as: font, width, background color, etc.
• Property value (Value) : Each specified property needs to be given a value, this value indicates what you want to modify those style characteristics to, for example, what do you want to change the font, width or background color to.
  Properties paired with values ​​are called CSS declarations . CSS declarations are placed in a CSS declaration block. Finally, CSS declaration blocks are combined with selectors to form a CSS ruleset (or CSS rules).

CSS declaration

Attributes and attribute values ​​are separated by a colon (:), as shown in the following figure.

CSS declaration block

Declarations are grouped in blocks , with each group of declarations enclosed in a pair of curly braces, {beginning with ( }) and ending with ( ).
Each declaration in a declaration block must be separated by a semicolon ( ;), otherwise the code will not work (at least not as expected). There is no need to add a semicolon at the end of the last declaration in the declaration block, but it is a good practice to add a semicolon at the end, because it can prevent you from forgetting to add a semicolon when adding subsequent declarations.

CSS selectors and rules

There's one more piece missing from the puzzle - we need to discuss how to tell our declaration blocks which elements they need to apply. This is done by preceding each declaration block with a selector, which is a pattern that matches some element on the page. This will cause the associated declaration to be applied only to the selected element. A selector plus a declaration block is called a ruleset > (ruleset), usually abbreviated as a rule.

What is the concept of CSS selectors, what are simple selectors and attribute selectors

What is the concept of CSS selectors

From the CSS Selectors Reference Manual

In CSS, a selector is a pattern used to select elements that need to be styled.

Taken from CSS Syntax - CSS Selectors and Rules

A selector is a pattern that matches some elements on the page. A selector plus a declaration block is called a ruleset , usually abbreviated as a rule .

What is a simple selector

Taken from Simple Selector

Simple selectors : Match one or more elements by element type, class or id.

What is an attribute selector

Taken from attribute selector

Attribute selectors : Match one or more elements by attribute/attribute value.

What are the related properties of text styles and what values ​​do they correspond to?

Referenced from Basic Text and Font Styles

CSS properties used to style text can generally be divided into two categories.

• Font style : Attributes that act on the font, which will be applied directly to the text, such as which font to use, what the font size is, whether the font is bold or italic, and so on.
• Text layout style : Properties that act on the spacing of text and other layout features, such as allowing manipulation of the space between lines and words, and how text is aligned within a content box.

font

colour

Reference
CSS Values ​​and Units - Color HTML Color
<color>

The color property sets the color of the foreground content of the selected element

The ways to describe the color value are color name (color keyword), Color HEX (RBG hexadecimal number, such as #000000 corresponds to black), Color RGB(rgb(0,0,0))

color keyword

Color keywords are case-insensitive identifiers that represent a specific color, eg red, blue, brown, lightseagreen.

rgb()

Colors can be defined in two ways using the red-green-blue (RGB) pattern:
hexadecimal notation #RRGGBB and #RGB

• " #" followed by 6 hexadecimal characters (0-9, AF)

• " #" followed by 3 hexadecimal characters (0-9, AF).
  The three-digit RGB symbol (#RGB) and the six-digit form (#RRGGBB) are equivalent.
  For example, #f03 and #ff0033 represent the same color.
  The function operator rgb(R,G,B)
  " rgb" followed by 3 <integer>or 3 <percentage>values .
  The integer 255 is equivalent to 100%, and F or FF in hexadecimal notation.

  /* These examples all specify the same RGB color: */
  #f03
  #F03
  #ff0033
  #FF0033
  rgb(255,0,51)
  rgb(255, 0, 51)
  rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
  rgb(100%,0%,20%)
  rgb(100%, 0%, 20%)
  rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

hsl()

Colors can also be defined in Hue-saturation-lightness mode using the hsl() function operator. The advantage of HSL over RGB is that it is more intuitive: you can estimate
the color you want, and then fine-tune it. It's also easier to create commensurate color sets. (by keeping the same hue and changing the lightness/darkness and saturation).

Hue represents an angle of the color wheel (that is, a circle representing the rainbow). This angle <number>is . Define red=0=360, other colors are scattered in the ring, so green=120, blue=240, and so on. As an angle, it implies loopbacks like -120=240 and 480=120.

Saturation and lightness are expressed as percentages.
100%is full saturation , but 0%is a grayscale.
100%Lightness is white, 0%lightness is black, and 50%lightness is "normal".

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */ 

rgba ()

Colors can be defined in red-green-blue-alpha (RGBa) mode using the rgba() operator. RGBa extends the RGB color model, which includes an alpha channel that allows setting the transparency of a color.
** a ** means transparency: 0=transparent; 1=opaque;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

hsla ()

Colors can be defined in Hue-Saturation-Lightness-Alpha (HSLa) mode using the hsla() function operator. HSLa extends the HSL color model and includes an alpha channel that specifies the transparency of a color.
a represents transparency: 0=transparent; 1=opaque;

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */ 

font type

To set a different font on your text, you can use the font-family property, this allows you to specify a font (or a list of fonts) for the browser, which can then apply that font to selected elements superior.

p {
  font-family: arial;
}

Font stack : Since you can't guarantee the availability of the fonts you want to use on your web page (even a web font might be wrong for some reason), you can provide a font stack so that the browser can There are several fonts to choose from.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

font size

• px(pixels): Assign the value of pixels to your text. This is an absolute unit that results in the same pixel value being calculated for text on the page in all cases.
• em: 1em is equal to the font size set on the parent element of the current element we design
• rem: This unit has the emsame , except that 1 remis equal to the font size of the root element in HTML, (ie <html>) , not the parent element.

Font styles, font weights, text transitions and text decorations

CSS provides 4 commonly used properties to change the appearance of text:

• font-style: Used to turn text italic (italic) on and off.
• normal: set text to normal font (turn off existing italics)
• italic: If the italic version of the current font is available, the text is set to the italic version; if not, the obliquestate is used to simulate italics.
• oblique: Sets the text to an emulated version of italic font, that is, applies the italic style of normal text to the text.
• font-weight: Set the bold size of the text.
• normal, bold: normal or bold font weight
• lighter, bolder: Make the current element's bold one step thinner or thicker than its parent's. 100– 900: Numerical bold value, if desired, provides finer granular control than the above keywords.
• text-transform: allows you to set the font to convert. Values ​​include:
• none: prevent any casts.
• uppercase: Convert all text to uppercase.
• lowercase: Convert all text to lowercase.
• capitalize: Convert all words to uppercase.
• full-width: Converts all glyphs to fixed-width squares, similar to monospaced fonts, allowing alignment. Latin characters as well as Asian language glyphs (eg Chinese, Japanese, Korean)
• text-decoration: Set/unset text decorations on fonts (You will mostly use this method to unset the default underline on links when setting links.) Available values ​​are:
• none: Cancels any text decorations that already exist.
• underline: Text underline.
• overline: underline text
• line-through: line through the text

text shadow

You can apply a shadow to your text using the text-shadow property. This requires up to 4 values, as shown in the example below: The
text-shadow: 4px 4px 5px red;
4 properties are as follows:

1. The horizontal offset of the shadow from the original text can use most CSS units of length and size units , but px is more appropriate. This value must be specified.
2. Vertical offset of the shadow from the original text; the effect is basically like a horizontal offset, except it moves the shadow up/down instead of left/right. This value must be specified.
3. Blur Radius - Higher values ​​mean the shadows are spread out more widely. If this value is not included, it defaults to 0, which means no blur. Most CSS units length and size units can be used
4. The base color for shadows. Can use most CSS color units. If not specified, it defaults to black.

text layout

text alignment

text-alignProperties are used to control how the text is aligned with the content box it is in.

• left: Left-align text.
• right: Right-aligns the text.
• center: center text
• justify: Expands the text, changing the gap between words so that all lines of text are the same width.

row height

line-heightThe property sets the height between lines of text. Most length and size units are acceptable , but a unitless value can also be set as a multiplier, which is usually a good practice. Unitless values ​​are multiplied by font-size to obtain line-height. Body text usually looks better and easier to read when there is space between lines. The recommended line height is about 1.5–2 (double spaced.) So to set our text line height to 1.5 times the font height, you can use this:
line-height: 1.5;

Letter and word spacing

The letter-spacing and word-spacing properties allow you to set the letter-to-letter spacing, or the word-to-word spacing, in your text.
They can accept most length and size units

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}