CSS

CHAPTER 1: Output:

Syntax

A CSS rule-set consists of a selector and a declaration block.

Selector{property:value}

h1{color:red;font-size:12px;}

CSS Introduction

CSS stands for Cascading Style Sheets and it describes how HTML elements are to be

displayed on the screen , paper , or in other media.

Property:value

Here the property defines which style we want to apply for web page and value defines

respective value for property.

CSS Types

There are three types of CSS are present

Inline:

Here we are going to write the styles within the tag itself.

Internal:

In this type of style sheet we are going to write the styles in <head> section.

External:

In this type of style sheet we are going to write the styles in a separate file and we
have to save that file with .css extension.

CHAPTER 2: Output: Use below 3 css styles to design a sample form with header tags and table with cells apply
simple css that you know(like border, color,..) using inline css

1.Inline
2.Syntax

Code:

Output:

CHAPTER 3: Output: Use below 3 css styles to design a sample form with header tags and table with cells apply simple css that you know
(like border, color,..) using Internal css

1.Internal
2.Syntax

Output:

CHAPTER 4: Output: Use below 3 css styles to design a sample form with header tags and table with cells apply simple
css that you know(like border, color,..) using External css

1.External
2.Syntax

Code:

Css file:

Output:

CHAPTER 5: Output: Design sample form and use the below selectors to apply the styles

Selectors:

1.Element Selectors: Apply this to a div and input element
2.ID: apply this to button element
3.Class: apply this to table cells
4.Attribute: Apply this to <a> tag
5.Pseudo class:

<Div> tag: The div tag is known as Division tag . The div tag is used in HTML to make divisions of content
in the web page like (text , images, footer and header etc.) .

Pseudo class : It is a keyword added to a selector that specifies a special state of the selected element .

Output:

CHAPTER 6: Output: Design sample form and use the below selectors to apply the styles.

Pseudo class

1.Use of Pseudo class selector

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
For example, :hover can be used to change a button's color when the user's pointer hovers over it.

Code:

Output:

2.Apply on mouse over for button and div

3.Apply for text - box focus

4.https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes >> See this page for pseudo class elements

List of pseudo class elements that i have seen through above link

1 .The: active pseudo class represents an element (such as a button) that is being activated by the user.

Output:

2 .The: first-child pseudo class represents the first element among a group of sibling elements.

Output:

3 .The: nth-child(even) pseudo class represents the even elements in a table or from group of elements .

Output:

4 .The: hover pseudo class represents when we hover over any particular thing it will change as per the attributes given
to it.

Output:

5 .The: visited pseudo class represents links that the user has already visited.

Output :

6 .The: link pseudo class represents an element that has not yet been visited .

Output:

6 .The: required pseudo class represents any <input> , <select> , or <textarea> element that has the required attribute set
on it.

Output:

CHAPTER 7: Output: Simple Html page with background styles with head, body and table and divs

Background

Background-color: Apply different background colors form head, body, and table

Output:

Background-image: Apply background image for the background of the page

Output:

Background-repeat: use small image and repeat it as full background of the page

Output:

Background-repeat-x-axis: Repeat the background image in x-axis direction

Output:

Background-repeat-y-axis: Repeat the background image in y-axis direction

CHAPTER 8: Output: Use Different colors in you web page for header tags

Color

Background color: This attribute is used for giving background colour to the web page.

Output:

TextColor: This attribute specifies the text colour on the web page.

Output:

DIfferent Color methods:
Hexadecimal colors:In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb

Output:

RGB colors: In HTML , a color can be specified as an RGB value, using this formula: rgb (red,green,blue)

Code:

RGBA colors: RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Formula: rgb (red,green,blue,alpha)

Output:

HSLA colors: HSLA color values are an extension of HSL color values with an alpha channel - which specifies

the opacity for a color.hsla(hue, saturation, lightness, alpha)

Output:

.Identify color using photoshop and colorpicker

CHAPTER 9: Output: Use Different Borders in you web page for tables and table cell and table data

Borders

Solid: Defines a solid border.
Dotted: Defines a dotted border.
Dashed: Defines a dashed border.
None: Defines no border.
Double: Defines a double border.

Code:

Output:

Radius

Use Radius for the different table cells: The border-radius property defines the radius of the element's corners.
This property allows you to add rounded corners to elements!.This property can have from one to four values.

Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies
to bottom-right corner, and fourth value applies to bottom-left corner):

Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners,
and third value applies to bottom-right corner):

Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Code:

Output:

Border radius for table:

Output:

CHAPTER 10: Output: Use Different Margins in you web page for tables and table cell and table data

Margins: The CSS margin properties are used to create space around elements, outside of any defined borders.

1.Top: It gives space from the top of the window to the content.
2.Bottom: It gives space from the bottom of the window to the content.
3.Left: It gives space from the left of the window to the content.
4.Right: It gives space from the right of the window to the content.

Output:

CHAPTER 12: Output: Use Different Paddings in you web page for tables and table cell and table data

Padding:The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Top: It gives the space between the top of the border to the content.
Bottom: It gives the space between the bottom of the border to the content.
Left: It gives the space between the left side of the border to the content.
Right: It gives the space between the right of the border to the content.
Padding vs Margin: Padding is the space that's inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side with CSS. Margin is the space between the border and next element.

Output:

CHAPTER 13: Output: Use Different Height and widths for Html elements and from elements.

Height: The height and width properties are used to set the height and width of an element. The height and width properties
do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border,
and margin of the element.
Width: The width property sets the width of an element.

Code:

Output:

Max-Width: The max-width property is used to set the maximum width of an element.

Code:

Output:

Max-Height: The max-height property defines the maximum height of an element.

Code:

Output:

CHAPTER 14: Output: Apply different font elements to the static date in your sample html page

Fonts

1.Font family: The font family of a text is set with the font-family property.
2.Font color: It is used to give the color to the text.
3.Size: The font-size property sets the size of the text.
4.Weight: The font-weight property sets how thick or thin characters in text should be displayed.

Code:

Output:

CHAPTER 15: Output: Design sample page with two table and divs with header tags and use the below position for the headers

Position

Static:

Relative

Fixed

Absolute

Sticky

Code: <!doctype html>

<head>

<style>

#K1{

border-radius:10px;

background-color:#ccd9cf;

text-align:center;

border-style:hidden;

border-collapse:collapse;

position:absolute;

}

#k2{

position:static;

border-collapse:collapse;

}

</style>

</head>

<body>

<caption align=center>Student Details</caption>

<th>Branch</th></tr>

<tr><td>Nagesh</td><td>100</td><td>Hyderabad</td>

<tr><td>Pavan</td><td>101</td><td>Chennai</td>

<tr><td>Satwik</td><td>102</td><td>Bangalore</td>

<tr><td>Krupakar</td><td>103</td><td>Kolkata</td>

</table>

<caption align=center>Student Details</caption>

<th>Branch</th></tr>

<tr><td>Nagesh</td><td>100</td><td>Hyderabad</td>

<tr><td>Pavan</td><td>101</td><td>Chennai</td>

<tr><td>Satwik</td><td>102</td><td>Bangalore</td>

<tr><td>Krupakar</td><td>103</td><td>Kolkata</td>

</table>

</span>

</body>

</html>

Output:

CHAPTER 16: Output: Design multiple divs and apply the below overflow properties

Overflow

1.Visible: In this case the over flowed content is visible.
2.Hidden: In this case the over flowed content is hidden.
3.Scroll: In this case the over flowed content will be visible and a scroll bar option will come.
4.Auto: In this case the over flowed content will be visible and a scroll bar option will come.

Code:

Output:

z-Index: The z-index property specifies the stack order of an element.

z-Index: use z-index for multiple divs overlapping one on another

Code:

Output:

CHAPTER 17: Output: Design multiple divs and apply the below overflow properties

Display

Inline : In this case if we write any content inside the div tag by using another tag the whole content will display in the same line.
Block: In this case if we write any content inside the div tag by using another tag the whole content will display in the block wise..
None: In this case if we write any content inside the div tag by using another tag the content present in the sub tag won’t display.

Code: