There are different ways to connect styles with your HTML document. The most regularly utilized strategies are inline CSS and External CSS. 

Embedded CSS - The <style> Element 

You can put your CSS rules into a HTML report utilizing the <style> component. This tag is put inside the head opening and closing tags. Rules characterized utilizing this syntax will be applied to every one of the components accessible in the record. Here is the conventional syntax –

Attributes 

Attributes related with <style> components are − 

Inline CSS - The style Attribute 

You can utilize the style property of any HTML component to characterize style rules. These principles will be applied to that component as it were. Here is the conventional syntax −

Attributes 

External CSS - The <link> Element

The <link> component can be utilized to incorporate an outer template record in your HTML document. An external style sheet is a different text record with a .css extension. You characterize all the Style rules inside this text record and afterward, you can remember this record for any HTML report utilizing <link> element. Here is the nonexclusive syntax structure of including outer CSS document −

Attributes 

CSS - Measurement Units

CSS upholds various estimations including outright units, for example, inches, centimeters, focuses, etc, just as relative measures like rates and em units. You need these qualities while determining different estimations in your Style rules for example line = "1px strong blue". We have explained below every one of the CSS Measurement Units alongside appropriate Examples − 

CSS - Colors

The <color> CSS information type addresses a shading. A <color> may likewise incorporate alpha-channel straightforwardness esteem, demonstrating how the color should composite with its experience. A <color> can be characterized in any of the accompanying ways: 

• Utilizing a keyword (like blue or straightforward). All current keywords determine a shading in the sRGB color space. 
• Utilizing the RGB cubic-arrange framework (employing the #-hexadecimal or the rgb() and rgba() useful documentation). These consistently indicate color in the sRGB color space 
• Utilizing the HSL cylindrical-shaped arrange framework (through the hsl() and hsla() utilitarian documentations). These consistently determine color in the sRGB color space 
• Utilizing the LCH cylindrical-shaped organize framework, employing the lch() utilitarian documentation. This can indicate any apparent color. 
• Utilizing the Lab arrange framework, through the lab() useful documentation. This can indicate any apparent color. 
• Utilizing the color () practical documentation, to determine a shading in an assortment of predefined or custom color spaces.

Syntax:

The <color> information type is indicated utilizing one of the choices mentioned underneath. 

Color keywords

Color keywords are case-heartless identifiers that address a particular tone, like red, blue, dark, or lightseagreen. Albeit the names pretty much portrays their separate colors, they are counterfeit, without severe reasoning behind the names utilized. 

There are a couple of admonitions to think about when utilizing Color keywords: 

HTML just perceives the 16 fundamental Color keywords found in CSS1, utilizing a particular algorithm to change over unnoticed qualities (regularly to totally various colors). The other Color keywords ought to just be utilized in CSS and SVG. 

Not at all like HTML, CSS will overlook obscure keywords. 

The Color keywords all address plain, strong tones, without straightforwardness. 

A few keywords are pseudonyms for one another: 

• aqua/cyan 
• fuchsia/maroon 
• darkgray/darkgrey 
• darkslategray/darkslategrey 
• dimgray/dimgrey 
• lightgray/lightgrey 
• lightslategray/lightslategrey 
• dark/dim 
• slategray/slategrey 

However numerous keywords have been adjusted from X11, their RGB esteems might contrast from the comparing tone on X11 frameworks since makers some of the time tailor X11 tones to their particular equipment. 

transparent keyword 

The transparent keyword addresses a completely transparent coloring. This makes the color behind the hued thing apparent. In fact, transparent is an alternate route for rgba(0,0,0,0). 

currentColor keyword 

The currentColor keyword addresses the worth of a component's coloring property. This allows you to utilize the color esteem on properties that don't get it of course. 

In case currentColor is utilized as the worth of the shading property, it rather takes its worth from the acquired worth of the coloring property. 

RGB colors 

The RGB color model characterizes a given tone in the sRGB color space as indicated by its red, green, and blue parts. A discretionary alpha part addresses the color's transparency. 

Syntax:

RGB tones can be communicated through both hexadecimal (prefixed with #) and utilitarian (rgb(), rgba()) documentations. 

Hexadecimal notation: #RRGGBB[AA] 

R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0–9, A–F). An is discretionary. For instance, #ff0000 is identical to #ff0000ff. 

Hexadecimal notation: #RGB[A] 

R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0–9, A–F). An is discretionary. The three-digit documentation (#RGB) is a more limited variant of the six-digit structure (#RRGGBB). For instance, #f09 is a similar shading as #ff0099. In like manner, the four-digit RGB documentation (#RGBA) is a more limited rendition of the eight-digit structure (#RRGGBBAA). For instance, #0f38 is a similar shading as #00ff3388. 

Functional notation: rgb[a](R, G, B[, A]) 

R (red), G (green), and B (blue) can be either <number>s or <percentage>s, where the number 255 relates to 100%. A (alpha) can be a <number> somewhere in the range of 0 and 1, or a <percentage>, where the number 1 relates to 100% (full obscurity). 

Functional notation: rgb[a](R G B[/A]) 

CSS Colors Level 4 adds support for space-isolated qualities in the utilitarian documentation. 

HSL Colors 

The HSL coloring model characterizes a given tone in the sRGB shading space as per its tint, immersion, and daintiness parts. A discretionary alpha part addresses the color's straightforwardness. 

Numerous designers discover HSL more instinctive than RGB, since it permits tone, immersion, and gentility to each be changed autonomously. HSL can likewise make it simpler to make a bunch of coordinating with colors, (for example, when you need different shades of a solitary tone). Nonetheless, utilizing HSL to make shading varieties can create amazing outcomes, as it isn't perceptually uniform. For instance, both hsl(240 100% half) and hsl(60 100% half) have a similar gentility, even though the previous is a lot more obscure than the last mentioned. 

Syntax:

HSL tones are communicated through the utilitarian hsl() and hsla() documentations. 

Functional notation: hsl[a](H, S, L[, A]) 

H (hue) is an <angle> of the shading circle given in degs, rads, graduates, or turns in CSS Color Module Level 4. When composed as a unitless <number>, it is deciphered as degrees, as determined in CSS Color Module Level 3. By definition, red=0deg=360deg, with different colorings spread around the circle, so green=120deg, blue=240deg, and so forth. As a <angle>, it verifiably folds over with the end goal that - 120deg=240deg, 480deg=120deg, - 1turn=1turn, and so forth 

S (saturation) and L (lightness) rate. 100% saturation is soaked, while 0% is unsaturated (dark). 100% lightness is white, 0% lightness is dark, and half gentility is "ordinary." 

A (alpha) can be a <number> somewhere in the range of 0 and 1, or a <percentage>, where the number 1 relates to 100% (full opacity). 

Functional notation: hsl[a](H S L[/A]) 

CSS Colors Level 4 adds support for space-isolated qualities in the utilitarian documentation. 

System Colors 

In constrained colors mode (noticeable with the constrained tones media inquiry), most tones are limited into a client and program characterized range. These system colors are uncovered by the accompanying keywords, which can be utilized to guarantee that the remainder of the page coordinates well with the limited range. These qualities may likewise be utilized in different settings, however, are not generally upheld by programs.