CSS3

Introduction

The CSS stands for ‘Cascading Style Sheets’. The CSS is used to design the look and feel of the HTML websites. The CSS styles the HTML element in your web design or website. In the earlier days of web design, all design and formatting were done using the HTML formatting styling of which some are applied today.

The CSS has now separated the formatting of the website from the design. For example, if you apple any formatting in the CSS, it will apply similar tag throughout the website. That is to say, any formatting given to the <h1> tag, will apply to other <h1>, unless specified

Syntax

The CSS rule consists of a selector and a declaration block:

body { //the selector

background-color: black; //declaration

font-size: 14px; //declaration

}

Breakdown of the declaration: {

body = selector of the block

background-color = property

black = value

font-size = property

14px = value

Block declaration are surrounded by curly braces while multiple CSS declarations are separated with semicolons.

Example:

p, li, h1 {

color: red;

}

It must be saved with the prefix .css

For example: styles.css

Types of CSS

The html styles are used to improve presentation of the websites. That could be the fonts, colours, alignment of texts and images, borders, backgrounds and other elements. The styles can be:

Inline Styles;

External Styles; and

Embedded Styles.

Inline Style Sheet – putting the CSS rules directly into the start tag.

External Styles – External style sheet holds all the style rules in a separate document that you can link from any HTML document on your site.

Embedded Styles – This is a style sheet declared in the head section of the document and apply only to the document to which it is referred to.

Inline Styles

Inline Style Sheet – putting the CSS rules directly into the start tag.

<!DOCTYPE html>

<head>

<title>Inline Styles in HTML</title>

</head>

<body>

<h1 style=”color:red;font-size:30px;”>I am the Conqueror</h1>

<p style=”color:green;font-size:18px;”> I am the Conqueror.</p>

<div style=”color:green; font-size:18px;”> I am the Conqueror.</div>

</body>

</html>

Embedded Styles

Embedded Styles – This is a style sheet declared in the head section of the document and apply only to the document to which it is referred to.

<!DOCTYPE html>

<head>

<title>Document</title>

body { background-color: YellowGreen; }

h1 { color: blue; }

p { color: red; }

</style>

</head>

<body>

<h1>I am the Conqueror</h1>

<p>I am the Overcomer.</p>

</body>

</html>

External Style Sheets

External Styles – External style sheet holds all the style rules in a separate document that you can link from any HTML document on your site.

To do this, you have to create a folder and name it ‘css’. Create a file in the folder and name it ‘style.css’ and save it as such. Link it as in the exercise with ‘<link rel=”stylesheet” href=”css/style.css”>’ and run it.

Before you save it enter the following:

body {

background-color: pink;

}

h1 {

color: blue;

}

P {

color: red;

}

<!DOCTYPE html>

<head>

<title>External Style Sheet</title>

</head>

<body>

<h1>I am the Conqueror</h1>

<p>I can do all things through Christ who strengthens me..</p>

</body>

</html>

Importing External Style

<!DOCTYPE html>

<head>

<title>Importing Style Sheet </title>

@import url(“css/style.css”);

p {

color: blue;

font-size: 16px;

}

</style>

</head>

<body>

<h1>I am the Conqueror</h1>

<p>I can do all things through Christ who strengthens me.</p>

</body>

</html>

CSS Simple Selectors

Selector name	What does it select	Example
Element selector (sometimes called a tag or type selector)	All HTML elements of the specified type.	p selects <p>
ID selector	The element on the page with the specified ID. On a given HTML page, each id value should be unique.	#my-id selects <p id=”my-id”> or <a id=”my-id”>
Class selector	The element(s) on the page with the specified class. Multiple instances of the same class can appear on a page.	.my-class selects <p class=”my-class”> and <a class=”my-class”>
Attribute selector	The element(s) on the page with the specified attribute.	img[src] selects <img src=”myimage.png”> but not <img>
Pseudo-class selector	The specified element(s), but only when in the specified state. (For example, when a cursor hovers over a link.)	a:hover selects <a>, but only when the mouse pointer is hovering over the link.

CSS Selectors

Selectors are aspects of the css which allows you to target certain elements of the HTML and properties of the css blocks to be formatted in certain fashions. For example:

CSS Selectors

Simple selectors – The selection of elements can be based on type, id and class.

HTML element such as an <h1>.

h1 {

}

target an id:

#nav{ }

target a class:

.nav {

}

Selector lists

If you have more than one element which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual elements.

h1 {

color: blue;

}

.p {

color: blue;

}

The same can be written in this way:

h1, .p {

color: blue;

}

They can also be done in this way for more clarity:

h1,

.p {

color: blue;

}

If any selector is invalid the whole rule will be ignored.

h1 {

color: blue;

}

..p {

color: blue;

}

The same can be written in this way:

h1, ..p {

color: blue;

}

They can also be done in this way for more clarity:

h1,

..p {

color: blue;

}

Attribute selectors

Gives you different ways to select elements based on certain attributes on an element:

a[title] { }

a[href=”https://tjicom.com”] { }

Pseudo-classes and elements

The pseudo-classes style certain states of an element. The :hover pseudo-class selects an element only when it is being hovered over by the mouse pointer:

a:hover { }

**Universal Selector (*)**

(*) selects all HTML elements on the page.

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

Combinators

CSS Colors

Colors are defined by their names. In CSS, colors are specified by using predefined colour names.

CSS Colors are specified in the following ways:

Color keywords = “black”, “green”, “blue”, “red”, etc.

You can therefore set text colors as:

CSS text Colors

<!DOCTYPE html>

<html>

<body>

<h3 style=”color:blue;”>The Conqueror</h3>

<p style=”color:red;”>I am the winner!</p>

<p style=”color:green;”>I am the overcomer!.</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>CSS Colors</title>

<style>

body {

background-color: black;

}

h1, p {

color: blue;

}

</style>

</head>

<body>

<h1>Conqueror</h1>

<p>I can do all things.</p>

</body>

</html>

CSS HEX Value

The hexadecimal value in the form:

#rrggbb

The rr(red), gg(green) and the bb(blue) which is same as the hexadecimal values 00-255.

HEX value – like “#ff0000”, “#00ff00”,

<!DOCTYPE html>

<head>

<title>CSS Colors</title>

<style>

body {

background-color: #000000;

}

h1 {

color: #ffffff;

}

p {

color: #00ff00;

}

</style>

</head>

<body>

<h1>Conqueror</h1>

<p>I can do all things.</p>

</body>

</html>

RGB Colors

Colors can also be specified in RGB in this formula:

rgb(red, green, blue)

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

The highest is 255 which is red and the lowest is 0 which is black.

RGB value of “rgb(255, 0, 0)” is red.

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Note: The higher the values, the lighter the colors.

RGBA Value

This is an extension of the RGB with alpha and the number is from 0.0 to 1.0. The formula is: rgba(red, green, blue, alpha)

<!DOCTYPE html>

<html>

<body>

</body>

</html>

HSL Value

Colors are specified using hue, saturation, and lightness (HSL) as::

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

<!DOCTYPE html>

<html>

<body>

</body>

</html>

CSS Background

The background property in CSS allows the control of the background of any element. It gives the opportunity to format the look and feel of the background by manipulating the CSS properties.

A page background can be set as:

body {
background-color: black; //or can be set #000000
}

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: green;

}

div.first {

opacity: 0.1;

}

div.second {

opacity: 0.3;

}

div.third {

opacity: 0.6;

}

Opacity

Opacity property specifies the opacity/transparency of an element. It takes the value from 0.0 – 1.0. Lowest is transparent:

</style>

</head>

<body>

<h1>Transparent Background</h1>

<p>Make the text inside fully transparent:</p>:</p>

<h1>opacity 0.1</h1>

</div>

<h1>opacity 0.3</h1>

</div>

<h1>opacity 0.6</h1>

</div>

<div>

<h1>opacity 1 (default)</h1>

</div>

</body>

</html>

RGBA Transparency

This is an extension of the RGB with alpha and the number is from 0.0 to 1.0. The formula is: rgba(red, green, blue, alpha)

<!DOCTYPE html>

<html>

<head>

<style>

div {

background: rgb(0, 128, 0);

}

div.one {

background: rgba(0, 128, 0, 0.1);

}

div.two {

background: rgba(0, 128, 0, 0.3);

}

div.three {

background: rgba(0, 128, 0, 0.6);

}

</style>

</head>

<body>

<h1>Transparent Background</h1>

<p>Opacity:</p>

<h1>10% opacity</h1>

</div>

<h1>30% opacity</h1>

</div>

<h1>60% opacity</h1>

</div>

<div>

<h1>Opacity 1</h1>

</div>

<p>With RGBA color values:</p>

<h1>10% opacity</h1>

</div>

<h1>30% opacity</h1>

</div>

<h1>60% opacity</h1>

</div>

<div>

</div>

</body>

</html>

CSS Border

This is a shorthand property used to set the border on an element. It specifies the style, color and size of the border:

Border Properties

The border properties defines the styes, colors, with and radius.

Border-style

The styles of the CSS are set through the border properties which allow you to define the border elements.

We can have styles, solid line, dotted line, double line, solid, double, etc.

Example:

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

Border Colors

We have already learned about colors and now let’s see how we can apply them to the borders.

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-color: black;

}

p.two {

border-style: double;

border-color: orange;

}

p.three {

border-style: dotted;

border-color: gray;

}

</style>

</head>

<body>

<h2>Border-colors </h2>

<p>This property specifies the border color :</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>

</body>

</html>

CSS Border-width Styles

Help to design the look and feel of columns and borders.

<!DOCTYPE html>

<html>

<head>

<style>

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;

}

p.five {

border-style: double;

border-width: 15px;

}

p.six {

border-style: double;

border-width: thick;

}

</style>

</head>

<body>

<h2>Border Width Radius</h2>

<p>Property specifies the width of the borders:</p>

<p class=”one”>Conqueror</p>

<p class=”two”>Conqueror.</p>

<p class=”three”>Conqueror.</p>

<p class=”four”>Conqueror.</p>

<p class=”five”>Conqueror.</p>

<p class=”six”>Conqueror </p>

</body>

</html>

Border Radius

The design and display of CSS borders

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border: 2px solid red;

}

p.two {

border: 2px solid red;

border-radius: 5px;

}

p.three {

border: 2px solid red;

border-radius: 8px;

}

p.four {

border: 2px solid red;

border-radius: 10px;

}

</style>

</head>

<body>

<h2>Border Radius </h2>

<p>Adding rounded borders to elements:</p>

<p class=”one”> Conqueror </p>

<p class=”two”> Conqueror </p>

<p class=”three”> Conqueror</p>

<p class=”four”> Conqueror </p>

</body>

</html>

CSS Fonts

Your fonts determine the style and readability of your texts even your text styles. The font property provides several styles and sizes to be applied to your texts.

Some common fonts are font-family, font-style, font-weight, font-size, and font-variant.

Font-family

This is to specify the fonts to be applied. If the first does not hold or work, the next will be applied.

Font Style

Font style can be normal, italic and oblique. The default style is normal.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-size: 100%;

}

h2 { font-style: italic; }

h3 { font-style: oblique; }

h4 { font-style: normal; }

}

</style>

</head>

<body>

<h2>I am the Conqueror.</h2>

<h3> I am the Conqueror.</h3>

<h4> I am the Conqueror.</h4>

</body>

</html>

Font Variant

The font variant should be normal or small capital

<!DOCTYPE html>

<html>

<head>

<style>

p { font-variant: small-caps; }

h2 { font-variant: normal; }

</style>

</head>

<body>

<h2>I am the Conqueror.</h2>

<p>I am the overcomer.</p>

</body>

</html>

CSS Text

The css provides several properties which allow you to format your texts such as color, under-line, centre, italic, bold, etc.

Text Color

Now let us define the color with the property.

<!DOCTYPE html>

<head>

<title>CSS Text Color</title>

<style>

h1 {

color: green;

}

p {

color: blue;

}

</style>

</head>

<body>

<h1>I am the Conqueror</h1>

<p>I am the Overcomer.</p>

</body>

</html>

Text Alignment

The text-align property is used to set the horizontal alignment of a text. It allows texts to be aligned to the left, right, centre or the default which is usually left aligned.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-align: center;

}

h2 {

text-align: left;

}

h3 {

text-align: right;

}

</style>

</head>

<body>

<h1>The Conqueror</h1>

<h2>I am the Overcomer</h2>

<h3>I have overcome the world</h3>

<p>I can do all things through Christ who strengthens me. Praise God!.</p>

</body>

</html>

CSS Links

The hyperlink is a connection which allows web users to navigate from one page to the other and from one website to another. A link can be an image, audio or video clip, document link or html link. A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link

The syntax for a link is: <a href=”url“>Link text</a>

Styling Links with CSS

A link has the following states:

a:link — for normal or visited links.

a:visited — styles for visited links.

a:hover — styles on mouse over..

a:active — styles for active links

<!DOCTYPE html>

<head>

<title>Link Styling using CSS</title>

<style>

/* unvisited link */

a:link {

color: #ff0000;

text-decoration: none;

border-bottom: 1px solid;

}

/* visited link */

a:visited {

color: #c3c;

}

/* mouse over link */

a:hover {

color: #ccc;

border-bottom: none;

}

/* active link */

a:active {

color: #cfc;

}

</style>

</head>

<body>

</body>

</html>.

Creating link buttons with CSS

You can create link buttons by applying CSS properties as background-color, border, display, padding and text decoration

<!DOCTYPE html>

<head>

<title>Link as Button</title>

<style>

a:link, a:visited {

color: #fff;

background-color: #bcd;

display: inline-block;

padding: 10px 20px;

border: 2px solid #c3c;

text-decoration: none;

text-align: center;

border-radius: 10px;

font: 14px Arial, sans-serif;

}

a:hover, a:active {

background-color: #3c3;

border-color: #ddd;

}

</style>

</head>

<body>

<p><a href=”#”>Conqueror</a></p>

</body>

</html>

Custom Color of Links

You can choose to ignore the default link style and set your own style:

<!DOCTYPE html>

<head>

<title>Linking Colors</title>

<style>

a:link {

color: #1ebba3;

}

a:visited {

color: #ff00f4;

}

a:hover {

color: #a766ff;

}

a:active {

color: #ff9800;

}

</style>

</head>

<body>

</body>

</html>

CSS Lists

The CSS has three ways of listing information to the readers to make the information readable and easy to understand:

Unordered list — listing of related items in no particular order.

Ordered list — listing of related items, in a specific order.

Description list — list of terms and their descriptions.

Unordered Lists

The unordered list start with the <ul> and <li> tags and end up with the same closing tags </li></ul>.

<ul>

<li>I am a conqueror</li>

<li>I am an overcomer</li>

<li>I can do all things</li>

</ul>

<!DOCTYPE html>

<head>

<title>Style Listing</title>

<style>

ul {

list-style-type: square;

}

ol {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<h2>Unordered List</h2>

<ul>

<li>Conqueror</li>

<li>Overcomer</li>

<li>The winner</li>

</ul>

<h2>Ordered List</h2>

<ol>

<li>Conqueror</li>

<li>The Overcomer</li>

<li>The Winner</li>

</ol>

</body>

</html>

List Markers

You can use list-style-position to list the points inside or outside the display boxes.

<!DOCTYPE html>

<head>

<title>List Marker</title>

<style>

body{

font-size: 14px;

font-family: Arial,sans-serif;

}

ol li {

background: #ccc;

padding: 5px;

margin: 5px;

}

ol.in li {

list-style-position: inside;

}

ol.out li {

list-style-position: outside;

}

</style>

</head>

<body>

<h2>Position – Inside</h2>

<li>I am the Conqueror</li>

<li>I am the Overcomer</li>

<li>I am the Winner</li>

</ol>

<h2>Position – Outside</h2>

<li>I am the Conqueror</li>

<li>I can do all things</li>

<li>I have overcome the world</li>

</ol>

</body>

</html>

CSS Navigation bar

We create navigation menu with CSS

<!DOCTYPE html>

<head>

<style>

body{

font-size: 14px;

font-family: Arial,sans-serif;

}

ul {

padding: 0;

list-style: none;

background: #f2f2f2;

}

ul li {

display: inline-block;

}

ul li a {

display: block;

padding: 10px 25px;

color: #333;

text-decoration: none;

}

ul li a:hover {

color: #fff;

background: #939393;

}

</style>

</head>

<body>

<nav>

<ul>

<li><a href=”#”>About Us</a></li>

<li><a href=”#”>Products</a></li>

<li><a href=”#”>Services</a></li>

<li><a href=”#”>Portfolio</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</nav>

<p><strong>I can do all things through Christ who strengthens me. :</strong> </p>

</body>

HTML Tables

Tables are organised in rows and columns. They are used like the spread-sheet or database to organise information in tables like financial statements, personnel records, products and customer information.

The table is created with the <table> tags at the beginning and end </table>. The HTML <tr> element is used to define the row cells of the table.The headers with <th> as the header cell and the data cell with <td>. The CSS property is used to define the border table.

<!DOCTYPE html>

<head>

<title>Table Borders</title>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<h3>Our Specialists</h3>

<table>

<tr>

<th>First Name</th>

<th>Subject</th>

</tr>

<tr>

<td>Conqueror</td>

<td>Francis</td>

<td>Software Engineering</td>

</tr>

<tr>

<td>Favour</td>

<td>Ekperechi</td>

<td>Medicine</td>

</tr>

<tr>

<td>Divine</td>

<td>Anthony</td>

<td>Medicine</td>

</tr>

<tr>

<td>Overcomer</td>

<td>Emperor</td>

<td>Database Manager</td>

</tr>

</table>

</body>

</html>

Zebra-striped Tables

Zebra-striped table creates different background to improve quality and readability.

<!DOCTYPE html>

<head>

<title>Zebra-striped Tables</title>

<style>

table {

width: 70%;

font-family: arial, sans-serif;

border-collapse: collapse;

}

th, td {

padding: 8px;

text-align: center;

border-top: 1px solid #ccc;

}

tbody tr:nth-child(odd) {

background-color: #ddd;

}

h3 {

color: green;

text-align: center;

}

</style>

</head>

<body>

<h3>Our Engineers</h3>

<table>

<thead>

<tr>

<th>First Name</th>

</tr>

</thead>

<tbody>

<tr>

<td>Conqueror</td>

<td>Emporer</td>

</tr>

<tr>

<td>Divine</td>

<td>Francis</td>

</tr>

<tr>

<td>Favour</td>

<td>Ekperechi</td>

</tr>

</tbody>

</table>

</body>

</html>

CSS Padding

The padding property allows the opportunity to define the spacing between properties as:

padding-top – this the spacing on the top.

padding-right – the amount of spacing to the right.

padding-bottom – spaces to the bottom

padding-left – spaces to the left.

Which can be represented as:

padding: 20px 60px 75px 60px;

top – 20px, the right – 60px, the bottom – 75px and the left – 60px.

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 20px 60px 75px 60px;

background-color: #ccc;

}

</style>

</head>

<body>

<h2>The Padding </h2>

<div>The Lord is our shepherd and we shall not want.</div>

</body>

</html>

padding property has three values:

padding: 20px 60px 75px;

top padding is 20px

right and left paddings are 60px

bottom padding is 75px.

Padding with two properties:

padding: 20px 60px;

top and bottom paddings are 20px

right and left paddings are 60px

Padding with two properties:

padding: 20px;

all four paddings are 20px

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 20px;

background-color: #ccc;

width: 200px;

}

h4 {

Color: red;

}

</style>

</head>

<body>

<h4>Padding shorthand property</h4>

<div>I can do all thing through Christ who strengthens me.</div>

</body>

</html>

CSS Margin

The margin property gives the opportunity to set the spaces around the borders. It improves appearance, quality and readability and presentation of texts.

Following the same principle in padding, you start with top, right, bottom and the left margin.

Margin properties can be defines in the following ways

The length – defines a margin in px, em, rem, pt, cm, etc.

The % – defines a margin in percentage (%) of the width of the containing element.

The auto – the browser calculates a suitable margin to use.

The inherit – defines how the margin should be inherited from the parent property.

Setting margin for individual sides

<!DOCTYPE html>

<head>

<title>CSS Margin</title>

<style>

h1 {

margin-top: 25px;

margin-bottom: 75px;

background: blue;

}

p {

margin-left: 75px;

margin-right: 75px;

background: green;

}

</style>

</head>

<body>

<h1>The Conqueror</h1>

<p>I am the winner.</p>

<p><strong>Note:</strong> I can do all things through Christ who strengthens me. Praise God!.</p>

</body>

</html>

Margin for All Sides

<!DOCTYPE html>

<head>

<title>Set Margin for All Sides At Once</title>

<style>

h1 {

margin: 50px; /* apply to all four sides */

}

p {

margin: 25px 75px; /* vertical | horizontal */

}

div {

margin: 25px 50px 75px; /* top | horizontal | bottom */

}

hr {

margin: 25px 50px 75px 100px; /* top | right | bottom | left */

}

h1, p, div {

background: yellow;

}

</style>

</head>

<body>

<h1>The King of the kingdom</h1>

<p>The king Overcomer.</p>

<div>The more than conqueror.</div>

<hr>

<p>I can do all things through Christ who strengthens me.</p>

</body>

</html>

CSS

Types of CSS

Embedded Styles – This is a style sheet declared in the head section of the document and apply only to the document to which it is referred to.

Inline Styles

Embedded Styles

Embedded Styles – This is a style sheet declared in the head section of the document and apply only to the document to which it is referred to.

External Style Sheets

Importing External Style

CSS Selectors

Selector lists

Attribute selectors

Pseudo-classes and elements

Universal Selector (*)

Combinators

CSS HEX Value

RGB Colors

RGBA Value

HSL Value

CSS Background

Opacity

RGBA Transparency

CSS Border

Border Properties

The border properties defines the styes, colors, with and radius.

CSS Fonts

Font Style

Font Size

Font Variant

CSS Text

Text Color

Text Alignment

CSS Links

Styling Links with CSS

A link has the following states:

Creating link buttons with CSS

You can create link buttons by applying CSS properties as background-color, border, display, padding and text decoration

Custom Color of Links

CSS Lists

Unordered Lists

List Markers

HTML Tables

CSS Margin

Submit a Comment Cancel reply

Recent Posts

**Universal Selector (*)**