Scribd
Upload
2 views

CSS_Stylesheet_Formatted

The document outlines three methods for inserting style sheets in HTML: inline, internal, and external. It also describes various CSS selectors, color, border, background, padding, margin properties, and the position property, providing syntax and values for each. This information is essential for styling web pages effectively.

Uploaded by

g.suryaprakashyadav
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSS_Stylesheet_Formatted

The document outlines three methods for inserting style sheets in HTML: inline, internal, and external. It also describes various CSS selectors, color, border, background, padding, margin properties, and the position property, providing syntax and values for each. This information is essential for styling web pages effectively.

Uploaded by

g.suryaprakashyadav
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like