Introduction To CSS: Element Selector

CSS
Introduction to CSS
 CSS stands for Cascading Style Sheet.

 Style defines how to display HTML document.
 Styles are stored in stylesheets.
 CSS has a file extension .css
Whay is Stylesheet?
Stylesheet is a collection of formatting styles which can be applied to a web page.
The stylesheet consists of the component style rule.
A style rule is a set of HTML tags specified for the formatting element.
A style rule can be divided into two parts : selector and declarator.
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces.
CSS selector
CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.
Element Selector
The element selector selects elements based on the element name.

Id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of
the class.
Types of stylesheets
External Style Sheet :
With an external style sheet, you can change the look of an entire website by changing just
one file!
Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:
An external style sheet can be written in any text editor. The file should not contain any
html tags. The style sheet file must be saved with a .css extension.
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, border-
width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0,
the unit can be omitted.
For some CSS properties, negative lengths are allowed.
Unit Description
% Percentage
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
Relative to the font-size of the element (2em means 2 times the size of the
Em
current font)
Ex Relative to the x-height of the current font (rarely used)
CSS background
CSS background property defines the background effects on any document.
1. Background-color : The background-color property specifies the background color of an
element.
Syntax : background-color: { colorname | #RRGGBB | rgb(value1,value2,value3)}
2. Background-image : The background-image property sets one or more background

images for an element.
The background of an element is the total size of the element, including padding and
border (but not the margin).
By default, a background-image is placed at the top-left corner of an element, and

repeated both vertically and horizontally.
Syntax : background-image : url(filename)
3. Background-repeat : The background-repeat property sets if/how a background image

will be repeated.
By default, a background-image is repeated both vertically and horizontally.
Syntax : background-repeat: {repeat | repeat-x | repeat-y | no-repeat }
4. Background-position : The background-position property sets the starting position of a

background image. By default, a background-image is placed at the top-left corner of an
element, and repeated both vertically and horizontally.
Syntax : background-position : {left top | left center | left bottom | right top | right
center | right bottom | center top | center center |center bottom | x% y% | xpos ypos }
5. Background-attachment : The background-attachment property sets whether a

background image is fixed or scrolls with the rest of the page.
Syntax : background-attachment : { scroll | fixed }
6. Background : The background shorthand property sets all the background properties in
one declaration.
The properties that can be set, are: background-color, background-image, background-

position, background-size, background-repeat, background-origin, background-clip, and
background-attachment.
It does not matter if one of the values above are missing
Syntax : background: background-color background-image position/background-size

background-repeat background-origin background-clip background-attachment
CSS text
CSS text property allows you to control the appearance of the text.
1. Color : The color property is used to set the color of the text.
Syntax : color : { colorname | #RRGGBB | rgb(value1,value2,value3)}
2. Word-spacing : The word-spacing property increases or decreases the white space

between words. Negative values are allowed.
Syntax : word-spacing : length
3. Letter-spacing : The letter-spacing property increases or decreases the space between
characters in a text.
Syntax : letter-spacing : length
4. Text-decoration : The text-decoration property specifies the decoration added to text.

Syntax : text-decoration: { none | underline | overline | line-through | blink}
5. Text-align : The text-align property specifies the horizontal alignment of text in an

element.
Syntax : text-align : { left | right | center | justify}
6. Vertical-align : The vertical-align property sets the vertical alignment of an element.

Syntax : vertical-align: { length | sub | super | top | text-top | middle | bottom | text-
bottom }
7. Text-transform : The text-transform property controls the capitalization of text.

Syntax: text-transform: {none | capitalize | uppercase | lowercase}
8. Text-indent : The text-indent property specifies the indentation of the first line in a text-
block. Negative values are allowed. The first line will be indented to the left if the value is
negative.
Syntax : text-indent: {length}
9. Line-height : The line-height property specifies the line height. Negative values are not
allowed.
Syntax : line-height : {normal | length }
CSS font
The CSS font properties define the font family, boldness, size, and the style of a text.
1. Font-family : The name of a text is set with the font-family property. If the name of a font
family is more than one word, it must be in quotation marks, like: "Times New Roman".
Syntax : font-family : fontname
2. Font-style : The font-style property is mostly used to specify italic text.

Syntax : font-style : { normal | italic | oblique }
3. 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.
Syntax : font-variant : { normal | small-caps}

4. Font-size : The font-size property sets the size of the text.
Syntax : font-size: { medium|xx-small|x-small|small|large|x-large|xx-large | length }
5. Font-weight: The font-weight property sets how thick or thin characters in text should be
displayed
Syntax : font-weight: {normal|bold|bolder|lighter|light |100 – 900 }
6. Font : The font shorthand property sets all the font properties in one declaration.
The properties that can be set, are (in order): "font-style font-variant font-weight font-
size/line-height font-family"
The font-size and font-family values are required. If one of the other values are missing,
the default values will be inserted, if any.
Syntax font: {font-style font-variant font-weight font-size/line-height font-family}
CSS border
The CSS border properties allow you to specify the style, width, and color of an element's
border.
1. Border-style : The border-style property specifies what kind of border to display.

Syntax : border-style { dotted | dashed | solid | double | groove | ridge |inset | outset |
none |hidden}
Value Description
dotted Defines a dotted border
dashed Defines a dashed border
solid Defines a solid border
double Defines a double border
groove Defines a 3D grooved border. The effect
depends on the border-color value
ridge Defines a 3D ridged border. The effect
Inset Defines a 3D inset border. The effect
Outset Defines a 3D outset border. The effect
none Defines no border
Hidden Defines a hidden border
The border-style property can have from one to four values (for the top border, right
border, bottom border, and the left border).
2. Border-top-style : The border-top-style property sets the style of an element's top

border.
Syntax : border-top-style { dotted | dashed | solid | double | groove | ridge |inset |
outset | none |hidden}
3. Border-right-style : The border-right-style property sets the style of an element's right

border.
Syntax : border-right-style { dotted | dashed | solid | double | groove | ridge |inset |
4. Border-bottom-style : The border-bottom-style property sets the style of an element's

top border.
Syntax : border-bottom-style { dotted | dashed | solid | double | groove | ridge |inset |
5. Border-left-style : The border-left-style property sets the style of an element's top

border.
Syntax : border-left-style { dotted | dashed | solid | double | groove | ridge |inset |
6. border-width : The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three
pre-defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border).
Syntax : border-width : {thin | medium | thick | length}
7. border-top-width : The border-top-width property sets the width of an element's top

border.
Syntax : border-top-width : {thin | medium | thick | length}
8. border-left-width : The border-left-width property sets the width of an element's left

border.
Syntax : border-left-width : {thin | medium | thick | length}
9. border-bottom-width : The border-bottom-width property sets the width of an

element's bottom border.
Syntax : border-bottom-width : {thin | medium | thick | length}
10. border-left-width : The border-left-width property sets the width of an element's left
border.
Syntax : border-left-width : {thin | medium | thick | length}
11. border-color : The border-color property is used to set the color of the four borders. The
border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border).
Syntax : border-color : { colorname | #RRGGBB | rgb(value1,value2,value3)}
12. Border-top-color : The border-top-color property sets the color of an element's top
border.
Syntax : border-top-color : { colorname | #RRGGBB | rgb(value1,value2,value3)}
13. Border-right-color : The border-right-color property sets the color of an element's right
border.
Syntax : border-right-color : { colorname | #RRGGBB | rgb(value1,value2,value3)}
14. Border-bottom-color : The border-bottom-color property sets the color of an element's

bottom border.
Syntax : border-bottom-color : { colorname | #RRGGBB | rgb(value1,value2,value3)}
15. Border-left-color : The border-left-color property sets the color of an element's left
border.
Syntax : border-left-color : { colorname | #RRGGBB | rgb(value1,value2,value3)}
16. Border : The border shorthand property sets all the border properties in one declaration.
The properties that can be set, are (in order): border-width, border-style, and border-
color.It does not matter if one of the values above are missing
Syntax : border: border-width border-style border-color
CSS outline
The CSS outline properties specify the style, color, and width of an outline.
An outline is a line that is drawn around elements (outside the borders) to make the
element "stand out".
However, the outline property is different from the border property - The outline is NOT a
part of an element's dimensions; the element's total width and height is not affected by the
width of the outline.
1. Outline-style : The outline-style property specifies the style of the outline.

Syntax : outline-style { dotted | dashed | solid | double | groove | ridge |inset | outset
| none |hidden}
2. Outline-width : The outline-width property specifies the width of the four outlines.
The outline can be set as a specific size (in px, pt, cm, em, etc) or by using one of the
three pre-defined values: thin, medium, or thick.Syntax : outline-width : {thin | medium
| thick | length}
3. Outline-color : An outline is a line that is drawn around elements (outside the borders) to
make the element "stand out".
The outline-color property specifies the color of an outline.

Syntax : outline-color : { colorname | #RRGGBB | rgb(value1,value2,value3)}
4. Outline : An outline is a line that is drawn around elements (outside the borders) to make
the element "stand out".
The outline shorthand property sets all the outline properties in one declaration.
The properties that can be set, are (in order): outline-color, outline-style, outline-width.
If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for
the missing property will be inserted, if any.
Syntax : outline: outline-color outline-style outline-width

CSS margin
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the border.
With CSS, you have full control over the margins. There are CSS properties for setting the
margin for each side of an element (top, right, bottom, and left).
1. Margin-top : The margin-top property sets the top margin of an element.

Syntax : margin-top : length
2. Margin-right : The margin-right property sets the right margin of an element.

Syntax : margin-right : length
3. Margin-bottom : The margin-bottom property sets the bottom margin of an element.

Syntax : margin-bottom : length
4. Margin-left : The margin-left property sets the left margin of an element.

Syntax : margin-left : length
5. Margin : The margin shorthand property sets all the margin properties in one
declaration. This property can have from one to four values.
Syntax : margin : length {1,4}
CSS padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the
padding for each side of an element (top, right, bottom, and left).
1. Padding-top : The padding-top property sets the top padding of an element.

Syntax : padding-top : length
2. Padding-right : The padding-right property sets the right padding of an element.

Syntax : padding-right : length
3. Padding-bottom : The padding-bottom property sets the bottom padding of an element.

Syntax : padding-bottom : length
4. Padding-left : The padding-left property sets the left padding of an element.

Syntax : padding-left : length
5. Padding : The padding shorthand property sets all the padding properties in one
declaration. This property can have from one to four values.
Syntax : padding : length {1,4}
CSS list
The CSS list properties allow you to:
 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
1. List-style-type : The list-style-type property specifies the type of list item marker.
Syntax : list-style-type : {none | decimal | decimal-leading-zero | lower-alpha | upper-

alpha | lower-roman | upper-roman | disc | square | circle }
2. List-style-imgae : The list-style-image property replaces the list-item marker with an
image.
Syntax : list-style-image : url (filename)
3. List-style-position : The list-style-position property specifies if the list-item markers
should appear inside or outside the content flow.
Syntax : list-style-position: inside|outside
4. List-style : The list-style shorthand property sets all the list properties in one declaration.
The properties that can be set, are (in order): list-style-type, list-style-position, list-style-
image.
If one of the values above are missing, e.g. "list-style:circle inside;", the default value for
the missing property will be inserted, if any.
Syntax : list-style: list-style-type list-style-position list-style-image
CSS table
1. Table-layout : The table-layout property sets the table layout algorithm to be used for a
table.
Syntax table-layout: {auto|fixed}
2. Border-collapse: The border-collapse property sets whether the table borders are
collapsed into a single border or detached as in standard HTML.
Syntax : border-collapse : { separate | collapse }
3. Border-spacing : The border-spacing property sets the distance between the borders of
adjacent cells (only for the "separated borders" model).
Syntax : border-spacing: length
4. Empty-cells : The empty-cells property sets whether or not to display borders and
background on empty cells in a table (only for the "separated borders" model).
Syntax : empty-cells : {show | hide }
5. Caption-side : The caption-side property specifies the placement of a table caption.

Syntax : caption-side: {top | bottom | left | right }
CSS links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:
 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
HTML fonts :
… :
The tag specifies the font face, font size, and color of text. The tag is not
supported in HTML5. Use CSS instead.
Attributes of tag :
1. face : The face attribute specifies the font of the text inside a element.
Syntax : face= {fontname}
2. color : The color attribute specifies the color of the text inside a element.
Syntax : color ={ colorname | #RRGGBB | rgb(value1,value2,value3)}
3. size : The size attribute specifies the size of the text inside a element. A number
from 1 to 7 that defines the size of the text. Browser default is 3. You can specify the font
size with either absolute number or relative number. You can specify how many sizes
larger or how many sizes smaller than the preset font size should be. You can specify it
like or 
Syntax : size = number
<basefont > :
The <basefont> element is supposed to set a default font size, color, and typeface for any
parts of the document that are not otherwise contained within a tag. You can use
the elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative font
setting by giving size a value of +1 for a size larger or -2 for two sizes smaller.

Introduction To CSS: Element Selector

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To CSS: Element Selector

Uploaded by

Copyright:

Available Formats

CSS

 CSS stands for Cascading Style Sheet.

The stylesheet consists of the component style rule.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

The element selector selects elements based on the element name.

The class selector selects elements with a specific class attribute.

Internal Style Sheet

Length is a number followed by a length unit, such as 10px, 2em, etc.

For some CSS properties, negative lengths are allowed.

in inches (1in = 96px = 2.54cm)

px pixels (1px = 1/96th of 1in)

pt points (1pt = 1/72 of 1in)

pc picas (1pc = 12 pt)

Ex Relative to the x-height of the current font (rarely used)

2. Background-image : The background-image property sets one or more background

By default, a background-image is placed at the top-left corner of an element, and

Syntax : background-image : url(filename)

3. Background-repeat : The background-repeat property sets if/how a background image

By default, a background-image is repeated both vertically and horizontally.

Syntax : background-repeat: {repeat | repeat-x | repeat-y | no-repeat }

4. Background-position : The background-position property sets the starting position of a

5. Background-attachment : The background-attachment property sets whether a

Syntax : background-attachment : { scroll | fixed }

The properties that can be set, are: background-color, background-image, background-

It does not matter if one of the values above are missing

Syntax : background: background-color background-image position/background-size

2. Word-spacing : The word-spacing property increases or decreases the white space

4. Text-decoration : The text-decoration property specifies the decoration added to text.

5. Text-align : The text-align property specifies the horizontal alignment of text in an

6. Vertical-align : The vertical-align property sets the vertical alignment of an element.

7. Text-transform : The text-transform property controls the capitalization of text.

2. Font-style : The font-style property is mostly used to specify italic text.

3. Font-variant : The font-variant property specifies whether or not a text should be

Syntax : font-variant : { normal | small-caps}

1. Border-style : The border-style property specifies what kind of border to display.

2. Border-top-style : The border-top-style property sets the style of an element's top

3. Border-right-style : The border-right-style property sets the style of an element's right

4. Border-bottom-style : The border-bottom-style property sets the style of an element's

5. Border-left-style : The border-left-style property sets the style of an element's top

Syntax : border-width : {thin | medium | thick | length}

7. border-top-width : The border-top-width property sets the width of an element's top

8. border-left-width : The border-left-width property sets the width of an element's left

9. border-bottom-width : The border-bottom-width property sets the width of an

14. Border-bottom-color : The border-bottom-color property sets the color of an element's

Syntax : border: border-width border-style border-color

1. Outline-style : The outline-style property specifies the style of the outline.

The outline-color property specifies the color of an outline.

Syntax : outline: outline-color outline-style outline-width

1. Margin-top : The margin-top property sets the top margin of an element.

2. Margin-right : The margin-right property sets the right margin of an element.

3. Margin-bottom : The margin-bottom property sets the bottom margin of an element.

4. Margin-left : The margin-left property sets the left margin of an element.

1. Padding-top : The padding-top property sets the top padding of an element.

2. Padding-right : The padding-right property sets the right padding of an element.

3. Padding-bottom : The padding-bottom property sets the bottom padding of an element.

4. Padding-left : The padding-left property sets the left padding of an element.

The CSS list properties allow you to:

 Set different list item markers for ordered lists

Syntax : list-style-type : {none | decimal | decimal-leading-zero | lower-alpha | upper-

Syntax : list-style: list-style-type list-style-position list-style-image

5. Caption-side : The caption-side property specifies the placement of a table caption.

The four links states are: