HTML & CSS

CSS (Cascading Style Sheet): Text Decoration, Hyperlinks, Tables, List

CSS (Cascading Style Sheet)

Description:

CSS (Cascading Style Sheet):- this is a very detailed tutorial about cascading style sheets. In this, you will learn CSS classes, text-decoration, Table properties, and list properties…

CSS (Cascading style sheets):

CSS (Cascading Style Sheet) is a web language. It can be used in conjunction with html to apply different styles ( such as fonts, colors and other formats) to the objects (text and graphics) of the web pages. It provides various attributes (characteristics) to create dynamic effects. All major browsers support CSS (Cascading Style Sheet) .

Styles are normally stored in style sheets. A style sheet is simply a text file. It contains lines of code that tells the browser how to display html elements.

CSS (Cascading Style Sheet)  was created to separate html content from its appearance (or style from structure). The styles can be defined in one or more separate files. In this way, the allows for easier website maintenance.

The main difference between html and CSS (Cascading Style Sheet)  is as follows:

  • With html, the individual elements of the document are formatted using tags.
  • With style sheets, the formatting is specified only once, in a single list and it is applied throughout the document. The same formatting styles can be used in many web pages or even many websites.

CSS (Cascading Style Sheet)  is considered as a word processing tool for the web. For example, if you are preparing a topic “computer System” in word processor, the paper may have a main heading, sub-heading and normal paragraphs. For main heading text, you set the font style as “Arial”, font size of 24 points and bold the text. For sub-heading text set the font style as “time New Roman”, font size 14 points. For the text in other paragraphs, you set font style as “Times new Roman” with a font of 12 points and so on. In this example, the font style, font size and bold text, are all properties of text. In CSS (Cascading Style Sheet) , a style is a group of different properties given a common name. suppose now you prepare the above topic “Computer System” for publishing on the web. You define styles for the text of “main heading”, sub-heading and other paragraphs. Suppose, you create a style called “topic heading “ and specify font specification of a property is known a rule. All the specified properties are applied to the selected text in on step.  Later, if you want to change the font color or some other properties, you can just change its definition (or specification) in the style sheet. The appearance of all text marked with that style will change throughout the web page or website.



Style Sheet Standards:

The world wide web consortium (W3C), an organization of exports in web related fields, issued two style sheet recommended web standards:

  1. CSS1
  2. CSS2
  • CSS1 was published in 1996. It contains about 50 formatting properties.
  • CSS2 was published in 1998 built on css1. It contain all the properties In CSS1, and also some additional properties.

Advantages Of Css (Cascading Style Sheet) :

The advantages of CSS (CASCADING STYLE SHEET)  are as follows:

  • More Precise Formatting:

CSS (CASCADING STYLE SHEET)  provides more precise formatting for sophisticated page layout and design.

  • Separate Html content from its appearance:

Using CSS (CASCADING STYLE SHEET) , you can separate Html content from its appearance. The styles are normally stored in separate files. One style sheet file can control the appearance of many web pages of a website.

  • Save time:

CSS (CASCADING STYLE SHEET)  save time of the web developer and allows for easier site maintenance. For example, if a web developer wants to change the font style of all the links in a website from “ Courier “ to “Arial”, instead of going through every Html document for changing the font style of all the link, he/she changes few lines of code in a single style sheet file.

  • Reusability:

The style sheet prepared for one web document can be reused for many other web documents. It reduces the total cost of page development. It also save time of web designer.

CSS (Cascading Style Sheet)  Syntax:

The CSS (Cascading Style Sheet)  syntax consists of three parts: a selector, a property and a value. the syntax to create a CSS (CASCADING STYLE SHEET)  rule set is as follow:

Selector{

Property: value

}

Where

Selector:

it refers to the targeted Html elements or tags.

Property:

it refers to a CSS (Cascading Style Sheet)  property.

Value:

it refers to a value you want to specify for the property.

Note that the following important points about the CSS (Cascading Style Sheet)  syntax:

  • The list of property/value pairs are enclosed in curly braces ({}).
  • The property and its associated values are written separated by a colon(:). For example, to se the foreground color as “red” of the body of Html document, the CSS (Cascading Style Sheet) style is written as:

Body { color: red}

  • The value with multiple words separated by spaces must be enclosed in double quotation marks. For example, to set font style of a paragraph as “Times New Roman”, it is written as follows:

P{font-family: “Times New Roman”}

  • You can specify two or more properties for Html element(s) or tag(s). each property along with its value is written separated by semicolon (;). For example, to set the text color of a paragraph as “red”, font as “Arial” and to apply the center alignment, the style is defined as follows:

P{ text-align: center; font-family: Arial; color: red }

  • To make the style definitions more readable, you can write one property on each line. Each line (except last line) ends with semicolon. So the above style can be written as follow:

P{

text-align: center;

font-family: Arial;

color: red

}

  • You can apply style to two or more Html tags as a group. In this case, each selector is written separated by comma(,) for example, to set the text color f header tags <h1> <h3> and <h6> as ‘red’ and font as “Arial”, the style is written as follows:

H1, h3 , h6{color: red; font-family: Arial}

Or

H1, H3, H6

{

Color: red;

Font-family: Arial

}


<STYLE> Tag:

This tag is used to specify the style sheet definitions section within the html document. Within this section, the styles for html document are defined. You can also import formation from another style file that is stored on different location.

Style Tag Attributes:

The most important and commonly used attribute of <style> tag is ‘type’. It is used to specify the type of style sheet standard. The possible values of this attribute are:

Text/css:

It is used for cascading style sheet standard.

Text/jss:

It is used for Javascript style sheet standard.

Example:

<head>

<style type = “text/css”>

Style sheet definitions

</style>

</head>

Normally, all browsers ignore unknown tags. The old browsers do not support styles. So they will ignore the <style> tag. In this case, the contents of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the contents by hiding them in the html comment tag. So style sheet  definitions under <style> and </style> tags are placed within the comment tags e.g.

<head>
<style type= “text/css”>

<!–

Style Sheet definition

–>

</style>

</head>

Types of Style sheets:

There are three types of style sheets. These are:

  1. Inline style sheet.
  2. Internal style sheet.
  3. External style sheet.

Inline Style sheet:

Inline style is applied to the individual elements of the html documents. The styles are directly attached to the html elements inside the <body> tags. The inline style is applied when a style is to be applied to a single occurrence of an element.

To apply inline style definitions, ‘style’ attribute is used with the html tag. The style definitions are given as value of the ‘style’ attribute. The style definitions are given is double quotation marks.

For example, it you want to change the color of a paragraph, html code is written as:

<body>

<p style = “color: green”>

Text for paragraph

</p>

</body>


Example, write inline style definitions for the following purposes:

  • First paragraph with red color and Arial font style.
  • Second paragraph with blue color and courier font style.

CSS (Cascading Style Sheet)

Internal Style Sheet:

An internal style sheet is also inserted internally within the html document. It is inserted between the <head> and </head> tags. The style specifications are inserted between the <style> and </style> tags (between the <head> and </head> tags). An internal style sheet only affects the html document in which it is inserted.

For example if you want to change the color of paragraphs of current html document, html code is written as:

<head>

<style type = “text/css”>

P{color: green}

</style>

</head>

Example write internal style definitions for the following purpses:

  • H1, H2 and H3 with blue color and courier font style.
  • Text color of paragraph as red and with arial font style.

CSS (Cascading Style Sheet)

External Style Sheet:

You can store the style definitions is a separate text file with file extension “.css”. it is called external style sheet. An external style sheet can be attached or linked to many html document. You can change the entire appearance of the website (multiple web pages) by changing the formatting style in one file.

An external style sheet file can be associated with the html document(s) using two methods.

  • Importing :

This method is useful when you are developing multiple style sheet files and each has a particular function. The syntax to import the external file is:

<head>

<style>

@import url (path/style);

</style>

<head>

  • Linking:

This method gives visitors a choice of style sheet to use for a specific page. The <link> tag is used (instead of <style> tag) to link the style sheet with html document. This tag is also used within the <head> tags.

The most important and commonly used CSS (Cascading Style Sheet) attributes of <link > tag are as follows:

Type:

It is used to specify the type of style sheet standard. The possible values of this attribute are; “text/css” e.g.

<link type= “text/css”>

Rel:

It is used to specify that the referenced file is a style sheet e.g.

<link rel = “stylesheet”>

HRef:

It is used to specify the address of the style sheet file e.g.

<link Href = “style .css”>

For example, if the style definitions are stored in a file “style.css” and it is stored in the same location in which web page is stored (page that used the style definitions file), html code is written as;

<head>

<link type= “text/css” rel = “stylesheet” href= “style.css”></link>

</head>

In the above code, an external file is imported using <link> tag instead of <style>tag.



Example write code to demonstrate the CSS (Cascading Style Sheet) external style definitions as follows:

  • Store the style sheet definitions in a file “testing.css”
  • Import the style sheet file to apply the styles to different elements of html document.

Step-1: write style definitions and store in a file “testing.css”. the style definitions are as follows:

Step-2: write html code and import the file “testing.css” for applying the styles on the html element H1, H2, H3, and p. html code is as follows:

Note: to link the file “testing.css” using <link> tag, place the following code under head section.

Cascading Order:

Many style sheets may be affecting the appearance of an html document. So there must be an order in which style sheets are applied. The style sheets are applied In a cascading order. Generally, all the styles will “cascade” into a new virtual style sheet by the following order:

  • Inline style
  • Internal style sheet
  • External style sheet
  • Browser Default

So an inline style (style applied to the individual html elements) has the highest priority. It will override style declared in internal style sheet (style declared inside <head> tags), an external style sheet and a browser default style.

CSS (CASCADING STYLE SHEET)  Comments:

In CSS (Cascading Style Sheet) , you can add comments in style definitions. Comments are used to explain the purposes of style definitions. The comments help to edit the style definitions . a comment is ignored by browser. Like c-language, a CSS (CASCADING STYLE SHEET)  comment begins with “/*” and ends with “*/”. For example;

/* style definition for body *

Body

{

Color: black;

Font-family: “Times New Roman”

}

/* style definition for headers H1 and H2 */

H1, H2

{

Color: red;

Font-family: arial;

}


Specifying Measurement Units:

CSS (CASCADING STYLE SHEET)  provides different measurement units to specify the size of text, location of elements or to specify the size of indentation etc. you can also specify the measurements as a percentage of the browser window. The measurement units and their description are as follows:

em:

it is used to specify the height of font.

Ex:

It is used to specify the height of a lowercase letter ‘x’ in a font.

In:

It is used to specify the size in inches. It is a printing unit.

Cm:

It is used to specify the size in centimeters.

Mm:

It is used to specify the size in millimeters.

Pt:

It is used to specify the size in point. One point is equal to 1/72 inch.

Px:

It is used to specify the size in pixels. A pixel represents one dot on the screen.

Pc:

It is used to specify the size in picas. One pica is equal to 12 points.

Both relative and absolute measurement units are supported by CSS (Cascading Style Sheet) .

The relative unites are : ‘em’, ‘ex’, and  ‘px’.

The absolute units are: ‘in’, ‘cm’, ‘mm’,  ‘pt’, ‘pc’.

Note: No space Is given between specified value and the measurement unit. For example, 1.2 em is not a valid measurement, but 1.2em is a valid.

Specifying Color in CSS (CASCADING STYLE SHEET) :

Using CSS (Cascading Style Sheet) , you can specify colors in the standard html ways. The color property is used to specify the color of an element of html document. The syntax of color property is ;

Color: value;

Where ‘value’ specifies the value for color. The value may be name for color (such as red, blue, white) or hexadecimal value (such as #66CC00).

For example, to specify the blue color for the text of <H1>,the color rule is :

H1{color: blue}

Similarly to specify red color for the text of a paragraph, the color rule is;

P{color: red}

Or

P{color: #FF0000}

Example write html code to demonstrate how to set the color of the text:

CSS (Cascading Style Sheet)

CSS (CASCADING STYLE SHEET)  Background Properties:

The CSS (Cascading Style Sheet)  background properties are used to control the background color of an element, set an image as background, repeat a background image vertically or horizontal, and position an image on a page etc. the background properties are described as follows:

Background-color:

The background-color property is used to set the background color of an element of html document. The syntax of background-color property is ;

Background-color: value

Where value specify the value for color. The value may be a name for color or hexadecimal value.

For example, to specify the background color of <body> as white and <p> as blue, the CSS (Cascading Style Sheet)  rules are written as;

Body{

background-color: white

}

P{

Background-color: blue

}

You can use background property instead of background-color property to change the background color of an element of html document. So the above CSS (CASCADING STYLE SHEET)  rules can be written as;

Body

{

Background: whit

}

P

{

Background: blue

}


Example write html code to demonstrate how to set the background color of the text:

CSS (Cascading Style Sheet)

Background-Image:

Using CSS (CASCADING STYLE SHEET) , you can also set an image as background of the web page. The background-image property is used for this purpose. The syntax of background-image property is:

Background-image: url<value>

Where <value> represent the URL address of the image file. For example, if the image file “test.png” is stored at “http://www.anywebsite.com/images/test.png” location, the background-image property with value is written as;

Background-image: url(“http://www.anywebsite.com/images/test.png”)

To apply the above mentioned image as background to the body of html document, the CSS (Cascading Style Sheet)  rule is written as;

Body

{

Background-image: url(“http://www.anywebsite.com/images/test.png”)

}

If both the image file and web page are in the same location, then there is no need to specify the complete path. So the above CSS (Cascading Style Sheet)  rule can be written as;

Body

{

Background-image: url(‘test.png’)

}

Like background-color property, you can use the background property instead of background-image property to set an image as background of the web page.

Example write code to demonstrate how to set an image as the background:

CSS (Cascading Style Sheet)

Background-Repeat:

This property determines how a specified background image is repeated. The syntax of this property is:

Background-repeat: <value>

Where the possible value for this property are:

Repeat-x: repeats the image horizontally.

Repeat-y: repeats the image vertically.

No-repeat: does not repeat the image.



Example write code to demonstrate how to repeat-x a background image:

CSS (Cascading Style Sheet)

Example write code to demonstrate how to repeat-y a background image:

CSS (Cascading Style Sheet)

Example write code to demonstrate how to no-repeat a background image:

CSS (Cascading Style Sheet)

Background Attachment:

This property determines if a specified background image will scroll with the content or be fixed. The syntax of this property is:

Background-attachment: value

The possible values of this property are scroll and fixed. The following CSS (CASCADING STYLE SHEET)  rule specifies a fixed background image:

Body

{

Background-image: url(“test.png”);

Background-attachment: fixed;

}

Example write code to demonstrate how to set a fixed background image. The image should not scroll with the rest of the page:

Background-Position:

This property is used to specify the margin position of the background image relative to the element of html document behind which it is applied. The syntax of this property is:

Background-position: value;

The possible values of this property are:

Value for horizontal position: left, center, and right.

Values for vertical position: top, center, and botton.

You can also specify values in percentages and lengths such as 20% 65% and 5px 10px. The value 5px 10px specifies that the upper-left corner of the image be placed 5 pixels to the right and 10 pixels below the upper-left corner of the element.


Example write code to demonstrate the background position property:

CSS (Cascading Style Sheet)  Font Properties:

The font properties are used to define the font of text such as font name, font size, font style etc. the important font properties are described as follows:

Font-family:

This property is used to specify a list of font family names and/ or generic family names for an element. The syntax of this property is:

Font-family: <list of family-name/ generic family-name>

In the above syntax, family-name specifies any font family name. the generic family may be:

  • Serif(such as Time New Roman)
  • Sans-serif (such as Arial or Helvetica)
  • Fantasy (such as western)
  • Monospace (such as courier)

The list of font names is specified separated by commas such as:

Font-family: Arial, Helvetica, “Times New Roman”

If the first font name specified in the list is available on the visitor’s computer it is selected for text. If first is not available, then second choice is selected and so on. If font names specified in the list are not available in the visitor’s computer, the browser will display text in a font that is available. To ensure that one of your preferred fonts can be selected, choose multiple font families.

You can use font property, instead of font-family property to specify the font of text.

Example write code to demonstrate the font-family property:

CSS (Cascading Style Sheet)

Font style:

This property is used to set the style of font. The syntax of this property is:

Font-style: <value>

The possible values for this property are : normal, italic, and oblique. By default, font style is normal.


Example write code to demonstrate the CSS (Cascading Style Sheet) font style property:

CSS (Cascading Style Sheet)

Font Variant:

This property is used to display the text in a small caps font or a normal font. The syntax of this property is :

Font-variant: <value>

The possible values for this property are small-caps and normal. The normal and the default value.

For example:

H2, H3, H4 {font-variant: small-caps}

Example write code to demonstrate the CSS (Cascading Style Sheet) font variant property:

CSS (Cascading Style Sheet)

Font weight:

This property is used to specify the weight of the font. The syntax of this property is:

Font-weight: <value>

The possible values for this property are: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900.

For example:

H1, H2 {font-weight: 900}

P{font-weight: bold}

Font Size:

This property is used to set the size of font. The syntax of this property is:

Font-size: <value>

The possible values for this property are: xx-small, x-small, small, medium, large, x-large, xx-large. You can also specify size in points (such as 12pt) and inches (such as 1.3in)

For example:

H1{font-size: xx-large}

H2{font-size: 13pt}

Example write code to demonstrate the CSS (Cascading Style Sheet) font-weight and font-size properties:

CSS (Cascading Style Sheet)

CSS (CASCADING STYLE SHEET) Text Properties:

The CSS (Cascading Style Sheet)  text properties allow the web developer to control the appearance of text. Using text properties, it is possible to change the:

  • Word spacing
  • Letter spacing
  • Text Decoration
  • Vertical alignment
  • Text transformation
  • Text alignment
  • Text indentation
  • Line height

Word Spacing:

This property is used to set the space between word in a text. The syntax of this property is:

Word-spacing: <value>

The possible values for this property are: normal and any length format. The normal is the default value.

For example:

P{word-spacing: 0.4in}

H1{word-spacing:0.3em}



Example write code to demonstrate the CSS (Cascading Style Sheet) word spacing property:

CSS (Cascading Style Sheet)

Letter spacing:

This property is used to set the space between characters in a text. The syntax of this property is:

Letter-spacing : <value>

The possible values for this property are: normal and any length format. The normal is the default value.

For example:

P{letter-spacing: 0.1in}

H1{letter-spacing:0.3em}

Example write code to demonstrate the CSS (Cascading Style Sheet) letter spacing property:

CSS (Cascading Style Sheet)

Text Align:

This property is used to align the text in an element. This property is similar to align attribute applied on paragraphs and heading (i.e. html tag <p> and <h1> to <h4> tags). The syntax of this property is:

Text-align: <value>

The possible values for this property are: left, right, center, and justify.

For example:

H1{text-align: center}

P{text-align: justify}

Example write code to demonstrate the CSS (Cascading Style Sheet)  text-align property:

CSS (Cascading Style Sheet)

Vertical Align:

This property is used to set the vertical position of an inline element, relative to its parent element. An inline element in one which has no line break before and after it. In html, <img> and <A> are examples of inline elements. The vertical-align property is particularly useful for aligning images. The syntax of this property is:

Vertical-align: <value>

The possible values for this property are: baseline, top, text-top, middle, bottom and text-bottom. The value may also be in a percentage relative to the element’s line-height property.

For example:

Img{vertical-align: middle}

Line Height:

This property is used to set the distance between the line of text. The syntax of this property is:

Line-height: <value>

The possible values for this property are: normal, number, length and percentage.

For example:

P{line-height: 2}

P{line-height: 200%}

P{line-height: 0.5in}

P{line-height: 2pt}

Text Decoration:

This property is used to add decoration to text. For example, it is used to underline the text, overline the text, blink the text etc. the syntax of this property is:

Text-decoration:  <value>

The possible values for this property are: underline, overline, linethrough, blink, and none. The ‘none’ is the default value.

Example:

H1{text-decoration: underline}

H2{text-decoration: overline}

A:visited{text-decoration: blink}

Text Indent:

This property is used to indent the first line of text in an element. This property is commonly used to indent a paragraph. The syntax of this property is:

Text-indent: <value>

The value for this property may be given in length or percentage. By default its value is 0.

For example:

P{text-indent: 3em}


Example write code to demonstrate the CSS (Cascading Style Sheet) line-height, text-decoration, and text-indent properties:

CSS (Cascading Style Sheet)

Text Transform:

This property is used to change the case of letters (characters ) of an element for example, you can change the characters from lowercase to uppercase and vice versa. The syntax of this property is:

Text-transform: value

The possible values for this property are:

Uppercase: used to change all characters of each word into uppercase.

Lowercase: used to change all characters of each word into lowercase.

Capitalize: set the first character of each word into uppercase letter.

For example:

H1{text-transform: uppercase}

H2{text-transform: capitalize}

Example write code to demonstrate the CSS (Cascading Style Sheet) text transform property with different values:

CSS (Cascading Style Sheet)

CSS (CASCADING STYLE SHEET) List Properties:

CSS (Cascading Style Sheet)  list properties are used to set different list item markers, or set an image as the list item marker. The important list properties are described as follows:

List style type:

This property is used to set the type of the list item marker. The syntax of this property is :

List-style-type: <value>

The possible values for this property are: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha and none.

List style image:

This property is used to set an image as the list item marker. The syntax of this property is:

List-style-image: url(image name)

List style position:

This property is used to specify the position of list item marker in the list. The syntax of this property is:

List-style-position: value

The possible values for this property are ‘inside’ and ‘outside’.

List style:

This property is used as shorthand for setting all of the properties for list in on declaration. The syntax of this property is:

List-style: value


Example write code to demonstrate the CSS (CASCADING STYLE SHEET)  list properties:

CSS (Cascading Style Sheet)

CSS (CASCADING STYLE SHEET) HyperLinks:

You can use CSS (Cascading Style Sheet)  to change the appearance and behavior of hyperlinks. For this purpose, special style classes are used. These are:

A:link :

It is used to specify the attributes of links i.e. unvisited links.

A:visited:

It is used to specify the attributes of visited links.

A:active:

It is used to specify the attributes of the active link.

A:hover:

It is used to specify the attributes of link on which the visitor is moving mouse.

The A:hover must be placed after the a:link and A:visited rules. Otherwise the cascading rules will hide the effect of the A:hover rule.

For example, to set colors of unvisited links to blue, active link to red, visited links to green and hover link to white, the CSS (Cascading Style Sheet)  rules are as follows:

<style>

A:link {color: blue}

A:active { color: red}

A:visited {color: green}

A:hover{color: white}

</style>

Text Decoration of CSS (CASCADING STYLE SHEET)  hyperlinks :

The following CSS (Cascading Style Sheet)  properties are used for changing the text decoration of hyperlinks and cursor shape when mouse is placed on link or move over the link:

Text-Decoration:

This property is used for text decoration. The possible values for this property are:

  • Underline: it is used to underline the hyperlink
  • Overline: it is used to draw line over the text of hyperlink.
  • None: it is used if you do not want to decorate the text of hyperlink.

Cursor:

It is used to set the shape or style of mouse pointer. The possible values for this property are: crosshair, default and help.

Example write code to demonstrate the CSS (Cascading Style Sheet)  hyperlinks properties:

CSS (Cascading Style Sheet)



CSS (CASCADING STYLE SHEET) Tables properties:

The CSS (Cascading Style Sheet)  table properties are used to set the layout of a table. You can customize the elements of the table. The important properties of CSS (Cascading Style Sheet)  table are as follows:

Border spacing:

It is used to set the distance between the cell borders. You can specify any length measurements as value such as 10em, 10pt, 10px, etc.

Caption side:

It is used to set the position of table caption. The possible values for this property are: top, bottom, left, and right. The following rule puts the caption above the table:

Caption {caption-side: top}

Empty cells:

It is used to set whether or not to show empty cell in a table. Its possible values are; show(to show empty cells) and hide (to hide the empty cells).

Applying other CSS (Cascading Style Sheet)  properties to table:

You can specify other CSS (Cascading Style Sheet)  properties to format the text in cells of table. For example, to center the text (horizontally ) in the header cells and to apply the font-weight as bold, the CSS (Cascading Style Sheet)  rules are as follows:

TH{text-align: center; font-weight: bold}

To center the text (vertically ) in each data cell, CSS (Cascading Style Sheet)  rule is;

TD{vertical-align: middle}

CSS (CASCADING STYLE SHEET)  Padding Properties:

The CSS (Cascading Style Sheet)  padding properties define the space between the cell border and the content of cell. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple side at once. The CSS (Cascading Style Sheet)  padding properties are:

  1. Padding-top property
  2. Padding-bottom property
  3. Padding-right property
  4. Padding-left property.

Example write code to demonstrate the CSS (Cascading Style Sheet)  table properties:

CSS (Cascading Style Sheet)


CSS (CASCADING STYLE SHEET)  Border Properties:

The CSS (Cascading Style Sheet)  border properties are used to specify the style and color of an element’s border. In html, we use table cells to create border around the text. Using CSS (Cascading Style Sheet)  border properties we can apply border to any element.

The important and commonly used CSS (Cascading Style Sheet)  border properties are as follows:

Border bottom color:

It is used to set the color of the bottom border.

Border bottom style:

It is used to set the style of bottom border. The possible values for this property are as follow:

  • None: this value is specified for no border.
  • Dotted: this value is specified to draw bottom border as a series of dots.
  • Dashed: this value is specified to draw bottom border as series of dashes.
  • Solid: this value is specified to draw bottom border as solid line.
  • Double: this value is specified to draw bottom border as two solid line.
  • Groove: this value is specified to draw bottom border as curve into canvas.
  • Ridge: opposite to groove, the border appears as though it was coming out of the canvas.

Border bottom width:

It is used to set the width of the bottom border. The possible values are: thin, medium, thick, and length measurement values such as px, in, em, pt etc.

Border bottom:

It is used as a shorthand property for setting all of the properties for the bottom border in one declaration.

Border color:

It is used to set the color of the four borders of an element.

Border  left color:

It is used to set the color of the left border of an element.

Border left style:

It is used to set the style of the left border. The possible value for this property are same as mentioned in the border bottom style property.

Border left width:

It is used to set the width of the left border. The possible values for this property are same as mentioned in the border bottom width property.

Border left:

It is used as a shorthand property for setting all of the properties for the left border in one declaration.

Border right color:

It is used to set the color of the right border of an element.

Border right style:

It is used to set the style of the right border. The possible values for this property are same as mentioned in the border bottom style property.

Border right width:

It is used to set the width of the right border. The possible values for this property are same as mentioned in the border bottom width property.

Border right:

It is used as a shorthand property for setting all of the properties for the right border in one declaration.

Border top color:

it is used to set the color of the top border of an element.

Border top style:

It is used to set the style of the top border. The possible values for this property are same as mentioned in the border bottom style property.

Border top width:

It is used to set the width of the top border. The possible values for this property are same as mentioned in the border bottom width property.

Border  top:

It is used as a shorthand property for setting all of the properties for top border in one declaration.

border style:

It is used as a shorthand property for setting of four border of an element.

Border:

This property is used as a shorthand property for setting all of the properties for the four border in one declaration.


Example write code to demonstrate the CSS (Cascading Style Sheet)  border properties:

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet)  Scroll Bars properties:

Using CSS (Cascading Style Sheet) , you can set colors of different parts of scrollbars. The important and commonly used scrollbar properties for setting color are as follows:

  • Scrollbar-base-color: it is used to set the base color.
  • Scrollbar-Arrow-color: it is used to set the arrow color.
  • Scrollbar-track-color: it is used to set the track color.
  • Scrollbar-shadow-color: it is used to set the shadow color.

Example write code to demonstrate the CSS (Cascading Style Sheet)  scrollbar properties:

CSS (Cascading Style Sheet)



Classes in CSS (CASCADING STYLE SHEET):

CSS (Cascading Style Sheet)  provides the facility to define different styles for the same type of element (or tag). for example, if a web page has two paragraph and you want to apply different style to these paragraph such as;

First paragraph with as: color= red, font = arial, and font size = 19pt

Second paragraph with as: color= blue, font =courier, and font size =15pt

You can solve the above problem with styles as follows:

p.first {color: red; font-family: arial; font-size: 19pt}

p.second{color: blue; font-family: courier; font-size: 15pt}

in the above example, two styles named as ‘first’ and ‘second’ for the same <p> tag are defined. Please note that the name of class must begin with an alphabetical letter.

Now you can use the above defined styles in any <p> using ‘class’ attributes

The following html code uses the ‘Class’ attribute inside the <p> tag:

<body>

<p class = first>

First paragraph

</p>

<p class =second>

Second paragraph

</p>

</body>

You can apply more than one class to a particular element. For example, to apply both the ‘first’ and ‘second’ styles to a paragraph, the html code is;

<p class=”first second”>

Paragraph

</p>

You can also define a style that can be applied to all html elements. To do this, the tag name in the selector to define the style is omitted.

For example, to apply the font ‘arial’ and color ‘red’ to text of any element of the html, the CSS (Cascading Style Sheet)  rule is as follows:

.abc{font-family: arial;  text: red}

In the following html code, the above CSS (Cascading Style Sheet)  rule is applied to <h1> and <p> tags:

<body>

<h1 class = “abc”> Welcom</h1>

<p class = “abc”>

Paragraph

</p>

</body>

Example write code to demonstrate the CSS (Cascading Style Sheet)  Class:

CSS (Cascading Style Sheet)


Related Article:

Html Tags, Html Tags Attributes, Html Ordered, Unordered And Definition list

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button