CSS

Cascaded Style Sheet

VIGHNESH P
SUBJECT MATTER EXPERT
ETHNOTECH ACADEMY
CSS
 CSS stands for Cascading Style Sheet.
 CSS is used to design HTML tags.
 CSS is a widely used language on the web.
 HTML, CSS and JavaScript are used for web designing. It
helps the web designers to apply style on HTML tags.
 It is a style sheet language which is used to describe the look
and formatting of a document written in markup language.
These are the three major benefits of CSS:

1) Solves a big problem

 Before CSS, tags like font, color, background style, element alignments,

border and size had to be repeated on every web page. This was a very
long process. For example: If you are developing a large website where
fonts and color information are added on every single page, it will be
become a long and expensive process. CSS was created to solve this
problem. It was a W3C recommendation.

2) Saves a lot of time

 CSS style definitions are saved in external CSS files so it is possible to

change the entire website by changing just one file.

3) Provide more attributes

 CSS provides more detailed attributes than plain HTML to define the

look and feel of the website.

CSS Syntax
 A CSS rule set contains a selector and a declaration block.

Selector{Property1: value1; Property2: value2; ..........;}

 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:
◦ color: blue;
◦ font-size: 12 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 “blue" 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

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
CSS Element Selector

 The element selector selects HTML elements based on the

element name.

Example:
 Here, all <p> elements on the page will be center-aligned,

with a red text color:

p{
text-align: center;
color: red;
}
CSS 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.

Example:
 The CSS rule below will be applied to the HTML element with

id="para1":

#para1 {
text-align: center;
color: red;
}
 An id name cannot start with a number!
CSS class Selector
 The class selector selects HTML elements with a specific class

attribute.
 It is used with a period character . (full stop symbol) followed

by the class name.

Example:
 In this example all HTML elements with class="center" will

be red and center-aligned:

.center {
text-align: center;
color: red;
}
 A class name should not be started with a number.
 You can also specify that only specific HTML elements should be
affected by a class.
Example:
 In this example only <p> elements with class="center" will be red

and center-aligned:
p.center {
text-align: center;
color: red;
}

 HTML elements can also refer to more than one class.

Example:
 In this example the <p> element will be styled according to

class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>
CSS Universal Selector

 The universal selector is used as a wildcard character.

 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: green;
}
CSS Group Selector

 The grouping selector is used to select all the elements with the same style
definitions.
 Grouping selector is used to minimize the code. Commas are used to separate

each selector in grouping.

Example: h1, h2, p {
h1 { text-align: center;
text-align: center; color: red;
color: red; }
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
CSS Comments
 CSS comments are not displayed in the browser, but they can
help document your source code.
 Comments are ignored by browsers.
 A CSS comment is placed inside the <style> element, and starts
with /* and ends with */.
 You can add comments wherever you want in the code.
 Comments can also span multiple lines.

Example: /* This is
/* This is a single-line comment */ a multi-line
p{ comment */
color: red; /* Set text color to red */
}
 <!DOCTYPE html>
 <html>
 <head>
 <script type="text/javascript"
src="scripts.js"></script>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 <P>I have a lavender background!</P>
 <H1> I am blue text </H1>
 </body>
 </html>
 P{
 width: 100%;
 height: 200px;
 background-color: lavender;
 }
 H1{
 Width 50%; background-color: Green;}
 <!DOCTYPE html>

 <html>
 <head>
 <style>
 P{
 width: 100%;
 height: 200px;
 background-color: Red
 }
 H1{
 Width 50%; background-color: Yellow;}
 </style>
 </head>
 <body>
 <P>I have a lavender background!</P>
 <H1> I am blue text </H1>
 </body>
 </html>
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
 <body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>
 <!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</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.
Inline CSS
 Inline CSS is used to apply CSS on a single line or element.
Example: <p style="color:blue">Hello CSS</p>

Internal CSS
 Internal CSS is used to apply CSS on a single document or page. It can
affect all the elements of the page. It is written inside the style tag within
head section of html.
Example:
<style>
p{color:blue}
</style>
External CSS
External CSS is used to apply CSS on multiple pages or all
pages. Here, we write all the CSS code in a css file. Its
extension must be .css for example style.css.
Example:
p{color:blue}
 You need to link this style.css file to your html pages like this:

<link rel="stylesheet" type="text/css" href="style.css">

 The link tag must be used inside head section of html.
 .white
{
 background-color=grey}
CSS Backgrounds

CSS background property is used to define the background

effects on element. There are 5 CSS background properties
that affects the HTML elements:

◦ background-color
◦ background-image
◦ background-repeat
◦ background-attachment
◦ background-position
CSS background-color
 The background-color property is used to specify the

background color of the element.

Example:
 The background color of a page is set like this:

body {
background-color: lightblue;
}
Note:
 With CSS, a color is most often specified by:

◦ a valid color name - like "red"

◦ a HEX value - like "#ff0000"
◦ an RGB value - like "rgb(255,0,0)"
CSS Background Image
 The background-image property is used to set an image as a background of
an element.
 By default the image covers the entire element.

Example:
 Set the background image for a page:

body {
background-image: url("paper.jpeg");
}
 When using a background image, use an image that does not disturb the text.

 The background image can also be set for specific elements, like the <p>

element:
Example:
p{
background-image: url("paper.jpeg");
}
CSS Background Repeat
 By default, the background-image property repeats the
background image horizontally and vertically. Some images
are repeated only horizontally or vertically.
Example:
body {
background-image: url(" paper.jpeg ");
}
 If the image above is repeated only horizontally set,

background-repeat: repeat-x;
 To repeat an image vertically, set

background-repeat: repeat-y;
 Showing the background image only once is also specified by
the background-repeat property:
Example:
 Show the background image only once:

body {
background-image: url(“paper.jpeg");
background-repeat: no-repeat;
}
 The background image is placed in the same place as the text.
We have to change the position of the image, so that it does
not disturb the text too much.
CSS background-position

 The background-position property is used to specify the

position of the background image.
Example:
 Position the background image in the top-right corner:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
 You can set the following positions:

Center,top,bottom,left,right
CSS Background Attachment
 The background-attachment property is used to specify if the background
image is fixed or scroll with the rest of the page in browser window.
 If you set fixed the background image then the image will not move during
scrolling in the browser.
Example:
 Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
 To Specify that the background image should scroll with the rest of the page
background-attachment: scroll;
CSS Borders

 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:

 border-style
 border-color
 border-width
 border-radius
CSS border-style
 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
◦ ridge - Defines a 3D ridged border. The effect depends on the border-
color value
◦ inset - Defines a 3D inset border. The effect depends on the border-
color value
◦ outset - Defines a 3D outset border. The effect depends on the border-
color value
◦ none - Defines no border
◦ hidden - Defines a hidden border
CSS Border Width
 The border-width property specifies the width of the four borders.

 The width can be set as a specific size (in px, pt, cm, em, etc) or

by using one of the three pre-defined values: thin, medium, or

thick.
Example:
 p.one {
border-style: solid;
border-width: 5px;
}

p.four {
border-style: dotted;
border-width: thick;
}
 The border-width property can have from one to four values
(for the top border, right border, bottom border, and the left
border):
Example:
p.one {
border-style: solid;
border-width: 5px 20px;
/* 5px top and bottom, 20px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px;
/* 25px top, 10px right, 4px bottom and 35px left */
}
 <!DOCTYPE html>
 <html>
 <head>
 <title>Password Input Control</title>
 </head>
 <body>
 <form >
 User ID : <input type = "text" name = "user_id" />
 <br>
 Password: <input type = "password" name = "password" />
 </form>
 </body>
 </html>
CSS Border Color
 The border-color property is used to set the color of the four

borders.
 The color can be set by:

◦ name - specify a color name, like "red"

◦ HEX - specify a HEX value, like "#ff0000"
◦ RGB - specify a RGB value, like "rgb(255,0,0)"
◦ HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
◦ transparent
Note: If border-color is not set, it inherits the color of the
element.
 The border-color property is not used alone. It is always used
with other border properties like "border-style" property to set
the border first otherwise it will not work.
Example:
 p.one {

border-style: solid;
border-color: red;
}
p.two {
border-style: dotted;
border-color: hsl(0, 100%, 50%);
}
 The border-color property can have from one to four values (for

the top border, right border, bottom border, and the left border).
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
CSS Border Sides

 If the border-style property has four values:

 border-style: dotted solid double dashed;
◦ top border is dotted
◦ right border is solid
◦ bottom border is double
◦ left border is dashed
 If the border-style property has three values:
 border-style: dotted solid double;
◦ top border is dotted
◦ right and left borders are solid
◦ bottom border is double
 If the border-style property has two values:
 border-style: dotted solid;
◦ top and bottom borders are dotted
◦ right and left borders are solid
 If the border-style property has one value:
 border-style: dotted;
◦ all four borders are dotted
Example:
 /* Four values */

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

/* Three values */
p{
border-style: dotted solid double;
}

/* Two values */
p{
border-style: dotted solid;
}

/* One value */
p{
border-style: dotted;
}
 CSS Rounded Borders
 The border-radius property is used to add rounded borders to an element.

Example:
 p{

border: 2px solid red;

border-radius: 5px;
}

 p.normal {
border: 2px solid red;
padding: 5px;
}

p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
CSS Margins
 Margins are used to create space around elements, outside of any defined
borders.
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
 inherit - specifies that the margin should be inherited from the parent
element
Example:
 Set different margins for all four sides of a <p> element:

 p{

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

OR

 Use the margin shorthand property with four values:

 p{
margin: 25px 50px 75px 100px;
}
CSS Padding
 Padding is used to create space around an element's content, inside of any

defined borders.
 There are properties for setting the padding for each side of an element

(top, right, bottom, and left).

 CSS has properties for specifying the padding for each side of an element:
◦ padding-top
◦ padding-right
◦ padding-bottom
◦ padding-left

 All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent
element
Example:
 Set different padding for all four sides of a <div> element:

 div {

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

 Use the padding shorthand property with four values:

 div {
padding: 25px 50px 75px 100px;
}
 If the padding property has three values:
 padding: 25px 50px 75px;

◦ top padding is 25px

◦ right and left paddings are 50px
◦ bottom padding is 75px
Example:
 div {

padding: 25px 50px 75px;

}
 If the padding property has two values:

 padding: 25px 50px;

◦ top and bottom paddings are 25px

◦ right and left paddings are 50px
 If the padding property has one value:

 padding: 25px;

◦ all four paddings are 25px

CSS Height, Width and Max-width
 The CSS height and width properties are used to set the height
and width of an element.
 The CSS max-width property is used to set the maximum 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.
 The height and width properties may have the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value
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: margins, borders,
padding, and the actual content.
The image below illustrates the box model.
Border Field
 It is a region between the padding-box and the margin. Its proportions

are determined by the width and height of the boundary.

Margin Field
 This segment consists of the area between the boundary and the edge

of the border.
 The proportion of the margin region is equal to the margin-box width

and height. It is better to separate the product from its neighbor nodes.
Padding Field
 This field requires the padding of the component. This area is the space

around the subject area and inside the border-box. The height and the
width of the padding box decide its proportions.
Content Field
 Material such as text, photographs, or other digital media is included in

this area.
CSS Outline
 An outline is a line drawn outside the element's border.
 It facilitates you to draw an extra border around an element to
get visual attention.

 CSS has the following outline properties:

◦ outline-style
◦ outline-color
◦ outline-width
◦ outline-offset
◦ outline
CSS Outline Style

 The outline-style property specifies the style of the outline, and can
have one of the following values:

◦ dotted - Defines a dotted outline

◦ dashed - Defines a dashed outline
◦ solid - Defines a solid outline
◦ double - Defines a double outline
◦ groove - Defines a 3D grooved outline
◦ ridge - Defines a 3D ridged outline
◦ inset - Defines a 3D inset outline
◦ outset - Defines a 3D outset outline
◦ none - Defines no outline
◦ hidden - Defines a hidden outline
CSS Outline Width

 The outline-width property specifies the width of the outline, and can have
one of the following values:
◦ thin (typically 1px)
◦ medium (typically 3px)
◦ thick (typically 5px)
◦ A specific size (in px, pt, cm, em, etc)

Example:
 p.ex1 {

border: 1px solid black;

outline-style: solid;
outline-color: red;
outline-width: thin;
}
CSS Outline Color
 The outline-color property is used to set the color of the outline.
 The color can be set by:

◦ name - specify a color name, like "red"

◦ HEX - specify a hex value, like "#ff0000"
◦ RGB - specify a RGB value, like "rgb(255,0,0)"
◦ HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
◦ invert - performs a color inversion (which ensures that the outline is
visible, regardless of color background)
Example:
 p.ex1 {

border: 2px solid black;

outline-style: solid;
outline-color: red;
}
CSS Outline Offset
 The outline-offset property adds space between an outline and

the edge/border of an element.

 The space between an element and its outline is transparent.

Example
 p{

margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Difference between Border and Outline

 At first glance, border and outline look similar, but there are
some very important differences between them:

 It is not possible to apply a different outline width, style and

color for the four sides of an element while in border; you can
apply the provided value for all four sides of an element.

 The border is a part of element's dimension while the outline

is not the part of element's dimension. Means, it doesn't matter
how thick an outline you apply to the element, the dimensions
of it won't change.
CSS Text
 CSS has a lot of properties for formatting text.
Text Color and Background Color
Example:
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}
CSS Text Alignment
 The text-align property is used to set the horizontal alignment of a
text.
 A text can be left or right aligned, centered, or justified.

Example:
 h1 {

text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
 When the text-align property is set to "justify", each line is
stretched so that every line has equal width, and the left and right
margins are straight (like in magazines and newspapers):
Example:
 div {

text-align: justify;
}

 The text-align-last property specifies how to align the last line of

a text.
Example:
 Align the last line of text in three <p> elements:

 p.a { text-align-last: right; }

p.b { text-align-last: center; }

p.c { text-align-last: justify; }
 CSS Text Decoration
 The text-decoration-line property is used to add a decoration line to text.

 You can combine more than one value, like overline and underline to display

lines both over and under a text.

Example:
 h1 {

text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p{
text-decoration-line: overline underline;
}
 All links in HTML are underlined by default. Sometimes you
see that links are styled with no underline. The text-
decoration: none; is used to remove the underline from links,
like this:
Example:
 a{

text-decoration: none;
}
All CSS text-decoration Properties
 text-decoration

◦ Sets all the text-decoration properties in one declaration

 text-decoration-color

◦ Specifies the color of the text-decoration

 text-decoration-line

◦ Specifies the kind of text decoration to be used (underline,

overline, etc.)
 text-decoration-style

◦ Specifies the style of the text decoration (solid, dotted, etc.)

 text-decoration-thickness

◦ Specifies the thickness of the text decoration line

 CSS Text Transformation
 The text-transform property is used to specify uppercase and lowercase letters

in a text.
 It can be used to turn everything into uppercase or lowercase letters, or

capitalize the first letter of each word

Example:
 p.uppercase {

text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
CSS Text Spacing
 text-indent
◦ The text-indent property is used to specify the indentation of the
first line of a text
 letter-spacing
◦ The letter-spacing property is used to specify the space between
the characters in a text.
 line-height
◦ The line-height property is used to specify the space between
lines
 word-spacing
◦ The word-spacing property is used to specify the space between
the words in a text.
 white-space
◦ The white-space property specifies how white-space inside an
element is handled.
CSS Text Shadow
 The text-shadow property adds shadow to text.

 In its simplest use, you only specify the horizontal shadow (2px)

and the vertical shadow (2px).

Example:
h1 { text-shadow: 2px 2px; }

 To add a color (red) to the shadow

h1 { text-shadow: 2px 2px red; }

 To add a blur effect (5px) to the shadow

h1 { text-shadow: 2px 2px 5px red; }
 <html>
 <style>
 p{
 color: yellow;
 text-align: center;
 background-color: red;
 text-decoration-line: overline underline;
 text-decoration-color: yellow;
 text-decoration-thickness: 20px;
 text-shadow: 50px 20px green;
 }
 </style>
 <body>
 <P> Hi hello Bye! </P>
 </body>
 </html>
CSS Fonts
 The font-size and font-family values are required. If one of the other
values is missing, their default value are used.
 font-style

 font-variant

 font-weight

 font-size/line-height

 font-family

font-style
 The font-style property is mostly used to specify italic text. This

property has three values:

◦ normal - The text is shown normally
◦ italic - The text is shown in italics
◦ oblique - The text is "leaning" (oblique is very similar to italic, but
less supported)
p.normal {
font-style: normal;
}

Font Variant
 The font-variant property specifies whether or not a text should be

displayed in a small-caps font.

 In a small-caps font, all lowercase letters are converted to

uppercase letters. However, the converted uppercase letters appears

in a smaller font size than the original uppercase letters in the text.

p.small {
font-variant: small-caps;
}
Font Weight
 The font-weight property specifies the weight of a font:

Example:
 p.normal {

font-weight: normal;
}

p.thick {
font-weight: bold;
}
Font Size
 The font-size property sets the size of the text.

 If you do not specify a font size, the default size for normal text,

like paragraphs, is 16px (16px=1em).

h1 {
font-size: 40px;
}
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
body {
font-size: 100%;
}
In CSS there are five generic font families:

 Serif fonts have a small stroke at the edges of each letter. They
create a sense of formality and elegance.

 Sans-serif fonts have clean lines (no small strokes attached).

They create a modern and minimalistic look.

 Monospace fonts - here all the letters have the same fixed
width. They create a mechanical look.

 Cursive fonts imitate human handwriting.

 Fantasy fonts are decorative/playful fonts.

Best Web Safe Fonts for HTML and CSS

 The following list are the best web safe fonts for HTML
and CSS:
◦ Arial (sans-serif)
◦ Verdana (sans-serif)
◦ Helvetica (sans-serif)
◦ Tahoma (sans-serif)
◦ Trebuchet MS (sans-serif)
◦ Times New Roman (serif)
◦ Georgia (serif)
◦ Garamond (serif)
◦ Courier New (monospace)
◦ Brush Script MT (cursive)
Font Shorthand
 It is also possible to specify all the individual font properties

in one property.

Example:
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
CSS Links
 With CSS, links can be styled in many different ways.

 Links can be styled differently depending on what state they are in.

 The four links states are:

◦ a:link - a normal, unvisited link

◦ a:visited - a link the user has visited
◦ a:hover - a link when the user mouses over it
◦ a:active - a link the moment it is clicked
 When setting the style for several link states, there are some order

rules:
◦ a:hover MUST come after a:link and a:visited
◦ a:active MUST come after a:hover
Example:
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
CSS Lists

 In HTML, there are two main types of lists:

◦ unordered lists (<ul>) - the list items are marked with
bullets
◦ ordered lists (<ol>) - the list items are marked with numbers
or letters

 The CSS list properties allow you to:

◦ Set different list item markers for ordered lists
◦ Set different list item markers for unordered lists
◦ Set an image as the list item marker
◦ Add background colors to lists and list items
The CSS properties to style the lists are given as follows:
 list-style-type: This property is responsible for controlling the

appearance and shape of the marker.

 list-style-image: It sets an image for the marker instead of the

number or a bullet point.

 list-style-position: It specifies the position of the marker.

 list-style: It is the shorthand property of the above properties.

 marker-offset: It is used to specify the distance between the

text and the marker.
Example:
ul.a {
list-style-type: circle;
list-style-position: outside;
}

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

ol.c {
list-style-type: upper-roman;
list-style-image: url('star1.png')

ol.d {
list-style-type: lower-alpha;
}
CSS Tables
 We can apply style on HTML tables for better look and feel.
There are some CSS properties that are widely used in
designing table using CSS:
◦ border
◦ border-collapse
◦ padding
◦ width
◦ height
◦ text-align
◦ color
◦ background-color
Example:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: yellowgreen;
}
table#alter tr:nth-child(odd) {
background-color: lightpink;
}
table#alter th {
color: white;
background-color: indianred;
}
</style>
<table id="alter">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
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.
 The default display value for most elements is block or inline.

Syntax: display : value;

These are following CSS display values which are commonly used.
 display: inline;

 display: inline-block;

 display: block;

 display: run-in;

 display: none;
Block-level Elements
 A block-level element always starts on a new line and takes up

the full width available (stretches out to the left and right as far
as it can).
Examples:
◦ <div>
◦ <h1> - <h6>
◦ <p>
◦ <form>
◦ <header>
◦ <footer>
◦ <section>
 Inline Elements
 An inline element does not start on a new line and only takes up as

much width as necessary.

 This is an inline <span> element inside a paragraph.

Examples:
◦ <span>
◦ <a>
◦ <img>
p{
display: inline-block;
}
a{
display: block;
}
h1.hidden {
visibility: hidden;
}
span {
display: block;
 <divclass="topnav">
<a class="active" href="#home">H
ome</a>
<a href=“link file">News</a>
<a href=“link file">Contact</a>
<a href=“link file">About</a>
</div>
 /* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Add a color to the active/current link */

.topnav a.active {
background-color: #04AA6D;
color: white;
}
 <!-- Side navigation -->
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<!-- Page content -->

<div class="main">
...
</div>
 /* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}

/* The navigation menu links */

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}

/* Style page content */

.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding
and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}