Note on Concept of CSS and SCRIPT

  • Note
  • Things to remember

Concept of CSS and SCRIPT

CSS stands for Cascading style sheets. CSS consists of various styles which define how to display HTML elements so as to make the design of the Website dynamic and attractive. Styles are normally stored in Styles Sheets. These styles were added to HTML 4.0 to solve a problem because every tag cannot design the Web site in a fascinating way.

.

Source:www.programmers-code.org

Advantages of using CSS

  1. Web pages will be loaded fast.
  2. Design consistency across all the pages of the Web site.
  3. CSS allows for more interactive style elements, including font, font size, font color, which can make pages more usable for people with disabilities.
  4. Future redesigns will be more efficient.
  5. CSS can help to make Web pages available to different media (desktop PC, mobile phones) with the same markup page presented in different viewing styles.
  6. It makes Web page browser compatible with almost all the browsers.

CSS styles can be in various forms:

Inline styles:

An inline style should be used when a unique style is to be applied to a single occurrence of an element.

Using an inline style means that you largely lose control from stylesheets, meaning that if you decide to restyle your pages, you will be unable to restyle that part. It is generally not a good idea to use inline style attributes. The example shows how to change the color and the left margin of a paragraph.

<p style=”color: red; margin-left:20px”>

This is a paragraph.

</p>

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. One defines internal style in the head section with the <style> tag.

<HEAD>

<STYLE TYPE=”TEXT/CSS”>

BODY {BACKGROUND-COLOR:RED}

P {MARGIN-LEFT: 20PX}

</STYLE>

</HEAD>

External Style Sheet

An external style sheet is a deal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

Example:

<HEAD>

<LINK REL=”STYLESHEET” TYPE=”TEXT/CSS” HREF=”MYSHEET.CSS”>

</HEAD>

External style sheets can save a lot of work. External Style Sheets are stored in CSS files. Using style sheet we can cascade multiple style definitions into one.

CSS Syntax

The CSS syntax is made up of three parts: a selector, a property, and a value:

Selector {property: value}

The selector is normally the HTML element /tag one wish to define, the property is the attribute one wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:

Body {color: black}

If the value is multiple words, put quotes around the value:

P {font-family:”sans-serif”}

NOTE: If one wishes to specify more than one property then one should separate each property with a semi-colon. The example below shows how to define a center aligned paragraph, with a red text color:

P

{

text-align: center;

color: black;

font-family: Arial;

}

The Class Selector

With the class selector, one can define different styles for the same types of HTML element. Say that one would like to have two types of paragraphs in the document: one right-aligned paragraph, and one center-aligned paragraph. Here is how to do this with styles:

  1. right {text-align: right}
  2. center {text-align: center}

<p class=”right”> This paragraph will be right-aligned.</p>

<p class=”center”> This paragraph will be center-aligned.</p>

NOTE: Only one class attribute can be specified per HTML element! The example below is wrong.

<p class =”right” class=”center”> This is a paragraph. </p>

One can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. in the example below, all HTML elements with class=”center” will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class=”center”. This means that both elements will follow the rules in the “.center” selector:

<h1 class=”center”> This heading will be center-aligned </h1>

<p class=”center”> This paragraph will also be center-aligned. </p>

The ID Selector

The id selector is different from the class selector. While a class selector may apply to SEVERAL elements on a page, an id selector always applies to only ONE element. An ID attribute must be unique within the document.

The style rule below will match a "p " element that has the id value “para1”.

p#para1

{

Text-align: center;

Color: red

}

The style rule below will match the first element that has the id value “wer345”.

#wer345 {color: green}

The rule above will match this H1 element:

<H1 id=”wer345”> Some text </H1>

Example: This example demonstrates how to format an HTML document with style information added to the < head> section.

<HTML>

<HEAD>

<STYLE>

H1 { COLOR: RED}

H3 { COLOR: BLUE }

</STYLE>

</HEAD

<BODY>

<H1> THIS IS HEADER 1 </H1>

<H3> THIS IS HEADER 3 </H3>

</BODY>

</HTML>

.

Example: This example demonstrates how to set the background color for an element.

<HTML>

<HEAD>

<STYLE TYPE=”TEXT/CSS”>

BODY {BACKGROUND-COLOR: YELLOW}

H1 { BACKGROUND-COLOR: RED}

H3 {BACKGROUND- COLOR: BLUE }

</STYLE>

</HEAD>

<BODY>

<H1>THIS IS HEADER 1 </H1>

<H3> THIS IS HEADER 3 </H3>

</BODY>

</HTML>

Example: This example demonstrates how to add decoration to text.

<HTML>

<HEAD>

<STYLE TYPE=”TEXT/CSS”>

H1 { TEXT-DECORATION: OVERLINE}

H2 {TEXT- DECORATION: UNDERLINE }

H3{ TEXT-DECORATION: LINE-THROUGH}

A {TEXT- DECORATION: NONE }

</STYLE>

</HEAD>

<BODY>

<H1> THIS IS HEADER 1 </H1>

<H2> THIS IS HEADER 3 </H2>

<H3> THIS IS HEADER 1 </H3>

<P><A HREF=http://www.google.com> This is a link</P>

</BODY>

</HTML>

Example: This example demonstrates how to set a font of a text.

<HTML>

<HEAD>

<SYTLE TYPE=”TEXT/CSS”>

H3 { FONT-FAMILY: VERDANA }

P {FONT-FAMILY: COURIER }

P.SANSSERIF { FONT-FAMILY : SANS-SERIF }

</STYLE>

</HEAD>

<BODY>

<H3> THIS IS HEADER 3</H3>

<P> THIS IS A PARAGRAPH </P>

<P CLASS=”SANSSERIF”> THIS IS A PARAGRAPH</P>

</BODY>

</HTML>

Example: This example demonstrates how to set the style of four borders.

<HTML>

<HEAD>

<STYLE TYPE=”TEXT/CSS”>

P.DOTTED {BORDER-STYLE: DOTTED }

P.DASHED {BORDER-STYLE: DASHED }

P.SOLID {BORDER-STYLE: SOLID }

P.DOUBLE {BORDER-STYLE: DOUBLE }

P.GROOVE {BORDER-STYLE: GROOVE }

P.RIDGE {BORDER-STYLE: RIDGE }

P.INSET {BORDER-STYLE: INSET }

P.OUTSET {BORDER-STYLE: OUTSET }

</STYLE>

</HEAD>

<BODY>

<P> THE “BORDER-STYLE” PROPERTY IS NOT RECOGNIZED BY NETSCAPE 4. </P>

<P> NETSCAPE 6 SUPPORTS ALL BORDER STYLES. </P>

<P>INTERNET EXPLORER 5.5 SUPPORTS ALL BORDER STYLES. INTERNET EXPLORER 4.0 -5.0 DO NOT SUPPORT THE “ DOTTED AND “DASHED” VALUES</P>

<P CLASS=”DOTTED”>A DOTTED BORDER</P>

<P CLASS=”DASHED”>A DASHED BORDER</P>

<P CLASS=”SOLID”>A SOLID BORDER</P>

<P CLASS=”DOUBLE”>A DOUBLE BORDER</P>

<P CLASS=”GROOVE”>A GROOVE BORDER</P>

<P CLASS=”RIDGE”>A RIDGE BORDER</P>

<P CLASS=”INSET”>A INSET BORDER</P>

<P CLASS=”OUTSET”>A OUTSET BORDER</P>

</BODY>

</HTML>

Example: This example demonstrates the different list-item markers in CSS.

<HTML>

<HEAD>

<STYLE TYPE=”TEXT/CSS”>

UL.DISC { LIST-STYLE-TYPE: DISC }

UL.CIRCLE { LIST-STYLE-TYPE: CIRCLE }

UL.SQUARE { LIST-STYLE-TYPE: SQUARE}

UL.NONE { LIST-STYLE-TYPE: NONE }

</STYLE>

</HEAD>

<BODY>

<UL CLASS=”DISC”>

<LI>COFFEE</LI>

<LI>TEA</LI>

<LI>COCA COLA</LI>

</UL>

<UL CLASS=”CIRCLE”>

<LI>COFFEE</LI>

<LI>TEA</LI>

<LI>COCA COLA</LI>

</UL>

<UL CLASS=” SQUARE”>

<LI>COFFEE</LI>

<LI>TEA</LI>

<LI>COCA COLA</LI>

</UL>

<UL CLASS=”NONE”>

<LI>COFFEE</LI>

<LI>TEA</LI>

<LI>COCA COLA</LI>

</UL>

</BODY>

</HTML>

(Shrestha, Manandhar, and Roshan)

Bibliography

Shrestha, Prachanda Ram, et al.Computer Essentials. Kathmandu: Asmita's Publication, 2014.

  • CSS stands for Cascading style sheets. CSS consists of various styles which define how to display HTML elements so as to make the design of the Website dynamic and attractive. 
  • Advantages of CSS
  • CSS styles can be in various form:
  1. Inline styles
  2. Internal styles
  3. External styles sheet
.

Very Short Questions

0%

DISCUSSIONS ABOUT THIS NOTE

No discussion on this note yet. Be first to comment on this note