THE MOST IMPORTANT COMPONENTS OF CSS3 NECESSARY TO CREATE A MODERN WEBSITE
THE MOST IMPORTANT COMPONENTS OF CSS3 NECESSARY TO CREATE A MODERN WEBSITE
CSS3 colors units of measure selectors construction of responsive website html5 CSS3
CSS3 COLORS - the most important color determination systems
Hexadecimal notation CSS3
Webmasters usually write colors in hexadecimal notation.
Notation: # 6600FF - in fact it consists of three hexadecimal numbers, here 66, 00 and FF. They determine the amount of red, green and blue respectively. The RGB system works similarly - the final color is what will be created after mixing the components described by numbers.
SYSTEM RGB CSS3
RGB (red, green, blue) notation is used primarily in computer graphics programs and in some printers. The color consists of three numbers representing a percentage (0 - 100 percent) or numerically (0 - 255) the share of each color (red, green and blue). E.g. - text color - white - we will write:
color: rgb (100%, 100%, 100%); or color: rgb (255,255,255);
the RGB extension is RGBA, where the next value is added: the alpha channel, i.e. the level of color transparency. A value of 0 means total transparency and 1 means no transparency (i.e. nothing translates).
color: rgba (255,255,255, .25);
But beware! Older browsers do not support RGBA.
UNITS OF MEASURE CSS3 - the most important size determination systems
CSS3 PIXELS
The oldest and still the most popular size record. Unfortunately, it is not very suitable for responsive websites.
font-size: 12px;
UNIT em CSS3
The em unit is a reference to the basic font size. This means that 1 em corresponds to 100 percent (e.g., the standard font size for a given document).
font-size: 1em;
CSS3 PERCENTAGE VALUES
The best way to create dynamic website grids (although I can do it too). It determines the size of the element contained in a given block, i.e. it is the percentage share of the element in a given block.
font-size: 100%;
margin: 5%;
e.t.c.
BASIC CSS3 SELECTORS
The list of selectors can be found, among others at: https://www.w3schools.com/ for a list of full CSS references.
CSS3: Font
1. Size - selector {font-size: size}
2. Type - selector {font-family: type, type1, type2, ...}
3. Style - selector {font-style: style}
CSS3: Text
1. Color: - selector {color: color}
2. Decoration - selector {text-decoration: decoration}
3. Alignment - selector {text-align: alignment}
CSS3: Background
1. Color - {background-color: color}
2. Picture background - {background-image: url (image path)}
3. Repeat - {background-repeat: repeat}
repeat - background repeat in both directions (default)
repeat-x - background repeat only in the horizontal direction
repeat-y - background repeat only in the vertical direction
no-repeat - no background repeat (will be displayed as a single image)
CSS3: Margins
top right bottom left {margin: size size size size}
Size you must enter a specific value in units of length eg pixels.
CSS3: Internal padding
top right bottom left {padding: size size size size}
The size should be given a specific value in units of length, e.g. pixels.
CSS3: Border
1. Style - the {border-style: style} selector
Style - most commonly used:
hidden - hidden border
dashed -
dotted dashed line
- solid dotted line - solid inset line
- "frame"
outset - "button
2. Border thickness - {border: size} selector
Size should be given a specific value in units of length, e.g. pixels.
3. Border width - selector {border-width: width}
Width - examples:
thin - thin
medium border - medium
thick border - thick border
or a specific value in units of length
4. Border color - the {border-color: color} selector
We substitute the color for the color, e.g. in hexadecimal or in English.