Css
Css
Why CSS?
CSS saves a lot of t ime and work.
Using CSS we can apply write once use many t imes approache.
We can easily change the style of multiple elements by changing the style in the
stylesheet.
We can create s ingle style sheet and can use on multiple HTML documents.
I t i s used to design the layout of HTML document.
Types o f CSS
There are mainly three types of CSS, Inline CSS, Internal CSS and External CSS.
Inline CSS written in the opening tag in HTML by using style attribute and we can
write our CSS for every element of HTML.
Internal CSS is written in the head tag of HTML by using style tag. This
stylesheet i s included in the HTML f i l e.
External CSS is written in the external file with . css extension. And this i s
almost the same as Internal CSS but this is a different CSS f i l e.
Different font-properties
[font-style ,font-variant ,font-weight ,font-size/line-height ,font-family]
Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand.
Using a font that is easy to read is important. The font adds value to your text.
It is also important to choose the correct color and text size for the font.
font- family
font- family property is used to specify the font of a text.
In CSS there are five generic font families:
Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern
and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.
font- size
font- s i ze property i s used to specify the s i ze of text.
Being able to manage the text size is important in web design. However, you should
not use font size adjustments to make paragraphs look like headings, or headings
look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.
font- weight
font- weight property set, how bold or thin character in the text should be
displayed.
font-weight property values are bold , normal , thin ,300 ,800 ,500 etc..
line- height
The l ine- height property specifies the space between the fonts.
font-style
Font Variant:
The font-variant property specifies whether or not a text should be displayed in a
small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters.
However, the converted uppercase letters appears in a smaller font size than the
original uppercase letters in the text.
Small-caps
normal
Background- color
This property i s used to set the background- color on the text.
Text- align & text-align-last
text- al ign property i s used to set the alignment of a text. We can al ign a text
in l eft, r ight, center, and justify.
The text-align-last property specifies how to align the last line of a text.
Text- transform
text- transform property i s used to specify uppercase and lowercase, and
capitalize letters in a text.
Text- decoration
text- decoration properties are used to decorate text in one declaration
Text-decoration-line : property is used to add a decoration line to text
Text-decoration-color : property is used to set the color of the decoration line.
Text-decoration-style :property is used to set the style of the decoration line.
Text-decoration-thickness:property is used to set the thickness of the decoration
line.
Text-decoration:The text-decoration property is a shorthand property for:
text-decoration-line (required)text- decoration-color (optional text-decoration-
style (optional) text-decoration-thickness (optional)
Word- spacing
word- spacing property i s used to specify the space between the words in a text.
Text- shadow
text- shadow property i s used to add the the shadow effect to the text
colors:
As the name defines colors are used to set the colors on the text.
In CSS basically, we can set colors in four types of value: color by name, color by
RGB and RGBA value, and color by HEX value & HSL & HSLA colors
Color by name:
In this CSS color property, we will use the color name to set color on the text.
In this we can use predefined color names like: red, green, blue, purple, orange,
etc.
RGBA color values are an extension of RGB color values with an alpha channel -
which specifies the opacity for a color.
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
Color by HEX
In this color property, we will use HEX value to set the color.
HEX defines the hexadecimal value of the color and we can set using # r rggbb or #
000000 .
In rrggbb, rr for Red, gg for green and bb for blue. OR we can also use these
values f rom 0 to 255 .
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the
form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240
is blue.
Saturation is a percentage value. 0% means a shade of gray, and 100% is the full
color.
Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is
white