There are three ways to inserting a style sheet :
1. Inline style sheet
2. Internal style sheet
3. External style sheet
Inline style sheets:
These are three ways to insert a style sheet.
Inline style sheet: It is a style to single element to use inline styles used to apply unique
add style attribute to relevant element - The style attribute contains any css property.
Internal style sheet:
An internal style sheet may be used if one single HTML page has a unique style. It is
defined inside the <style> element inside the head section.
External style sheet:
By using an external sheet you can change the look of an entire website by changing just
one file.
Each HTML Page must include a reference to an external style sheet file inside the
<link> element, inside head section.
CSS syntax:
hi { color: blue; font-size:12px; }
Selectors:
1. Element selector: This selector selects HTML elements directly based on element
name.
Syntax:
element {
/* css properties */
2. ID selector: This selector selects HTML elements using id attribute.
Syntax:
#elementID {
/* css properties */
3. Grouping selector: This selector selects HTML Page elements in a group.
Syntax:
element1, element2 {
/* css properties */
4. Class selector: This selector selects HTML elements using class attribute.
Syntax:
.class {
/* css properties */
5. Universal selector: This selector selects all the HTML elements in a page.
Syntax:
*{
/* css properties */
Color Properties:
Attribute:
color: sets foreground color of text of an HTML element.
background-color: sets background color of an HTML element.
value: auto or cover or contain.
background-attachment: controls scrolling of background image.
Syntax: background-attachment: value;
Values: scroll or fixed
background: combines all background properties in one declaration.
Syntax: background: color image repeat attachment position(size);
Border Properties:
Attributes:
border-style: sets type of border is displayed.
Syntax: border-style: value;
Values: dotted, dashed, solid, double, none
border-width: It sets the width of four borders.
Syntax: border-width: value;
Values: thin, medium, thick
border-color: It sets color in four borders.
Syntax: border-color: value;
border: It sets all properties at once.
Background Properties:
Attributes:
background-color: Element's background color.
background-image: Sets an image as the background.
background-repeat: Repeats the background image.
Values: repeat-x, repeat-y, repeat (default), no-repeat
background-size: Defines the size of the background image.
background-position: Position of the background image.
Values: left, right, center, top, bottom
Padding Properties:
padding-top: Gives space between content and its top border.
padding-bottom: Gives space between content and its bottom border.
padding-right: Gives space between its right border and content.
padding-left: Gives space between content and its left border.
padding: Gives space between content and borders of four sides.
Margin Properties:
margin-top: Gives space between element and its top side surrounding content.
margin-bottom: Gives space between element and its bottom side surrounding content.
margin-right: Gives space between element and its right side surrounding content.
margin-left: Gives space between element and its left side surrounding content.
margin: It gives space between elements and all its surrounding content.
Position Property:
Position property is used to define the position of HTML elements in a webpage.
Syntax: position: value;
Values: static, relative, absolute, fixed, sticky.
