wt unit2 css

Cascading Style Sheets (CSS) is used to style HTML elements on
web pages. It defines how elements are displayed, including

layout, colors, fonts, and other properties. CSS targets HTML
elements and applies style rules to dictate their appearance
Advantages of CSS:
• Easier to Maintain. ...
• Consistent Design. ...
• Time-Saving.
• Better Device Compatibility.
.
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS
file
• Inline CSS
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
Inline CSS Output
<!DOCTYPE html> A Blue Heading
<html> A red paragraph.
<body>
<h1 style="color:blue;">A Blue

Heading</h1>
<p style="color:red;">A red

paragraph.</p>
</body>
</html>
Internal CSS:
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page,

within a <style> element.
Internal CSS Output
<!DOCTYPE html>
<html> This is a heading
<head>
<style>
body {background- This is a
paragraph.
color:
powderblue;}
h1 {color: blue;}
p {color: red;font-
size:40px;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a
paragraph.</p>
</body>
</html>
External CSS:
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of

each HTML page:
External CSS Style.Css(externa

l css
<!DOCTYPE html> body {

<html> background-
<head> color: blue;
<link rel="stylesheet" href="d:\styles.css" }
> h1 {
</head> color: yellow;
<body> }
p{
<h1>This is a heading</h1> color: red;
<p>This is a paragraph.</p> }
</body>
</html>
Block level Elements
Every HTML element has a default display value, depending on what

type of element it is.
The two most common display values are block and inline.
Block-level Elements
A block-level element always starts on a new line, and the browsers

automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches

out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element.
Example
<p>Hello World</p>
<div>Hello World</div>
Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
Example
<span>Hello World</span>
CSS properties:
CSS text Properties:
1. These are the following text formatting properties.
Property Description
Sets the color of the text using

text-
color
color name, hex value, or RGB
value.
Specifies horizontal alignment of

text-
align
text in a block or table-cell
element.(left,right,center)
text-
indent
Indents first line of paragraph.
text- Controls capitalization of

transfor text.(capitalize,uppercase,lowerca
m se)
letter- Specifies space between

spacing characters of text.
line-
height
Sets space between lines.
direction Sets text direction.
word- Specifies space between words of

spacing line.
Text Formatting Example
In this example we demonstrates basic text formatting using C
<html>
<style>
.text
{
background-
color:yellow;
font-size:50px;
font-weight:bold;
text-
transform:uppercase;
text-align:center;
border-style:dotted;
word-spacing:30px;
letter-spacing:40px;
}
</style>
</head>
<div class="text">
welcome to
rkgit</div>
</body>
</html>
CSS Font Properties:
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.
CSS border styles:
The border-style property specifies what kind of border to

display.
The following values are allowed:

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
none - Defines no border
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.none {border-style: none;}
p.groove {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</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="none">No border.</p>
</body>
</html>
CSS selectors:
CSS selectors are used to "find" (or select) the HTML elements
we want to style.
1.css element selector 2.Id selector
3.class selector 4.
5.
1.CSS element selector: The element selector selects

HTML elements based on the element name.
Element selector Output
<!DOCTYPE html>
<html> paragraph will be
affected by the style.
<head>
<style> Me too!
p{
text-align: center; hello world
color: red;
}
</style>
</head>
<body>
<p>paragraph will be
affected by the
style.</p>
<p >Me too!</p>
<p>hello world</p>
</body>
</html>
2.ID selector: The id selector uses the id attribute of an HTML
element to select a specific element.The id of an element is
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.
Id selector Output
<!DOCTYPE html> Hello World!

<html> This paragraph is
<head> not affected by the
<style> style.
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello
World!</p>
<p>This paragraph is
not affected by the
style.</p>
</body>
</html>
CSS class selector:
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the class name.
Class selector Output
<!DOCTYPE html>
<html> Red and center-aligned
heading
<head>
<style> Red and center-aligned
.center { paragraph.
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1
class="center">Red
and center-aligned
heading</h1>
<p class="center">Red
and center-aligned
paragraph.</p>
</body>
</html>
4.CSS UNIVERSAL SELECTOR:
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
5.CSS GROUPING Selector:
The grouping selector selects all the HTML elements with the same
style definitions.
Grouping selector example output
<!DOCTYPE html> Hello World!

<html> Smaller heading!
<head> This is a paragraph.
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello
World!</h1>
<h2>Smaller
heading!</h2>
<p>This is a
paragraph.</p>
</body>
</html>
CSS Box Model
In CSS, the term "box model" is used when talking about design and
layout.
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: content, padding, borders and margins. The
image below illustrates the box model:
Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is

transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define
space between elements.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around

every HTML element. It consists of: borders, padding, margins,
and the actual content.</p>
<div>This text is the content of the box. We have added a 50px
padding, 20px margin and a 15px green border. </div>
</body>
</html>
Output:
Demonstrating the Box Model
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual
content.
Output:
The css box model is essentially a box that

wraps around every html element.
padding
This text is the content of the box. We have

added a 50px padding, 20px margin and a
15px green border.
Margin vs padding in css:
In CSS, a margin is the space around an element's border, while

padding is the space between an element's border and the
element's content.
The margin property controls the space outside an element, and

the padding property controls the space inside an element.
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
With CSS, you have full control over the margins. There are properties
for setting the margin for each side of an element (top, right, bottom,
and left).
Margin - Individual Sides

CSS has properties for specifying the margin for each side of an
element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing
element
CSS Padding
The CSS padding properties are used to generate space around
an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element
(top, right, bottom, and left).
Padding - Individual Sides

CSS has properties for specifying the padding for each side of an
element:
padding-top
padding-right
padding-bottom
padding-left
Margin properties: Padding Properties
<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> <head>
<style> <style>
div { div {
border: 1px solid border: 1px solid
black; black;
margin-top: 100px; padding: 25px
margin-bottom: 50px 75px 100px;
100px; background-color:
margin-right: 150px; lightblue;
margin-left: 80px; }
background-color: </style>
lightblue; </head>
} <body>
</style>
</head> <h2>The padding
<body> shorthand
property - 4
<h2>Using individual values</h2>
margin
properties</h2> <div>This div
<div>This div element element has a top
has a top margin of padding of 25px, a
100px, a right margin right padding of
of 150px, a bottom 50px, a bottom
margin of 100px, and padding of 75px,
a left margin of and a left padding
80px.</div> of 100px.</div>
</body> </body>
</html> </html>
Tables with CSS
<html>
<head>
<style>
table, th, td {
border: 1px solid;
background-color:red;
color:yellow;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td> </tr>
</table>
</body>
</html>
output
Add a border to a table:
Firstname Lastname
Peter Griffin
Lois Griffin
List with css:
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
DIV tag in HTML:
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
DIV TAG DEFINES SECTIONS IN

WEB PAGE

wt unit2 css

Uploaded by

Copyright:

Available Formats

wt unit2 css

Uploaded by

Document Information

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

wt unit2 css

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets (CSS) is used to style HTML elements on

web pages. It defines how elements are displayed, including

Inline CSS Output

<!DOCTYPE html> A Blue Heading

<html> A red paragraph.

<h1 style="color:blue;">A Blue

<p style="color:red;">A red

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page,

Internal CSS Output

To use an external style sheet, add a link to it in the <head> section of

External CSS Style.Css(externa

<!DOCTYPE html> body {

Every HTML element has a default display value, depending on what

A block-level element always starts on a new line, and the browsers

A block-level element always takes up the full width available (stretches

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

1. These are the following text formatting properties.

Sets the color of the text using

Specifies horizontal alignment of

text- Controls capitalization of

letter- Specifies space between

direction Sets text direction.

word- Specifies space between words of

In this example we demonstrates basic text formatting using C

These are some important font attributes:

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

6. CSS Font weight: This property is used to increase or decrease the

The border-style property specifies what kind of border to

The following values are allowed:

<h2>The border-style Property</h2>

<p class="dotted">A dotted border.</p>

1.css element selector 2.Id selector

1.CSS element selector: The element selector selects

Element selector Output

To select an element with a specific id, write a hash (#) character,

<!DOCTYPE html> Hello World!

CSS class selector:

Class selector Output

The CSS Universal Selector

5.CSS GROUPING Selector:

Grouping selector example output

<!DOCTYPE html> Hello World!

Explanation of the different parts:

• Padding - Clears an area around the content. The padding is

• Border - A border that goes around the padding and content

• Margin - Clears an area outside the border. The margin is transparent

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around

Demonstrating the Box Model

The css box model is essentially a box that

This text is the content of the box. We have

Margin vs padding in css: