Scribd
Upload
10 views

Unit 3

Uploaded by

makvanasamir204
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Unit 3

Uploaded by

makvanasamir204
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Unit-3 CSS

What is CSS?

Cascading Style Sheets is a style sheet language used for describing the presentation of a document
written in a markup language such as HTML or XML.

Advantages of CSS

 CSS saves time − You can write CSS once and then reuse the same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
Web pages as you want.
 Easy maintenance − To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it's a good idea to start using CSS in all the HTML pages to
make them compatible with future browsers.
 Platform Independence − The Script offer consistent platform independence and can
support latest browsers as well.

CSS Structure and syntax

A CSS Syntax rule consists of a selector, property, and its value. The selector points to the
HTML element where CSS style is to be applied. The CSS property is separated by semicolons.
It is a combination of selector name followed by the property: value pair that is defined for the
specific selector.

Syntax:

selector { Property: value; }

For instance, we have declared a heading tag(h1) along with having assigned some property:
value pair that is used to style the heading tag. Here, h1 is selector, { color: green; font-family:
sans-serif; } is a declaration block and it can contain one or more declarations separated by
semicolons, color: green; is a property: value pair that is applied to the HTML element in order
to style them.

h1 { color: green; font-family: sans-serif;}

Every declaration has a CSS property name and a value, separated by a colon and is surrounded
by curly braces. For declaring the multiple CSS properties, it can be separated by the semicolon.

Types of CSS

There are three types of CSS which are given below:


(1)Inline CSS
(2)Internal CSS
(3)External CSS

(1)Inline CSS: Inline CSS contains the CSS property in the body section attached with element
is known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:red; font-size:50px;>
example of inline stylesheet
</p>

</body>
</html>
(2)Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS
is embedded within the HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:pink;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">testing</div>

<div class ="geeks">


demo
</div>
</div>
</body>
</html>
(3)External CSS: External CSS contains separate CSS file which contains only style property with the help
of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css
extension and should be linked to the HTML document using link tag. This means that for each element,
style can be set only once and that will be applied across web pages.
Example: The file given below contains CSS property. This file save with .css extension. For Ex:
mystyle.css

body {
background-color:powderblue;
}
.main {
text-align:center;
}

Below is the HTML file that is making use of the created external style sheet

 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css"/>
</head>

<body>
<div class = "main">
A computer science portal for geeks
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values.

Colors are specified using predefined color names as per the following:

<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
</body>
</html>
CSS Text Colors
You can set the color of text as per the following:
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
</body>
</html>

CSS Border Color

You can set the color of borders:

<h1 style="border:2px solid Tomato;">Hello World</h1>


<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:

(1)RGB Value

In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0
and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

(2)HEX Value

In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff)
and the others are set to the lowest value (00).

To display black, set all values to 00, like this: #000000.

To display white, set all values to ff, like this: #ffffff.

(3)HSL Value

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the
form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is
blue.

Saturation is a percentage value. 0% means a shade of gray, and 100% is the full
color.

Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is


white

(4)RGBA Value

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

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

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

(5)HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel -
which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)


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

The following is example:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>


<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

---------------------------------------------------------------------------------------------------------------------------------------

CSS Background

The CSS background properties are used to add background effects for elements.

the following CSS background properties:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

(1) The background-color property specifies the background color of an element.


example:
body {
background-color: lightblue;
}

(2)The background-image property specifies an image to use as the background of


an element.

By default, the image is repeated so it covers the entire element.

Example:

body {
background-image: url("paper.gif");
}
(3)CSS background-repeat

By default, the background-image property repeats an image both horizontally and


vertically.

To repeat an image vertically, set background-repeat: repeat-y;

To repeat an image horizontally, set background-repeat: repeat-x;

Showing the background image only once is also specified by the background-
repeat: no-repeat property:

Example :
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

(4)CSS background-position

The background-position property is used to specify the position of the background


image.

Example:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

(5)The background-attachment property specifies whether the background image


should scroll or be fixed (will not scroll with the rest of the page):
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
(*)CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in
one single property. This is called a shorthand property.

When using the shorthand property the order of the property values is:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
---------------------------------------------------------------------------

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an
element's border.

CSS Border Style

(1)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

The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).
Example:
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
</body>
</html>

(2)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:

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

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and
35px left */
}

(3)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
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom
and yellow left */
}

(*) CSS Border - Individual Sides

In CSS, there are also properties for specifying each of the borders (top, right,
bottom, and left):

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

border-style: dotted solid double dashed;


o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

border-style: dotted solid double;

o top border is dotted


o right and left borders are solid
o bottom border is double

border-style: dotted solid;

o top and bottom borders are dotted


o right and left borders are solid

border-style: dotted;

o all four borders are dotted

(*) CSS Border - Shorthand Property

The border property is a shorthand property for the following individual border
properties:

 border-width
 border-style (required)
 border-color
example:
p {
border: 5px solid red;
}

(*) 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;
}
---------------------------------------------------------------------------

CSS Margins

The CSS margin properties 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

Tip: Negative values are allowed.

Example:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
(*) Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one
property.

The margin property is a shorthand property for the following individual margin
properties:

 margin-top
 margin-right
 margin-bottom
 margin-left

If the margin property has four values:

 margin: 25px 50px 75px 100px;


o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

If the margin property has three values:

 margin: 25px 50px 75px;


o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

If the margin property has two values:

 margin: 25px 50px;


o top and bottom margins are 25px
o right and left margins are 50px

If the margin property has one value:

 margin: 25px;
o all four margins are 25px

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

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

Note: Negative values are not allowed.

Example,
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

(*) Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one
property.

The padding property is a shorthand property for the following individual padding
properties:

 padding-top
 padding-right
 padding-bottom
 padding-left
So, here is how it works:

If the padding property has four values:

 padding: 25px 50px 75px 100px;


o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

If the padding property has three values:

 padding: 25px 50px 75px;


o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px

If the padding property has two values:

 padding: 25px 50px;


o top and bottom paddings are 25px
o right and left paddings are 50px

If the padding property has one value:

 padding: 25px;
o all four paddings are 25px

==================================================

CSS Height, Width

The CSS height and width properties are used to set the height and width of an
element.

CSS height and width Values

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
Example,

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

=====================================================================

CSS Text

(1)Text Color

The color property is used to set the color of the text. The color is specified by:

 a color name - like "red"


 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Example,

h1 {
color: green;
}

(2)Background Color

background-color property used to set background color.

Example,

body {
background-color: lightgrey;
}

(3)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;
}

(4)Text Align Last

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

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

(5)Text Direction

The direction and unicode-bidi properties can be used to change the text direction
of an element:

p {
direction: rtl;
unicode-bidi: bidi-override;
}

(6)Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

Example,

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

(7)Text Decoration

 text-decoration-line: The text-decoration-line property is used to add a


decoration line to text.
 text-decoration-color: The text-decoration-color property is used to set
the color of the decoration line.
 text-decoration-style: The text-decoration-style property is used to set
the style of the decoration line. Possible values are solid,
double,dotted,dashed,wavy etc
 text-decoration-thickness: The text-decoration-thickness property is used
to set the thickness of the decoration line.

Example,

h1 {
text-decoration-line: overline;

text-decoration-color: purple;

text-decoration-style: double;

text-decoration-thickness: 5px;
}

(*)text-decoration Shorthand Property

The text-decoration property is a shorthand property for:

 text-decoration-line (required)
 text-decoration-color (optional)
 text-decoration-style (optional)
 text-decoration-thickness (optional)
Example,

{
text-decoration: underline red double 5px;
}

(8)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;
}

(9)Text Spacing
Text spacing includes following properties:

 text-indent
 letter-spacing
 line-height
 word-spacing
 white-space

(10)Text Indentation

 The text-indent property is used to specify the indentation of the first line of
a text:
p {
text-indent: 50px;
}

(11)Letter Spacing

The letter-spacing property is used to specify the space between the characters in
a text.

h1 {
letter-spacing: 5px;
}

(12)Line Height

The line-height property is used to specify the space between lines:

p.big {
line-height: 1.8;
}

(13)Word Spacing

The word-spacing property is used to specify the space between the words in a text.

p.one {
word-spacing: 10px;
}

White Space

The white-space property specifies how white-space inside an element is handled.

p {
white-space: nowrap;
}

(14)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), blur effect (5px) and color red.
h1 {
text-shadow: 2px 2px 5px red;
}

===========================================================================

CSS Fonts

Generic Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a
sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a
modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They
create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

(1)The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

.p1 {
font-family: "Times New Roman", Times, serif;
}

(2)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;
}

p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

(3)Font Weight

The font-weight property specifies the weight of a font:

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

(4)Font Variant

The font-variant property specifies whether or not a text should be displayed in a


small-caps font.

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

(5)Font Size

The font-size property sets the size of the text.

h1 {
font-size: 40px;
}

h2 {
font-size: 1em; /* 1em=16px */
}

body {
font-size: 100%;
}
(*)Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width".

<h1 style="font-size:10vw">Hello World</h1>

(*)The font property is a shorthand property for:

 font-style: Specifies the font style for text


 font-variant: Specifies whether or not a text should be displayed in a small-
caps font.
 font-weight: Specifies the weight of a font
 font-size/line-height: Specifies the font size of text
 font-family: Specifies the font family for text

p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}

===========================================================================

CSS Icons

Icons can easily be added to your HTML page, by using an icon library.

->How To Add Icons

1.The simplest way to add an icon to your HTML page, is with an icon library, such
as Font Awesome.

2.Add the name of the specified icon class to any inline HTML element
(like <i> or <span>).

3.All the icons in the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)

There are three ways to add icons:

(1)Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to
add in the <head> section of your HTML page:

<script src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
Example,

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymou
s"></script>
</head>
<body>

<i class="fas fa-cloud"></i>


<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

(2) Bootstrap Icons

To use the Bootstrap glyphicons, add the following line inside the <head> section of
your HTML page:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>


<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>
(3) Google Icons

To use the Google icons, add the following line inside the <head> section of your
HTML page:

<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Materia
l+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

=========================================================================

CSS Links

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

Example,

/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

======================================================================

CSS List Properties


(1)The list-style-type property specifies the type of list item marker.

Possible values are circle, square, upper-roman, lower-roman, lower-alpha and


upper-alpha.

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

The list-style-type:none property can also be used to remove the


markers/bullets.

(2)The list-style-image property specifies an image as the list item marker:

ul {
list-style-image: url('sqpurple.gif');
}

Position The List Item Markers

(3)The list-style-position property specifies the position of the list-item markers


(bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list
item.

"list-style-position: inside;" means that the bullet points will be inside the list item.
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

(*)List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list
properties in one declaration:

ul {
list-style: square inside url("sqpurple.gif");
}

========================================================================

CSS Tables

Firstname Lastname
Peter Griffin
Lois Griffin

(1)Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a solid border for <table>, <th>, and <td> elements:

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

(2)Full-Width Table

The table above might seem small in some cases. If you need a table that should
span the entire screen (full-width), add width: 100% to the <table> element:

table {
width: 100%;
}
(3)Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed
into a single border:

table {
border-collapse: collapse;
}

(4)Table Width and Height

The width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th>
elements to 70px:

table {
width: 100%;
}

th {
height: 70px;
}

(*)CSS Table Alignment

(5)Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of
the content in <th> or <td>.

td {
text-align: center;
}

(6)Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th>
and <td> elements).

td {
height: 50px;
vertical-align: bottom;
}

(*)CSS Table Style

(7)Table Padding

To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:

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

(8)Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:

th, td {
border-bottom: 1px solid #ddd;
}

(9)Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over:

tr:hover {background-color: coral;}

(10)Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-
color to all even (or odd) table rows:

tr:nth-child(even) {background-color: #f2f2f2;}

(11)Table Color

The example below specifies the background color and text color of <th> elements:

th {
background-color: #04AA6D;
color: white;
}
(*)CSS Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to
display the full content:

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

===============================================

CSS Pseudo-classes

->What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

 Style an element when a user mouses over it


 Style visited and unvisited links differently
 Style an element when it gets focus

Syntax
selector:pseudo-class {
property: value;
}
Example,
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */


a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of
another element.

p:first-child {
color: blue;
}

following table contains Pseudo classes:

Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input> element

:first-child p:first-child Selects every <p> elements that is the first


child of its parent

:focus input:focus Selects the <input> element that has focus

:hover a:hover Selects links on mouse over


:last-child p:last-child Selects every <p> elements that is the last
child of its parent

:link a:link Selects all unvisited links

:nth-child(n) p:nth-child(2) Selects every <p> element that is the


second child of its parent

:nth-last-child(n) p:nth-last- Selects every <p> element that is the


child(2) second child of its parent, counting from the
last child

:only-child p:only-child Selects every <p> element that is the only


child of its parent

==================================================

CSS Pseudo-elements

->What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

 Style the first letter, or line, of an element


 Insert content before, or after, the content of an element

Syntax
selector::pseudo-element {
property: value;
}
following table contains Pseudo elements:

Selector Example Example description

::after p::after Insert something after the content of each <p>


element

::before p::before Insert something before the content of each <p>


element

::first-letter p::first-letter Selects the first letter of each <p> element

::first-line p::first-line Selects the first line of each <p> element

::marker ::marker Selects the markers of list items

::selection p::selection Selects the portion of an element that is selected by a


user

Example,

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}

h1::before {
content: url(smiley.gif);
}

h1::after {
content: url(smiley.gif);
}

::marker {
color: red;
font-size: 23px;
}

::selection {

color: red;

background: yellow;

You might also like