Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
19 views

CSS Basic

All HTML and CSS Tags into one single File

Uploaded by

mohit
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

CSS Basic

All HTML and CSS Tags into one single File

Uploaded by

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

What is CSS?

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

Cascading Style Sheets (CSS) is a style sheet language used for


specifying the presentation and styling of a document written in a
markup language such as HTML or XML (including XML dialects
such as SVG, MathML or XHTML).

Why Use CSS?


CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

Simple HTML Document:

<!DOCTYPE html>
<html>
<head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</head>
</html>

CSS HTML Document:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>


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

</body>
</html>

CSS Saves a Lot of Work!


The style definitions are normally saved in external .css files.

CSS Syntax

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by


semicolons.

Each declaration includes a CSS property name and a value, separated by a


colon.

Multiple CSS declarations are separated with semicolons, and declaration


blocks are surrounded by curly braces.

Example
In this example all <p> elements will be center-aligned, with a red text color:

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

Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>

Example Explained
 P is a selector in CSS (it points to the HTML element you want to style:
<p>).
 color is a property, and red is the property value.
 text-align is a property, and center is the property value.

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)


 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)

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

Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

The 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;
}
Complete Example:-
<html>
<head>
<body>
<p>
my name is mohit kadwal
</p>

<p>
Assistant Professor
</p>

<style>
p {
text-align: center;
color: red;
}

</body>
</head>

Isme jitne bhi <p> paragraph aaege pure programm me vo sare Red
and center align ho jaege.

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

Complete Example:-
<html>
<head>
<body>
<p class="ID">
my name is mohit kadwal
</p>
<p>
Assistant professor
</p>
<style>
p.ID {
text-align: center;
color: red;
}
</body>
</head>
Isme jaha Class bana kar value pass ki he vahi change hoga sare
change nahi honge.

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>


The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:

* {
text-align: center;
color: blue;
}

Complete Example:-
<html>
<head>
<style>
* {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
<h6>hello</h6>
</body>
</html>

Jitne bhi selector diye he <p> and <H1-H6> and or bhi kuch vo
sare pr applicable hogi

The CSS Grouping Selector


The grouping selector selects all the HTML elements with the same style
definitions.

Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):

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

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

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

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example
In this example we have grouped the selectors from the code above:

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

Sare selectors ke alg alg style dene se acha he ek comman me


sabhi ka de do using sepration.
Complete Program:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

Example Example description

#firstname Selects the element with id="firstname"

.intro Selects all elements with class="intro"

p.intro Selects only <p> elements with class="intro"

* Selects all elements

p Selects all <p> elements

div, p Selects all <div> elements and all <p> elements

All CSS Simple Selectors


How To Add CSS
When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!

Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.

Example
External styles are defined within the <link> element, inside the <head>
section of an HTML page:

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

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

</body>
</html>

The required rel attribute specifies the relationship between the current document and the linked
document/resource.
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:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

Internal CSS
An internal style sheet may be used if one single HTML page has a unique
style.

The internal style is defined inside the <style> element, inside the head
section.

Example
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

Inline CSS
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

Example
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

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


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

</body>
</html>

CSS Comments
Comments are used to explain the code, and may help when you edit the
source code at a later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and
ends with */:

Example
/* This is a single-line comment */
p {
color: red;
}
CSS Colors
Colors are specified using predefined color names, or RGB (Red, Green,
Bule), HEX(hexadecimal ), HSL(Hue, Saturation, and Lightness), RGBA(Alpha),
HSLA values.

HEX Color Values


In HTML, 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 other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its


highest value (ff), and the other two (red and blue) are set to 00.

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

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

Experiment by mixing the HEX values below:

#ff6347

RED

ff

GREEN

63

BLUE

47
CSS Color Names
In CSS, a color can be specified by using a predefined color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray
CSS/HTML support 140 standard colors.

CSS Background Color


You can set the background color for HTML elements:

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color


You can set the color of text:

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color


You can set the color of borders:

Hello World
Hello World
Hello World
Example
<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:

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent: la(9, 100%, 64%,

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 Borders
The CSS border properties allow you to specify the style, width, and color
of an element's border.

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

The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).

Example
Demonstration of the different border styles:

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

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.


A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed 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
Demonstration of the different border widths:

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

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

Result:
5px border-width
medium border-width
2px border-width
thick border-width

ye outputs me border aaega yaha show nhi ho rha he.


Complete Program:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if it
is used alone. Use the "border-style" property to set the borders
first.</p>
</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.

Example
Demonstration of the different border colors:

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}

Result:

Red border
Green border
Blue border
ye outputs me border aaega yaha show nhi ho rha he.
Complete Program:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.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>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>

Specific Side Colors


The border-color 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-color: red green blue yellow; /* red top, green right,
blue bottom and yellow left */
}
Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right,
blue bottom and yellow left */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>The border-color property can have from one to four values
(for the top border, right border, bottom border, and the left
border):</p>
<p class="one">A solid multicolor border</p>
</body>
</html>
HEX Values
The color of the border can also be specified using a hexadecimal value
(HEX):

Example
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
p.two {
border-style: solid;
border-color: #0000ff; /* blue */
}
p.three {
border-style: solid;
border-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>The color of the border can also be specified using a
hexadecimal value (HEX):</p>
<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>
</body>
</html>

RGB Values
Or by using RGB values:

Example
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
p.two {
border-style: solid;
border-color: rgb(0, 0, 255); /* blue */
}
p.three {
border-style: solid;
border-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>The color of the border can also be specified using RGB
values:</p>

<p class="one">A solid red border</p>


<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>
</body>
</html>

HSL Values
You can also use HSL values:

Example
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
p.two {
border-style: solid;
border-color: hsl(240, 100%, 50%); /* blue */
}
p.three {
border-style: solid;
border-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>The color of the border can also be specified using HSL
values:</p>
<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>
</body>
</html>

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, 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
Set different margins for all four sides of a <p> element:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
The <div> tag defines a division or a section in an HTML document.

Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin
of 150px, a bottom margin of 100px, and a left margin of
80px.</div>
</body>
</html>

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, 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
Set different padding for all four sides of a <div> element:

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding
of 30px, a bottom padding of 50px, and a left padding of
80px.</div>
</body>
</html>

CSS Lists
Unordered Lists:
o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola

HTML Lists and CSS List Properties


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

Different List Item Markers


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

The following example shows some of the available list item markers:

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

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

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

ol.d {
list-style-type: lower-alpha;
}

Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

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

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

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

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

<p>Example of unordered lists:</p>


<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>


<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker


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

Example
ul {
list-style-image: url('sqpurple.gif');
}
Complete program:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<h2>The list-style-image Property</h2>
<p>The list-style-image property specifies an image as the list
item marker:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

ASSIGNMENT:-
Complete Program:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans,
which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot
or boiling water over cured leaves of the Camellia sinensis, an
evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-
Cola Company. The drink's name refers to two of its original
ingredients, which were kola nuts (a source of caffeine) and coca
leaves</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans,
which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot
or boiling water over cured leaves of the Camellia sinensis, an
evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-
Cola Company. The drink's name refers to two of its original
ingredients, which were kola nuts (a source of caffeine) and coca
leaves</li>
</ul>
</body>
</html>

Styling List With Colors


We can also style lists with colors, to make them look a little more
interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while
properties added to the <li> tag will affect the individual list items:

Complete programm:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
CSS table
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:

Firstname Lastname
Peter Griffin
Lois Griffin

Complete programm:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

You might also like