VIMALA GURUKUL

INTRODUCTION

TO

CSS

What is CSS?

CSS stand for Cascading Style Sheet.
Describe how HTML elements are to be displayed on screen.
CSS covers multiple layouts at once.

Syntax

Types of CSS

Inline CSS
Internal CSS
External CSS

INLINE CSS

Inline CSS allows you to apply a unique style to one HTML element at a time.

Example-

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS</title>

</head>

<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

</html>

INTERNAL CSS

An internal stylesheet holds CSS rules for the page in the head section of the HTML file.

Example-

<!DOCTYPE html>

<html>

<head>

<title>Internal</title>

<style>

body {background-color: green; }

h1 {color: maroon;

margin-left: 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 a file containing only CSS file.
It is used to define the style for many html pages.
To use an external style sheet, add a link to it in <head> section of the html page.

Example-

<!DOCTYPE html>

<html>

<head>

<title>External CSS</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks like:

Example -

body { background-color: lightblue; }

h1 { color: navy; margin-left: 20px; }

CSS Comments

Comments are used to explain the code may help and when you edit the source code at a later date.
Comments are ignore by browser.

Example -

/* use heading tag*/

h1 {background:pink;

color:red;

font-size:30px;}

CSS Selector

CSS selector are used to find (or select) the html elements you want to style.

There are many types of CSS Selector:-

CSS element selector
CSS id selector (#)
CSS class selector (.)
CSS universal selector (*) [apply to all]
CSS grouping selector

Example -

<!DOCTYPE html>

<html>

<head>

<title>Types of CSS Selector</title>

<style>

/*Element selector*/

h1 {color: blue;

font-size: 40px; }

/*ID selector*/

#text1 {color:green;}

/*Class selector*/

.text2 {color:yellow;}

/*Universal selector*/

* {background:skyblue;

text-align:center;}

/*Grouping selector*/

h1,h1,p {font-style:italic;}

</style>

</head>

<body>

<h1>Vimala Gurukul</h1>

<h2 id="text1">A world class computer education.</h2>

<div class="text2">Email:-vimalagurukul.com</div>

<p>Phone no.:- 7705887778</p>

</body>

</html>

CSS Borders

CSS border to set up a border around the html elements.
You can specify types of borders for your elements using border-style, border-color, border-width, border-image, and border-radius.

Syntax -

border : border-width border-style border-color;

Border-style

This border-style property is used to set the style of the borders.
The default value is none.

It includes the following style for the border:

dotted – dotted border-color
dashed – dash-line border
solid – normal thickness of border-color
double – thickness of the border twice the normal thickness
inset – border look like that it is merged into the page
outset – creating an illusion that the inside of the element is raised above the page
groove – the border style gets doubled
ridge – the border style gets fold
hidden – the border style gets hidden

Example -

<style>

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;}

p.none {border-style:none;}

p.hidden {border-style:hidden;}

p.mix {border-style:dotted dashed solid double;}

</style>

Border-width

This properties are used to set the width of borders.
Individual width of the border can be controlled by border-top-width, border-right-width, border-left-width and border-bottom-width.
You can also set all four borders at once with border-width property.

Example-

<body>

<h2>The border-width property</h2>

<p style="border-width:5px; border-style:solid;">Solid border whose width is 5px.</p>

<p style="border-width:15px; border-style:double;">Double border whose width is 15px.</p>

<p style="border-bottom-width:5px; border-top-width:10px; border-left-width:2px; border-right-width:15px; border-style:solid;">This is a border with four different.</p>

</body>

CSS borders as individual sides

There are also properties for specifies each of the borders (top, right, bottom, left).

Example-

<style>

p {border-top-style:dashed;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;}

</style>

CSS border shorthand properties

Example -

<style>

p {border:2px solid blue;}

</style>

Border-color

The border-color property is used to set the color of the four bordered.

The color can be shade by -

name - specify a color name like ‘red’.
HEX - specify a color HEX value like “ff0000”.
RGB – specify a color RGB value like “rgb(255,0,0).
HSL – specify a color HSL value like “hsl(0,100%,50%)”.

Example -

<style>

p.one {border-style:solid;

border-color:red green blue yellow;}

</style>

Working with Internal CSS

CSS Property -

- width: gives width to the html element in pixel or percentage.
- height: gives height to the html element in pixel or percentage.
- Background-color: gives background color to the html element in color-name or color-code.
- Float: gives direction to the html element in left or right.
- Font-size: it is used to define the size of text in pixel, or percentage are use.
- Color: it is used define color of text in color name or code are used.
- Font-weight: it is used to define of the boldness of the text in bold or in bolder are user.
- Font-style: it is used to change the style of the text in normal, italic or oblique.
- Font–family: it is used to change the font face of text in a “Times New Roman, Calibri, Arial”, etc.

By default font face is “Times New Roman”.

- Text-align: it is used to align the text in left/right/justify are used.
- Text-decoration: it is used to decorate the text in underline or none to used.
- Text-transform: it is used to define the case of the text in uppercase, lowercase, capitalize are used.
- Word-spacing: it is used to define the space between two words in pixel, percentage are used.
- Letter-spacing: it is used to define the space between letters or characters in pixel or percentage are used.
- Text-indent: it is used to define the indentation of the first line of the text in pixel or percentage are used.
- Line-height: it is used to specify the space between lines.

e.g. p{line-height:1.2}

CSS Margin –

The CSS margin properties are used to create space around elements outside of any define borders with CSS you have full control over the margin. There are properties for setting the margin for each side of an element (top, right, bottom and left).
Margin individual side -

- - 1. 1. margin-top
        margin-bottom
        margin-right
        margin-left

Note – negative values are allows.

Margin-shorthand property -
e.g. p {margin:25px 30px 45px 75px;}

CSS padding –

The CSS padding properties are used to generate space around and elements contain inside of any define border.
There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding – Individual sides

padding-top

- - 1. 1. padding-bottom
      2. padding-right
      3. padding-left

Padding-shorthand property -

p {padding:25px 30px 45px 75px;}

Box-shadow -

- - box-shadow: x-axis/y-axis/blur/range/color
  - box-shadow: 2px/10px/10px/5px/grey

note – negative values are allowed.

Text-shadow -

- - text-shadow: x-axis/y-axis/blur/color
  - text-shadow: 5px/4px/2px/green

CSS background properties –

The CSS background properties are used to define the background effects for elements .

These are five types of CSS background properties that html elements.

- - Background-color
  - background-image
  - background-attachment
  - background-repeat
  - background-position

Background-color – It specifies the background color of an element.
Syntax – background-color:colorname;

or background-color:red;

Background-image – It specifies an image to use a background of a element you can also set height and width a background-image.
Syntax – background-image:url(“photo.jpg”);

Background-repeat – By default, the background image property repeats an image both horizontally (x-axis) and vertically (y-axis).To control whether the background image should repeat or not, you can use the background repeat property.
Syntax – background-image:url(“photo.jpg”);

background-repeat: repeat-x/repeat-y/no-repeat

Background-attachment – The background set whether the background image will be fixed scroll when the page will scroll or scroll when the content is scroll.
Syntax – background-attachment: fixed/scroll;

note – scroll is default.

Background-position – It is used to control the position of the background image.
Syntax – background-image:url(“photo.jpg”);
background-position:center/left/right;

background-position:bottom center/left/right;

or background-size:cover;

background-size:700px(width) 250px(height);

Background Gradients colors
background-image:url(“photo.jpg”);
background-image:conic-gradient(red,green,blue);
background-image:linear-gradient(red,blue,yellow);
background-image:radial-gradient(red,green,blue);
background-image:repeating-conic-gradient(red10%,yellow10%);
background-image:repeating-linear-gradient(red,yellow10%,green10%);
background-image:repeating-radial-gradient(red,yellow10%,green10%);

Block properties

A block element always start on a new line. And fill up the horizontal space left and right on the web page the block value of the display property courses and element to be behave like block level element, like a <div> or <p> element.

The display property decides how the browser will display an element.

Example –

<!DOCTYPE html>

<html>

<head>

<title>Display properties</title>

<style>

.main {color:blue;

display:block/inline/none;}

</style>

</head>

<body>

A block line always <span class=”main”> start with a </span> new line, and fills up the horizontal space left or right on the web page.

</body>

</html>

Example – Inline-block, flex, float, list-item

Syntax -
display:flex;
display:inline-block;
float:left;

Navigation bar show with inline element

Example -

<!DOCTYPE html>

<html>

<head>

<title>Example of CSS display</title>

<style>

p {display:inline;

background:skyblue;

padding:10px;}

ul li {display:inline;

margin:10px;}

</style>

</head>

<body>

<p>Display a list of links as a horizontal menu</p>

<ul>

<li>HTML

<li>CSS

<li>Java

<li>JavaScript</li>

</ul>

</body>

</html>

Positioning properties

The positioning property set or element position to display on web page.

These are five important types of positioning method use for an element.

Static
Fixed
Relative
Absolute
Sticky

Example -

<!DOCTYPE html>

<html>

<head>

<title>Static</title>

<style>

div.static {position:static;

border:3px solid blue;}

</style>

</head>

<body>

<h2>Position:static;</h2>

<p>An element with position:static; is not positioned in any special way: it is always normal flow of the page.</p>

This div element has position:static;

</div>

</body>

</html>

Static - Static position is the default position
Syntax – position:static;

Fixed - To set element is fixed even if window scroll vertically or horizontally is fixed place.
Syntax – position:fixed;

Relative – An element with position:relative is position with relative to its normal position and will leave a gape at its normal position.
Syntax- position:relative;
top:20px;

Absolute – Position the element relative to the position of its first parent.
Syntax – position:absolute;

Sticky – It enables an elements to scroll down if the page can be scrolled up to a fixed point and then it gets fixed at a certain position after you have scroll a fixed area.
Syntax – position:sticky;

Positioning text in an image

i. Center text on the image

Example -

<!DOCTYPE html>

<html>

<head>

<title>Center text on the image</title>

<style>

.container {position: relative;}

.center {position: absolute;

top:50%;

width:100%;

text-align:center;

font-size:18px;}

img {width:100%;

height:auto;

opacity:0.3;}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Center text in an image</p>

<div class=”center”>Centered</div>

</div>

</body>

</html>

ii. Top left text on the image

Example -

.top left {position:absoulte;

top:8px;

left:16px;

font-size:18px;}

iii. Top right text on the image

Example -

.top right {position:absoulte;

top:8px;

right:16px;

font-size:18px;}

iv. Bottom left text on the image

Example -

.bottom left {position:absoulte;

bottom:8px;

left:16px;

font-size:18px;}

v. Bottom right text on the image

Example -

.bottom right {position:absoulte;

bottom:8px;

right:16px;

font-size:18px;}

CSS List

There are two types of CSS list-

Ordered list (ol)
Unordered list (ul)

There are three important style property or ordered and unordered list-

list-style-type
list-style-position
list-style-image

List-style-type

Example -

<!DOCTYPE html>

<html>

<title>list-style-type</title>

<style>

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:uppercase roman;}

ol.d {list-style-type:lowercase roman;}

</style>

</head>

<body>

<h2>The list-style-type property</h2>

<p>Example of Unordered list</p>

<li>Coffee

</ul>

<li>Coffee

</ul>

<p>Example of Unordered list</p>

<li>Coffee

</ol>

<li>Coffee

</ol>

</body>

</html>

List-style-position

Example -

<!DOCTYPE html>

<html>

<head>

<title>list-style-position</title>

<style>

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;

list-style-position:inside;}

ol.c {list-style-type:upperroman;}

ol.d {list-style-type:outside;}

</style>

</head>

<body>

<h2>The list-style-type property</h2>

<p>Example of Unordered list</p>

<li>Coffee

</ul>

<li>Coffee

</ul>

<p>Example of ordered list</p>

<li>Coffee

</ol>

<li>Coffee

</ol>

</body>

</html>

List-type-image

Example -

<!DOCTYPE html>

<html>

<head>

<title>list-type-image</title>

<style>

ul {list-style-image:url(“photo.jpg”);}

</style>

</head>

<body>

<h2>The list-style-image property</h2>

<p>The list-style-image property specifies an image as the item marker:</p>

<ul>

<li>Coffee

</ul>

</body>

</html>

CSS Table

Table border -
- table, th, td {border:2px solid blue;}
Full-width table -
- table {width:100%;}
Collapse table border -
- table {border-collapse:collapse;}
table width and height -
- table {width:100%;
  th {height:70px;}
CSS table alignment -

Horizontal alignment

td {text-alignment:left/center/right;}

Vertical alignment

td {height:70px;
text-align:top/middle/bottom;}

6. Table padding -

- th, td {padding:15px;
  text-align:center;}

td {border-bottom:1px;}

7. Hoverable table - Use the :hover selector on tr to highlight table rows on mouse over.

- tr:hover {background-color:green;}

8. Stripped table - For zebra stripped tables use the nth child selector and add a background color to all even or odd table rows.

- tr:nth-child(even/odd) {background-color:blue;}

9. Controling the table layout – The CSS table layout define the alogorithem to be used to layout the table cells, rows, and column. This property takes one of two values.

- Auto – The width of the table and it cells are adjusted to fit the content. This is default.
- Fixed – The horizontal layout of the table does not depend on the content of the cells, it depends on the table’s width, the width of the columns, and borders or cell spacing.

Example -
<!DOCTYPE>
<html>
<head>
<title>Controlling the table layout</title>
<style>

table {width:250px;

border-collapse:collapse;}

table,tr,th,td {border:1px solid black;}

.auto {table-layout:auto;}

.fixed {table-layout:fixed;}

td {width:50%;}

</style>

</head>

<body>

<h3>Different table layout</h3>

<caption>Auto layout</caption>

<tr>

<td>Ram Sharma</td>

</tr>

<tr>

<th<E-mail</th>

<td>ramsharma55@gmail.com</td>

</tr>

</table>

<table>

<caption>Fixed layout</caption>

<tr>

<td>Vivek sharma</td>

</tr>

<tr>

<td>viveksharma34@gmail.com</td>

</tr>

</table>

</body>

</html>

9. Empty cells – The empty-cells CSS property controls the borders and background of cells that have no visible content in a table using separate borders model. The empty cells property contains three values: show. Hide or inherit.

Example -

<!DOCTYPE html>

<html>

<head>

<title>Empty cells</title>

<style>

table {width:350px;

border-collapse:separate:}

table, th, td {border:1px solid black;}

table.empty-show {empty-cells:show;}

table.empty-hide {empty-cells:hide;}

</style>

</head>

<body>

<h3>Table with Empty cells</h3>

<tr>

<td>Shyam Yadav</td>

</tr>

<tr>

</tr>

</table>

<br>

<h3>Table with Hidden Empty cells</h3>

<tr>

<td>John Peter</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

11. Caption for table – The caption property sets the caption for the table. It is the name of the table.

Syntax -

Caption-side: Bottom – To set the caption at the bottom of the table.

Caption-side: Top – To set the caption at the top of the table.

Caption-side: Inherit

Example -
<!DOCTYPE>
<html>
<head>
<title>Caption of the table</title>
<style>

table, td,th {border:2px solid grey;}

caption {caption-side:bottom;}

</style>

</head>

<body>

<table>

<caption><strong>Table 1:</strong>Students Marks List</caption>

<tr>

<th>Marks</th>

</tr>

<tr>

<th>Akash</th>

</tr>

<tr>

<th>Naman</th>

<th>Singh</th>

</tr>

<tr>

<th>Sharma</th>

</tr>

</table>

</body>

</html>

Set font-size with pixel
e.g. p {font-size:20px;}
Set font-size with em
e.g. p {font-size:1.20em;}
To allow users to resize the text (in the browser menu), many developers use em instead of pixel.
First 1em is equal to the current font-size. The default text size in browsers in 16px. So the default size 1em=16px.
The size can be calculated from px to em using this formula -

pixels/16=em

e.g. - h1 {font-size:2.5em;}

16 x 2.5 = 4px

Responsive font-size

The text size can be set with a vw unit, which means the viewport width.
That way the text size will follow the size of the browser window.
Resize the browser window size in 1vw=1% of the viewport width. If the viewport is 50cm wide. 1vw=0.5cm.

CSS image gallery

Example -

<!DOCTYPE html>

<html>

<head>

<title>CSS Image Gallery</title>

<style>

div.gallery {margin:5px;

border:1px solid black;

float:left;

width:280px;}

div.gallery:hover {border:2px solid blue;}

div.gallery-image {width:100%;

height:auto;231

div.disc {padding:15px;

text-align:center;}

</style>

</head>

<body>

<img src=”URL” width=”600px” height=”600px”}

</a>

Add a discription of the image here.

</div>

</a>

Add a description of the image here.

</div>

</body>

</html>

Page updated

Google Sites

Report abuse

INTRODUCTION

TO

CSS

What is CSS?

Syntax

Types of CSS

INLINE CSS

INTERNAL CSS

EXTERNAL CSS

Example-

Here is how the "mystyle.css" file looks like:

CSS Comments

CSS Selector

CSS Borders

Border-style

Border-width

Border-color

Working with Internal CSS

Block properties

Navigation bar show with inline element

Positioning properties

Positioning text in an image

CSS List

CSS Table

7. Hoverable table - Use the :hover selector on tr to highlight table rows on mouse over.

Font size

Responsive font-size

CSS image gallery