CSS | DIVYA'S BLOG

CSS Introduction :
1. CSS stands for Cascading Style Sheets.
2. CSS is the language for describing the presentation of Web pages. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers.

CSS Syntax :
<style>
P{color:green; background-color:#fff;}
</style>

{ P-selector, color-key(property), green-value }

CSS types :
1. Inline style
2. Internal style
3. External style

1. Inline style :

Ex: <h1 style=”color:blue;”>Hello World</h1>

2. Internal style sheet :

Ex: <head>
h1:{color:alive blue}
.class:{border:1px solid black;}
#id:{text-align:center;}
</head>

3. External style sheet :

Ex: <head>
<link href=”StyleSheet.css” rel=”periodic_stylesheet” type=”text/css”>

</head>

Using Id and class selector to the div element :

Using same class to the multiple elements :

Using multiple classes to multiple elements :

Using anchor tag :

<a class="anchor" href="#" style="margin-left:20px">CSS classes</a>

CSS pseudo classes :

A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it.

1. Link

2. Visited

3. Hover

4. Active

5. focus

pseudo class - hover to the link :

Apply on mouse over for button :

Using pseudo class selector :

To apply focus to the Text box :

Apply different background colors form head, body, and table :

Apply background image for the background of the page :

body{

background-image:url("E:/divya/notebook.jpeg")}

Repeat the background image in x-axis direction :

body{
background-image:url("E:/divya/notebook.jpeg");
background-repeat:repeat-y;

}

Repeat the background image in y-axis direction :

body{

background-image:url("E:/divya/notebook.jpeg");

background-repeat:repeat-y;

}

To apply background color :

To apply TextColor:

Different color methods in CSS :

1. Using Hexdecimal colors :

Ex: h2{color:##46c0f4;}

Ex: h2{color:rgb(0 255 0);}

2. Using RGBA colors :

Ex:

3. Using HSL colors :

HSL stands for Hue, Saturation and Lightness. An HSL color value is specified with hsl(hue, saturation, lightness).

Ex:

4. Using HSLA colors :

Borders : The border-style property specifies what kind of border to display. Ex:

To apply Margins to the div :

To apply Padding to the div :

Padding vs Margin :

Use Different Height and widths for Html elements and from elements :

Apply different font elements to the Font family, Font color, size and weight :

Word-wrap :
The word-wrap property allows long words to be able to be broken and wrap onto the next line.

Using Position:fixed :

Using Position propertys :

Overflow :

The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Difference between scroll and auto overflow :

1. Overflow: Scroll will hide all overflowing content and cause scroll bars to appear on the element in question. If the content does not overflow, the scrollbars will still be visible.

2. Overflow: Auto is very similar, but the scrollbars only appear when the content is overflowing.

Ex: