Scribd
Upload
24 views10 pages

CSS - Cascading Style Sheets: Formatting Text in CSS

CSS (Cascading Style Sheets) is a language for styling web pages that separates document content from document presentation. It handles the look and feel of a web page by controlling color, fonts, layout, and various other visual aspects. CSS works by applying styles, which are rules that specify how elements should be displayed, to HTML elements. Styles are usually defined in external .css files and linked to HTML documents. This allows styles to be changed globally and web pages to load faster. [/SUMMARY]

Uploaded by

victor raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views10 pages

CSS - Cascading Style Sheets: Formatting Text in CSS

CSS (Cascading Style Sheets) is a language for styling web pages that separates document content from document presentation. It handles the look and feel of a web page by controlling color, fonts, layout, and various other visual aspects. CSS works by applying styles, which are rules that specify how elements should be displayed, to HTML elements. Styles are usually defined in external .css files and linked to HTML documents. This allows styles to be changed globally and web pages to load faster. [/SUMMARY]

Uploaded by

victor raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS - Cascading Style Sheets

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs,variations in display for different devices and screen sizes as
well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code
means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.
• Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can
give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized for more than one
type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make
them compatible to future browsers.

Formatting Text in CSS


CSS allows us to format text to create visually appealing content.
Following are some examples to manipulate text (style text) using CSS properties. You can set following
text properties of an element

color

This property helps us change the text color.


letter-spacing
This property is used to set the spacing between characters.
line-height

The height of a line is specified using this property.


text-align
The horizontal alignment of the text is controlled by text-align property.

1|u2
text-decoration
To underline, strikethrough or overline and style it, text-decoration is used.
text-indent
The indentation of the first line of an element is set by the text-ident property.

text-shadow
To display a shadow around text, the text-shadow property is used.
text-transform

The case of text can be set with the text-transform property.


word-spacing
The space between words can be set with this property.

Syntax
The syntax of font-variant property is as follows −
Selector {
font-variant: /*value*/
}

CSS text-align

CSS text-align property use to set the horizontal alignment of text.


text-align possible value center, left, right, or justify.
When you set text-align property value justify than the effect is both width (left or right) equal like newspaper or
books type.

Example 1

Set the Text Cases


The following example demonstrates how to set the cases for a text. Possible values are none,
capitalize, uppercase, lowercase.
<html>
<head>
</head>

<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>

<p style = "text-transform:uppercase;">


This will be in uppercase
</p>

2|u2
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>

Output:

This Will Be Capitalized

THIS WILL BE IN UPPERCASE

this will be in lowercase

Example 2
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Align</title>
</head>
<body>
<p style="text-align: right;">CSS text align right</p>

<p style="text-align: center;">CSS text align center</p>

<p style="text-align: left;">CSS text align left</p>

<p style="text-align: justify;">Hello, this is example of CSS text-align justify type.


Both side left
and right are equal. Its like newspaper or book type. Hello, this is example of CSS
text-align justify type. Both side left and right are equal. Its like newspaper or book
type. Hello, this is example of CSS text-align justify type. Both side left and right are
equal. Its like newspaper or book type.</p>
</body>
</html>
Output:

CSS text align right

CSS text align center

CSS text align left

3|u2
Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book
type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or
book type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper
or book type.

Example 3
<!DOCTYPE html>
<html>
<head>
<title>CSS text-decoration</title>
</head>
<body>
<p style="text-decoration: underline;">Text is underline decorate</p>
<p style="text-decoration: overline;">Text is overline decorate</p>
<p style="text-decoration: line-through">Text is line delete decorate</p>
<p style="text-decoration: none;">Text is nothing any decorate value</p>
</body>
</html>

Text is underline decorate

Text is overline decorate

Text is line delete decorate

Text is nothing any decorate value

Introduction CSS
CSS is called as Cascading Style Sheets. It helps to define the presentation of HTML elements as a
separate file known as CSS file having .css extension.
CSS helps to change formatting of any HTML element by just making changes at one place. All changes
made would be reflected automatically to all of the web pages of the website in which that element
appeared.

CSS Rules
CSS Rules are the styles that we have to create in order to create style sheets. These rules define
appearance of associated HTML element. The general form of CSS syntax is as follows:
Selector {property: value;}

• Selector is HTML element to which CSS rule is applied.


• Property specifies the attribute that you want to change corresponding to the selector.

4|u2
• Property can take specified value.
• Property and Value are separated by a colon (:).
• Each declaration is separated by semi colon (;).
Following are examples of CSS rules:
P { color : red;}

h1 (color : green; font-style : italic }

body { color : cyan; font-family : Arial; font- style : 16pt}

CSS with HTML


Following are the four methods to add CSS to HTML documents.
1. Inline Style Sheets
2. Internal (Embedded) Style Sheets
3. External Style Sheets
4. Imported Style Sheets

Inline Style Sheets


Inline Style Sheets are included with HTML element i.e. they are placed inline with the element. To add
inline CSS, we have to declare style attribute which can contain any CSS property.
Syntax:
<Tagname STYLE = “ Declaration1 ; Declaration2 “> …. </Tagname>

Let’s consider the following example using Inline Style Sheets:


<p style="color: blue; text-align: left; font-size: 15pt">
Inline Style Sheets are included with HTML element i.e. they are placed inline
with the element.
To add inline CSS, we have to declare style attribute which can contain any CSS
property.
</p>

Output −

5|u2
Embedded Style Sheets
Embedded Style Sheets are used to apply same appearance to all occurrence of a specific element.
These are defined in <head> element by using the <style> element.
The <style> element must include type attribute. The value of type attribute specifies what type of syntax
it includes when rendered by the browser.

Syntax
<head> <title> …. </title>
<style type =”text/css”>
…….CSS Rules/Styles….
</style>
</head>

Let’s consider the following example using Embedded Style Sheets:


<style type="text/css">
p {color:green; text-align: left; font-size: 10pt}
h1 { color: red; font-weight: bold}
</style>

External Style Sheets


External Style Sheets are the separate .css files that contain the CSS rules. These files can be linked
to any HTML documents using <link> tag with rel attribute.
Syntax:
<head> <link rel= “stylesheet” type=”text/css” href= “url of css file”>
</head>

In order to create external css and link it to HTML document, follow the following steps:
• First of all create a CSS file and define all CSS rules for several HTML elements. Let’s name this
file as external.css.
p{
Color: orange; text-align: left; font-size: 10pt;
}
h1{
Color: orange; font-weight: bold;

6|u2
}

• Now create HTML document and name it as externaldemo.html.


<html>
<head>
<title> External Style Sheets Demo </title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1> External Style Sheets</h1>
<p>External Style Sheets are the separate .css files that contain the CSS
rules.</p>
</body>
</html>

Imported Style Sheets


Imported Style Sheets allow us to import style rules from other style sheets. To import CSS rules we
have to use @import before all the rules in a style sheet.
Syntax:
<head><title> Title Information </title>
<style type=”text/css”>
@import URL (cssfilepath)
… CSS rules…
</style>
</head>

Let’s consider the following example using Inline Style Sheets:


<html>
<head>
<title> External Style Sheets Demo </title>
<style>
@import url(external.css);
</style>
</head>
<body>
<h1> External Style Sheets</h1>

7|u2
<p>External Style Sheets are the separate .css files that contain the CSS
rules.</p>
</body>
</html>

DHTML
DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.

Dynamic HTML is not a markup or programming language but it is a term that combines the features of
various web development technologies for creating the web pages dynamic and interactive.

The DHTML application was introduced by Microsoft with the release of the 4 th version of IE (Internet
Explorer) in 1997.

Components of Dynamic HTML(DHTML)


DHTML consists of the following four components or languages:

o HTML 4.0
o CSS
o JavaScript
o DOM.

HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML. It defines the structure
of a web page with various defined basic elements or tags.

8|u2
CSS

CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling the style
and layout of the HTML elements on the web pages.

JavaScript

JavaScript is a scripting language which is done on a client-side. The various browser supports JavaScript
technology. DHTML uses the JavaScript technology for accessing, controlling, and manipulating the HTML
elements. The statements in JavaScript are the commands which tell the browser for performing an action.

DOM

DOM is the document object model. It is a w3c standard, which is a standard interface of programming
for HTML. It is mainly used for defining the objects and properties of all elements in HTML.

Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):

o It is used for designing the animated and interactive web pages that are developed in real-time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content
automatically.

Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):

o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color, and content of a
web page.
o It provides the facility for using the events, methods, and properties. And, also provides the
feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
o With the help of DHTML, users can easily change the tags and their properties.
o The web page functionality is enhanced because the DHTML uses low-bandwidth effect.

9|u2
Difference between HTML and DHTML
Following table describes the differences between HTML and DHTML:

HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)

1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of


technologies of web development.

2. It is used for developing and creating web 2. It is used for creating and designing the animated
pages. and interactive web sites or pages.

3. This markup language creates static web pages. 3. This concept creates dynamic web pages.

4. It does not contain any server-side scripting 4. It may contain the code of server-side scripting.
code.

5. The files of HTML are stored with the .html or 5. The files of DHTML are stored with the .dhtm
.htm extension in a system. extension in a system.

6. A simple page which is created by a user 6. A page which is created by a user using the HTML,
without using the scripts or styles called as an CSS, DOM, and JavaScript technologies called a DHTML
HTML page. page.

7. This markup language does not need database 7. This concept needs database connectivity because it
connectivity. interacts with users.

10 | u 2

You might also like