Chapter 5

Chapter five
Cascading style sheet
It is a style sheet language which is used to describe the look and formatting of a document written in markup
language. It provides an additional feature to HTML.
It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any
kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and
user interfaces for many mobile applications.
Why use CSS
These are the three major benefits of CSS:
1) Solves a big problem
2) Saves a lot of time
3) Provide more attributes
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the
above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
2. CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".

<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
How to add CSS
CSS is added to HTML pages to format the document according to information in the style sheet. There are three
ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
CSS Background
CSS background property is used to define the background effects on element. There are 5 CSS background
properties that affects the HTML elements:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border
properties are given below
o border-style
o border-color
o border-width
o border-radius
CSS Display
CSS display is the most important property of CSS which is used to control the layout of the element. It specifies
how the element is displayed.
Every element has a default display value according to its nature. Every element on the webpage is a rectangular
box and the CSS property defines the behavior of that rectangular box.
CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you can change the text size,
color, style and more. You have already studied how to make text bold or underlined. Here, you will also know how
to resize your font using percentage.
These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font.
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
border-style: solid;
border-width: 5px;
}
body {
font-size: 100%;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javatpoint. This is an example of CSS background-color.</p>
</body>
</html
CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border
properties are given below
o border-style
o border-color
o border-width
o border-radius

Chapter 5

Uploaded by

Copyright:

Available Formats

Chapter 5

Uploaded by

Document Information

Original Description:

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

Chapter 5

Uploaded by

Copyright:

Available Formats

Chapter five

Cascading style sheet

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

2) Saves a lot of time

3) Provide more attributes

Each declaration contains a property name and value, separated by a colon.

There are several different types of selectors in CSS.

1. CSS Element Selector

Let?s take an example with the id "para1".

These are some important font attributes:

5. CSS Font variant: This property creates a small-caps effect.

You might also like