0% found this document useful (0 votes)

355 views

Learn CSS

Booklet about CSS programming language.

Uploaded by

vukt

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

355 views

Learn CSS

Booklet about CSS programming language.

Uploaded by

vukt

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 235

About this Book

CSS is a cascading style sheet that allows web developers to design
the HTML Page that can be viewed on Web Browser. CSS are styling
rules which is applied on the web page. This book will help you
understand the basics of CSS Syntax and how to put it in practice to
build Websites.

Audience
This tutorial has been designed to meet the requirements of all
those readers who are keen to learn the basics of CSS.

Prerequisites
This book assumes you have no prior knowledge on Programming
knowledge and assume you are at a beginner level.

How to use this Book

This book contains CSS Syntax Basics, Exercises and Examples which
are part of the PHP Bootcamp Program. This bootcamp has helped
many students to become PHP Full Stack Web Developer in Just 30
days.

>>>Check out more about this program here...

Become PHP Full Stack Web Developer in Just 30 Days

Copyright & Disclaimer

All the content and graphics published in this e-book are the
property of PHPBootcamp.com. The user of this e-book is prohibited
to reuse, retain, copy, distribute or republish any contents or a part
of contents of this e-book in any manner without written consent of
the publisher.

We strive to update the contents of our website and tutorials as

timely and as precisely as possible, however, the contents may
contain inaccuracies or errors. PHPBootcamp.com provides no
guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any
errors on our website or in this tutorial, please notify us at
contact@phpbootcamp.com.

Found Typos & Broken Link

If you found any typos and broken links in the course or book, then
please let me know using this email address.

contact@phpbootcamp.com

Support
You can reach me for technical discussions and other support
related queries from here.

support@phpbootcamp.com

Thanks for your support!

Become PHP Full Stack Web Developer in Just 30 Days

Free Courses

Learn HTML in 1 Hour

Learn CSS in 1 Hour

Learn JAVASCRIPT in 1
Hour

Become PHP Full Stack Web Developer in Just 30 Days

Free Courses

Table of Contents

About this Book .......................................................................................... 1

Audience ...................................................................................................... 1
Prerequisites ............................................................................................... 1
How to use this Book ................................................................................. 1
Copyright & Disclaimer .............................................................................. 2
Found Typos & Broken Link ...................................................................... 2
Support ........................................................................................................ 2
1 CSS Basics ............................................................................................ 8
1.1 Introduction to CSS...................................................................... 8
1.2 Internal CSS ................................................................................ 13
1.3 CSS Comments ........................................................................... 17
1.4 External CSS ............................................................................... 21
1.5 Inline CSS .................................................................................... 26
1.6 Linking CSS ................................................................................. 29
1.7 Simple CSS Example .................................................................. 34
2 CSS Selectors......................................................................................... 39
2.1 Selectors & Declaration ................................................................ 39
2.2 Universal Selector .......................................................................... 45
2.3 Type Selector.................................................................................. 50
2.4 Class Selector ................................................................................. 56
2.5 Class Multiple Selector .................................................................. 62
2.6 ID Selector ...................................................................................... 67

Become PHP Full Stack Web Developer in Just 30 Days

Free Courses

2.7 ID Multiple Selector ....................................................................... 73

2.8 Attribute Selector .......................................................................... 79
2.9 Child Selector ................................................................................. 84
2.10 Descendant Selector ................................................................... 88
2.11 Adjacent Sibling Selector ............................................................ 94
2.12 General Sibling Selector ...........................................................100
2.13 Pseudo Classes ..........................................................................106
2.14 Pseudo Elements .......................................................................111
3 CSS Rules .............................................................................................116
3.1 Precedence ...................................................................................116
3.2 Inheritance ...................................................................................121
3.3 Last Rule Wins ..............................................................................126
3.4 Important Rule Wins ...................................................................132
4 Colors and Text ...................................................................................138
4.1 Colors ............................................................................................138
4.2 Text ................................................................................................ 144
5 CSS Box ................................................................................................ 150
5.1 Borders .........................................................................................150
5.2 Margin ...........................................................................................155
5.3 Padding .........................................................................................162
5.4 Height and Width.........................................................................168
6 Floating Columns ................................................................................174
6.1 Floating Box..................................................................................174
6.2 Floating Images ............................................................................178
6.3 Horizontal Menu ..........................................................................184
6.4 Vertical Menu ...............................................................................187

Become PHP Full Stack Web Developer in Just 30 Days

Free Courses

7 Positioning Elements .........................................................................192

7.1 Position Fixed ...............................................................................192
7.2 Position Absolute.........................................................................198
7.3 Position Relative ..........................................................................203
8 Display Inline and Block.....................................................................209
8.1 Display Inline & Block Example 1 ..............................................209
8.2 Display Inline & Block Example 2 ..............................................213
9 Layouts ................................................................................................ 218
9.1 Layout 1 ........................................................................................218
9.2 Layout 2 ........................................................................................221
9.3 Layout 3 ........................................................................................225
9.4 Layout 4 ........................................................................................229

Become PHP Full Stack Web Developer in Just 30 Days

Free Courses

1. CSS Basics

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

1 CSS Basics

1.1 Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheet. It is used to describe how the
content should be displayed on the browser, print or screen.

With CSS Language, you can control the layout of the page, color of
the text, size of the font, spacing between the text, width and height
of the elements and complete presentation of the web page.

In Short, CSS handles the look and feel of the web page.

HTML is used to describe the content and CSS is used to display

the content in a presentable way.

Usage of CSS

CSS are written in a file with extension .css and it is linked into the
HTML page.

Define the style once and then use it any where on your site.

Load the CSS once per page and it will manage the entire page layout
and presentation.

Helps to change the page layout based on the screen the site is
viewed on like Mobile, Tablet or Computer Screen.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

CSS helps to separate the presentation work from the HTML page
and the developer can focus on building the content and displayed it
separately.

Global Standards also suggest to use CSS and do not use any HTML
attributes to style the tag.

Reuse the same CSS for multiple WordPress site to have the same
look and feel.

Who are W3 Group?

The World Wide Web Consortium, or W3C is a group that provides

guidelines on how things should work in Internet.

They don’t provide implementation libraries or code but they just

provide guidelines and all the browser implement this guidelines.

Visit W3.org

History of CSS

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

CSS was invented by Håkon Wium Lie on October 10, 1994 and
maintained through a group of people within the W3C called the CSS
Working Group.

Visit CSS Working Group

Without CSS

Without CSS, HTML page will be displayed as per the browser default
formatting and coloring. Most of the time is plain black and white
with some browser defined font size.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

With CSS

With CSS, you can add styles to the each elements of the HTML tag.

CSS can control every element and format it.

CSS Syntax

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

In this above CSS example, we are changing the h1 tag property to

display it in RED color and font-size to be 12 points.

CSS Language & Terms:

property represents the name of Selectors are the HTML tags that
you want to apply the style on.

Custom selectors are the selectors which name does not matches
with the HTML tag name.

Example : h1 is a selector and h1a is a custom selector.

the attribute you want to change.

value is the value of that property.

{ } is called as block.

{ property: value; } is called as Declaration.

Collection of Declaration is called as Declaration Block.

You can separate the each declaration with ; inside the block.

Declaration property is predefined like color, font-size it cannot be

custom name.

CSS Summary

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

CSS is a collection of selectors which has many declaration blocks

to modify the HTML tags and you can define custom selectors
which can be applied on the HTML tags.

1.2 Internal CSS

Usage of Internal CSS

Cascaded Style Sheet (CSS) can be written in many different places in

HTML page.

One of the method of defining the CSS is inside the same HTML
page.

This type of CSS includes is restricted to page level only means you
cannot reuse this code in some other pages.

Benefit of using this internal css is when you want specific changes to
apply for that page level only.

QUICK SYNTAX:

h1 { color: red; }

</style>
</head>

<style> tag is used to write the CSS inside this tag.

This tag <style> is defined inside the <head>

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Data written inside the <style> tag is not displayed in the browser
but it is used as instruction to the browser to do something on the
page.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>How to write CSS within the Page</title>

h1 { color: red; }

</style>

</head>

<body>

<h1>Heading</h1>

<p>Paragraph Text</p>

<ul>

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

</ul>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Color the Paragraph in Blue Color and list in Green

Color.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Change the font size of h1, p and li tags.

h1 – { font-size: 12 px; }
p – { font-size: 24 px; }
li – { font-size: 48 px; }

Follow the correct syntax to add the internal CSS on the HTML page.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

1.3 CSS Comments

Usage of Comments

You can use the special notation to comment the code inside the
CSS.

HTML comments and CSS comments are not same. Don’t get
confused with the comments in CSS vs comments in HTML.

Comments in CSS are multiple line comments.

/* is used to indicate the comments are starting.

*/ is used to indicate the comments are ended.

Anything between /* and */ will not be executed by the browser.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

SYNTAX:

/* Starting of the comment

h1 { color: red; }

Ending of the Comments */

</style>
</head>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>How to Write Comments in CSS</title>

This is a multi-line comment in CSS.

This is different than the HTML comments.

Anything inside this block will be ignored.

h1 { color: red; }

</style>

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

</head>

<body>

<h1>Heading</h1>

<p>Paragraph Text</p>

<ul>

</ul>

</body>

</html>

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Exercise 1

Download the Exercise 1

Exercise 1: Make the multi-line comments of CSS looks like single

line.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Comment the entire <style> block with HTML comments.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

1.4 External CSS

Usage of External CSS

Cascaded Style Sheet (CSS) can be written in many different places in

HTML page.

One of the method of defining the CSS is externally which means you
can write CSS inside a file and import it into the HTML page.

External CSS means the CSS is written externally into another file
which is later linked in the page.

This type of external CSS is very powerful and helpful technique

which is commonly used in every website development.

Benefit of using this external css is that you have one CSS file that is
included in all the website pages.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

By just changing at one place in the CSS it will impact the overall site
design look and feel.

This is one of the best practice to separate the design with the html
tags and store them in a external file and include it in all the HTML
pages.

External CSS filename should be .css and it is included in the <head>

section with <link> tag.

SYNTAX:

<head>

<!– Make sure styles.css file exists in the same folder –>
<link rel=”stylesheet” type=”text/css” href=”styles.css”
media=”screen” />

</head>

rel attribute is used to tell browser what kind of resource it is. rel =
“stylesheet” means it is a file with CSS inside it.

type attribute tells the type of the content in the file. In this case, it is
text/css

href attribute is similar to <a> tag href to map the location of the file
in the server with the path and filename.

media attribute tells the browser to embed the file for screen
purpose.

Sample Example

Download the Example

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

There are two files:

index.html

styles.css

styles.css file is linked inside the index.html file with <link> tag in the
<head> section.

FileName: index.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>How to Include CSS from external file.</title>

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

media="screen" />

</head>

<body>

< body >

<h1>Heading</h1>

<p>Paragraph Text</p>

</body>

</html>

FileName: styles.css

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

border-style: solid;

border-color: red;

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Create style1.css and style2.css and link them in the

HTML page.

Filename: style1.css

h1 { color: red; }

Filename: style2.css

h1 { color: blue; }

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Change the font size of h1, p and li tags in style.css and
embed the CSS file in the HTML page.

Write comments in the style.css

h1 – { font-size: 12 px; }
p – { font-size: 24 px; }
li – { font-size: 48 px; }

Follow the correct syntax to add the external CSS on the HTML page.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

1.5 Inline CSS

Usage of Inline CSS

Inline CSS is defined inside the tag itself like an attribute.

Inline CSS overrides all the styles defined in internal CSS and External
CSS.

This is defined in the HTML tag as a attribute.

SYNTAX:

<h1 style=”color: red;”>This heading should be red in color.</h1>

The syntax for CSS is similar in inline, external and internal CSS.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>How to Apply CSS from the HTML tag - Inline CSS</title>

</head>

<body>

<h1 style="color: red;">This heading should be red in color.</h1>

<p>Paragraph Text</p>

<h1>This heading is without any style</h1>

</body>

</html>

This heading should be red in color.

Paragraph Text

This heading is without any style.

Live Preview

Exercise 1

Download the Exercise 1

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Exercise 1: Write Inline CSS and change the h1 tags color as red,
paragraph as blue and list as green.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Change the font size of h1, p and li tags as inline CSS
along with the color.

h1 – { font-size: 12 px; }
p – { font-size: 24 px; }
li – { font-size: 48 px; }

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

1.6 Linking CSS

Usage of Linking CSS

CSS files can be linked together and embed into one another.

Linking one CSS into another CSS file can help to split the
functionality into smaller units.

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

You can create the multiple CSS file and import the one css file into
another css file.

SYNTAX:

<head>

<link rel=”stylesheet” type=”text/css” href=”mynewstyles.css”

media=”screen” />

</head>

Sample Example

Download the Example

There are three files:

• index.html
• mynewstyles.css
• anotherstylesfile.css

mynewstyles.css has a import statement to import the

“anotherstylesfile.css“.

FileName: index.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Embeded CSS from One file into Another CSS File.</title>

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

media="screen" />

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

</head>

<body>

< body >

<h1>Heading</h1>

<p>Paragraph Text</p>

</body>

</html>

FileName: mynewstyles.css

@import notation is used to import another css file

Don't forget the semicolor ; at the end of the line.

@import "anotherstylesfile.css";

FileName: anotherstylesfile.css

/* This file is imported in the mynewstyles.css file */

border-style: solid;

border-color: red;

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Create style1.css, style2.css, style3.css and link like this

index.html -> style1.css -> style2.css -> style3.css

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Change font of h1 in style1.css and p in style2.css and li

in style3.css

h1 – { font-size: 12 px; }
p – { font-size: 24 px; }
li – { font-size: 48 px; }

Follow the correct syntax to add the external CSS on the HTML page.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

1.7 Simple CSS Example

Simple Example of CSS

In this simple example, you will combine all the ways of using CSS

• Internal CSS
• External CSS
• Inline CSS
• Linking CSS

Sample Example

Download the Example

There are three files:

index.html

mynewstyles.css

anotherstylesfile.css

mynewstyles.css has a import statement to import the

“anotherstylesfile.css“.

FileName: index.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>CSS Simple Example</title>

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

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

media="screen" />

p {

font-size: 20px;

font-weight: bold;

font-style: italic;

text-align: center;

</style>

</head>

<body>

<h1 style="text-align: center; color: red;">This is Inline Style

with Red Heading and Center.</h1>

<p>This is a Paragraph Text with 20px Font Size, Bold, Italics and
Aligned Center.</p>

<p>Power of CSS!!!</p>

</body>

</html>

FileName: mynewstyles.css

@import notation is used to import another css file

Don't forget the semicolor ; at the end of the line.

@import "anotherstylesfile.css";

FileName: anotherstylesfile.css

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

/* This file is imported in the mynewstyles.css file */

border-style: solid;

border-color: red;

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Copy all the style in inline css in a single HTML file
without any external CSS and no <script> tag

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

Exercise 2

Download the Exercise 2

Exercise 2: Copy all the CSS in styles.css file and link it from the
index.html

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

CSS Basics

2. CSS Selectors

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

2.1 Selectors & Declaration

Usage of Selectors and Declaration

A CSS rule made up of two parts:

Selector

Declaration

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

Selector is used to indicate which element this rule should be applied

to.

You can even write multiple elements by separating them by “,”

h1, p, li elements will be red in color with this one css rule.

Declaration indicates what is the rule to be applied on that element.

The rule is indicated with property: value.

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

Multiple Declaration are separated with “;”

SYNTAX:

h1 { color: red; }

p,
li { color: blue; font-size: 12px }

</style>
</head>

EXAMPLE:

/*
selector
{
property1: value1; => Declaration
property2: value2; => Declaration
}
*/

Sample Example

Download the Example

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Definition of Selector and Declaration in CSS.</title>

selector

property1: value1; => Declaration

property2: value2; => Declaration

/* p is the selector and color: red is declaration */

/* Apply this rule to <p> tag and assign this propery to it */

color: red;

</style>

</head>

<body>

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

<h1>Heading</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting

industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.</p>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS selector and Declaration into another css
and link them in the index.html.

Apply this CSS Rule:

Make all the text on the body blue in color with one CSS rule.

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Add two declaration for each selector and change the
CSS to see the following output.

/* selector { property: value; property: value; } */

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

Live Preview

2.2 Universal Selector

Usage of Universal Selector

Universal selector is the rule that you want to apply for all the
elements of the page.

Wild Character ‘*‘ is used to represent the universal selector.

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

Universal selector are applied on all the elements of the page.

SYNTAX:

*
{
border-style: solid;
border-color: red;
}

</style>
</head>

border-style property is used to set the style of the border

border-color is used to indicate the color of the border.

If you observe properly, every element on the HTML page has a

magical box around it using which you can control that element.

Sample Example

Download the Example

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Universal Selector Notation</title>

selector

property1: value1; => Declaration

property2: value2; => Declaration

/* '*' is the universal selector which is applied to all tags.

/* Make all tags text color as red */

border-style: solid;

border-color: red;

</style>

</head>

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

<body>

<h1>Universal Selector - *</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting

</body>

</html>

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

2 CSS Selectors

Exercise 1

Download the Exercise 1

Exercise 1: Write two CSS rule

Using Universal Selector change the color to red

Change the h1 tag color to blue.

Observe the result

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Do the following steps:

Put the universal selector into another css file and change the color
to red

change the h1 tag to blue using inline css.

Become PHP Full Stack Web Developer in Just 30 Days

Guess the output.

Live Preview

2.3 Type Selector

Usage of Type Selector

Type Selector are defined with HTML tags only.

When you find any selector that has rule applied on the HTML tags
then it is called as Type Selector.

Become PHP Full Stack Web Developer in Just 30 Days

Type selectors only apply to HTML tags.

SYNTAX:

h1
{
border-style: solid;
border-color: red;
}

</style>
</head>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

Become PHP Full Stack Web Developer in Just 30 Days

<title>Type Selector Notation</title>

selector

property1: value1; => Declaration

property2: value2; => Declaration

/* Specify the HTML TAG as the Selector. */

/* Apply the rule to specified tag as selector. */

color: red;

color: blue;

/* This rule applies to <p> and <h1> tag */

p, h1

font-style: italic;

</style>

</head>

Become PHP Full Stack Web Developer in Just 30 Days

<body>

<h1>Type Selector - HTML TAG</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 1: Write the CSS rule with Type Selectors

Make the font size of h6 biggest and h1 smallest.

Make all the headings tags blue in color.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Do the following steps:

Make h1 and h2 same size and color.

Become PHP Full Stack Web Developer in Just 30 Days

h3 and h4 same size and color

h5 and h6 same size and color.

All the headings should be in Italics

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

2.4 Class Selector

Usage of Class Selector

Class Selector is custom selector that you can create in the CSS rules
and apply it to any HTML tag with class attribute.

Class selector names are custom so you should NOT use the
predefined HTML tag names.

Custom Selector names are class selectors that can be applied to any
HTML tag.

Class selector can be defined to any specific HTML tags and applied
to any specify the tags.

You define the class selector with “.” in-front of it.

If the selector starts with “.” and it name is not HTML tag then it is
called as Class Selector.

SYNTAX:

.redcolor { color: red; }

</style>
</head>

Become PHP Full Stack Web Developer in Just 30 Days

<body>
<h1 class=”redcolor”>This is red color heading</h1>
</body>

Remove the “.” when the class selector is applied to the HTML tag
attribute.

If you want to create class selector only specific to HTML tags then
use this notation.

.redcolor class selector will only works for h1 tag.

Sample Example

Become PHP Full Stack Web Developer in Just 30 Days

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Class Selector Notation</title>

.selector

property1: value1; => Declaration

property2: value2; => Declaration

/* Specify the Custom name selector with '.' */

/* Use this style to any tag with class attribute */

.color-red

color: red;

.color-blue

color: blue;

.align-center

Become PHP Full Stack Web Developer in Just 30 Days

{

text-align: center;

</style>

</head>

<body>

<h1 class="color-red align-center">Class Selector - HTML TAG</h1>

<p class="color-blue">Lorem Ipsum is simply dummy text of the

printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.</p>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Class Selector

Create one rule called as “.headings” and make the color as blue,
align center and italics.

Create one more rule with same name “.headings” and change the
color to red.

See how the overwrite function will work.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Create a class selector only for h1 tag. Even if this class
selector is applied to other tags like p it should not work.

Example:

h1.redcolor { color: red; }

This class is only applicable to h1 tag.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

2.5 Class Multiple Selector

Usage of Class Multiple Selector

You can apply the selector to the parent HTML tag and all the child
elements will inherit the property from the parent tags properties.

SYNTAX:

div.redcolor { color: red; }

</style>
</head>
<body>
<div class=”redcolor”> <p>This is red color paragraph</p> </div>
</body>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Multiple Class Selector Notation</title>

Become PHP Full Stack Web Developer in Just 30 Days

selector.class-selector

property1: value1; => Declaration

property2: value2; => Declaration

div.color-red

color: red;

/* id and class are siblings */

#color-red.align-center

color: red;

text-align: center;

/* id is parent and class is child */

#color-blue .text-underline

color: blue;

text-decoration: underline;

</style>

</head>

<body>

Become PHP Full Stack Web Developer in Just 30 Days

<h1 class="color-red">Mutiple Class Selector - HTML TAG</h1>

This is red color paragraph.

Lorem Ipsum is simply dummy text of the printing and

typesetting industry.

</div>

<h1 id="color-red" class="align-center">Power of CSS!!!</h1>

<hr>

Cascaded CSS with Class & ID!!

</h1>

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Multiple Class Selector

Create one rule called as “.align-center” for p tag and h1 tag.

Apply the rule to h1 tag only.

Write p tag inside the h1 tag.

See if the text in p align in center or not? Any Guess?

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Create a class selector “align-center”

Apply the class to h1 tag and see if p tag inside get affected

Apply the class to p tag inside the h1 tag. Write some text inside the
h1 tag.

Apply the class to div tag inside the h1 tag and write p tag inside the
div tag.

Guess the output.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

2.6 ID Selector

Usage of ID Selector

Become PHP Full Stack Web Developer in Just 30 Days

ID Selector is custom selector that you can create in the CSS rules
and apply it to any HTML tag with id attribute.

ID selector names are custom so you should NOT use the predefined
HTML tag names.

Custom Selector names can be ID selectors that can be applied to

any HTML tag.

You define the ID selector with “#” in-front of it.

If the selector starts with “#” and it name is not HTML tag then it is
called as ID Selector.

SYNTAX:

#redcolor { color: red; }

</style>
</head>
<body>

Become PHP Full Stack Web Developer in Just 30 Days

<h1 id=”redcolor”>This is red color heading</h1>
</body>

Remove the “#” when the class selector is applied to the HTML tag
attribute.

If you want to create ID selector only specific to HTML tags then use
this notation.

#redcolor class selector will only works for h1 tag.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>ID Selector Notation</title>

Become PHP Full Stack Web Developer in Just 30 Days

#selector

property1: value1; => Declaration

property2: value2; => Declaration

/* Specify the Custom name selector with '#' */

/* Use this style to any tag with id attribute */

#color-red

color: red;

#color-blue

color: blue;

#align-center

text-align: center;

</style>

</head>

<body>

<h1 id="color-red align-center">ID Selector - Any TAG</h1>

Become PHP Full Stack Web Developer in Just 30 Days

<p id="color-blue">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p>

<h1 id="align-center">Power of CSS!!!</h1>

</body>

</html>

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with ID Selector

Create one rule called as “#headings” and make the color as blue,
align center and italics.

Create one more rule with same name “#headings” and change the
color to red.

See how the overwrite function will work.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Create a ID selector only for h1 tag. Even if this ID

selector is applied to other tags like p it should not work.

Example:

h1#redcolor { color: red; }

This id is only applicable to h1 tag.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

2.7 ID Multiple Selector

Usage of ID Multiple Selector

You can apply the selector to the parent HTML tag and all the child
elements will inherit the property from the parent tags properties.

SYNTAX:

div#redcolor { color: red; }

</style>
</head>
<body>
<div id=”redcolor”> <p>This is red color paragraph</p> </div>
</body>

Become PHP Full Stack Web Developer in Just 30 Days

Brother and Sister Sibling Relation:

#brother.sibling { color: red; }

If there is no space between the #id.class then both can be

specified at the same HTML tag attribute.

Parent and Child Relation:

#brother .sibling { color: red; }

If there is space between the #id .class then class should be

specified under the parent.

Become PHP Full Stack Web Developer in Just 30 Days

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Multiple Class Selector Notation</title>

selector.class-selector

property1: value1; => Declaration

property2: value2; => Declaration

div.color-red

color: red;

/* id and class are siblings */

#color-red.align-center

color: red;

text-align: center;

Become PHP Full Stack Web Developer in Just 30 Days

}

/* id is parent and class is child */

#color-blue .text-underline

color: blue;

text-decoration: underline;

</style>

</head>

<body>

<h1 class="color-red">Mutiple Class Selector - HTML TAG</h1>

This is red color paragraph.

Lorem Ipsum is simply dummy text of the printing and

typesetting industry.

</div>

<h1 id="color-red" class="align-center">Power of CSS!!!</h1>

<hr>

Cascaded CSS with Class & ID!!

</h1>

Become PHP Full Stack Web Developer in Just 30 Days

</div>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Multiple ID Selector

Create one rule called as “.align-center” for p tag and h1 tag.

Apply the rule to h1 tag only.

Write p tag inside the h1 tag.

Become PHP Full Stack Web Developer in Just 30 Days

See if the text in p align in center or not? Any Guess?

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Create a id selector “align-center”

Apply the class to h1 tag and see if p tag inside get affected

Apply the class to p tag inside the h1 tag. Write some text inside the
h1 tag.

Apply the class to div tag inside the h1 tag and write p tag inside the
div tag.

Guess the output.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

2.8 Attribute Selector

Usage of Attribute Selector

Attribute selector helps to apply the CSS rule when some specific
condition is met on the HTML attribute.

Become PHP Full Stack Web Developer in Just 30 Days

One example is when you want apply color red on all the <p> tag
when it has class attribute with any value.

SYNTAX:

p[class]{
color: red;
}
</style>
</head>

<body>
<p class=”something”>This is RED Color Text</p>
</body>

p[class] this attribute selector tell the browser to apply the rule to
the <p> HTML Tag when it has the class attribute.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Attribute Selector Notation</title>

Become PHP Full Stack Web Developer in Just 30 Days

selector[class]

property1: value1; => Declaration

property2: value2; => Declaration

/* Affect the <p> tag that has class attribute */

p[class]{

color: red;

font-weight: bold;

p[class=color-blue]{

color: blue;

p[class~=color-blue] ===> Targets <p> tag which has many

class name and one of it is "color-blue"

p[attr^"c"] ====> Attribute value starts with "c"

p[attr*"c"] ====> Attribute value has the letter "c"

p[attr$"c"] ====> Attribute value ends with the letter "c"

</style>

</head>

<body>

<p class="something">Lorem Ipsum is simply dummy text of the

printing and typesetting industry. </p>

Become PHP Full Stack Web Developer in Just 30 Days

<hr>

<p class="color-blue">Lorem Ipsum is simply dummy text of the

printing and typesetting industry. </p>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Attribute Selectors

Apply the color red to all <h1> tag that has id attribute.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Do the following steps:

Make h1 red when it has class and id both.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

2.9 Child Selector

Usage of Child Selector

Child Selector are used to pin point the location of the HTML tag in
the nested HTML sections.

“>” greater than symbol is used to point the location of the HTML
tag.

If you want to apply the rule to <a> anchor tag inside the <p>
paragraph tag then you can use the child selector to apply the style
to only <a> tag inside the <p> tag.

p>a { color: red; }

means apply the rule to <a> tag when it is inside the <p> tag.

SYNTAX:

p>a
{
color: red;
}

</style>
</head>
<body>
<p><a href=”#”>This is Red</a></p>
</body>

Sample Example

Download the Example

Become PHP Full Stack Web Developer in Just 30 Days

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Child Selector Notation</title>

selector>selector

property1: value1; => Declaration

property2: value2; => Declaration

/* Direct child element of the parent element. */

/* Only <a> tag inside the <p> tags are affected. */

div>a{

color: red;

font-weight: bold;

</style>

</head>

<body>

Become PHP Full Stack Web Developer in Just 30 Days

<h1>Child Selector - HTML TAG</h1>

<a href="#">Home Page</a>

<hr>

<div><a href="#">Rule Applied here! Lorem Ipsum is simply dummy

text</a> of the printing and typesetting industry.</div>

<hr>

<div>

<p>

CSS Rule not applied here.

<a href="#">Lorem Ipsum is simply dummy text</a>

of the printing and typesetting industry.

</p>

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Child Selectors

Apply the color red rule to <a> tag when it is inside the <div> and <p>

Live Preview

Exercise 2

Download the Exercise 2

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 2: Do the following steps:

Apply the CSS color red when <a> tag is inside the <p> and it has the
class and id attribute only.

Live Preview

2.10 Descendant Selector

Usage of Descendant Selector

Descendant Selector rule is used when you want to apply rule to for
every element under one parent element.

Selectors are separated with ‘ ‘ (space) to indicate they are parent

and child relation.

body a { color: red; }

means apply the rule to ALL <a> tag under the <body> tag.

SYNTAX:

Become PHP Full Stack Web Developer in Just 30 Days

body a
{
color: red;
}

</style>
</head>
<body>
<p><a href=”#”>This is Red</a></p>
</body>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Descendant Selector Notation</title>

selector selector

property1: value1; => Declaration

property2: value2; => Declaration

Become PHP Full Stack Web Developer in Just 30 Days

/* All child element of the parent element will be affected. */

/* All the <a> tag inside the <body> tags are affected. */

body a

color: red;

font-weight: bold;

</style>

</head>

<body>

<h1>Descendant Selector - HTML TAG</h1>

<a href="#">Home Page</a>

<p><a href="#">Lorem Ipsum is simply dummy text</a> of the printing

and typesetting industry. </p>

<hr>

<p><div><a href="#">Lorem Ipsum is simply dummy text</a></div> of

the printing and typesetting industry. </p>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Descendant Selectors

First make the <a> tag as blue

Then make all the <a> tag as red inside the <body>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Do the following steps:

Apply the CSS color red when <a> tag is inside the <p> with
descendant and also child selectors.

Observe which rule is applied.

Become PHP Full Stack Web Developer in Just 30 Days

Become PHP Full Stack Web Developer in Just 30 Days
Live Preview

2.11 Adjacent Sibling Selector

Usage of Adjacent Selector

Adjacent Sibling Selector rule is used when you want to apply rule to
for the first element which is one after the other.

Selectors are separated with ‘+’ (plus) sign to indicate the rule is
applied one after the other

h1 + a { color: red; }

means apply the rule to only the first adjacent sibling <a> tag after
h1.

It is Adjacent (right after) and sibling and at the same level.

Become PHP Full Stack Web Developer in Just 30 Days

<a> with Red1 is adjacent to <h1> and sibling as well.

<a> with Red2 is NOT adjacent to <h1> instead it is adjacent to <a>
with RED1.

SYNTAX:

h1 + a
{
color: red;
}

</style>
</head>
<body>
<h1>Test</h1>
<a href=”#”>Red1</a>
<a href=”#”>Red2</a>
</body>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

Become PHP Full Stack Web Developer in Just 30 Days

<title>Adjacent Sibling Selector Notation</title>

selector + selector

property1: value1; => Declaration

property2: value2; => Declaration

/* Adjacent Siblings not nested but one after the other. */

/* First <a> tag after the <h1> tags are affected. Not Inside
but after. */

h1 + a

color: red;

font-weight: bold;

</style>

</head>

<body>

<h1>Adjacent Sibling Selector - HTML TAG</h1>

<a href="#">Home Page</a>

Become PHP Full Stack Web Developer in Just 30 Days

<a href="#">Contact</a>

<a href="#">About</a>

<p><a href="#">Lorem Ipsum is simply dummy text</a> of the printing

and typesetting industry. </p>

<hr>

<div><a href="#">Lorem Ipsum is simply dummy text</a> of the

printing and typesetting industry.</div>

</body>

</html>

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Adjacent Selectors

First make the <a> tag as blue

Apply this rule only when <a> is adjacent to another <a> tag

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Do the following steps:

Apply the CSS color red when <a> tag is inside the <p> with
descendant and also child selectors and also with Adjacent Siblings
Selector.

Observe which rule is applied.

Become PHP Full Stack Web Developer in Just 30 Days

Become PHP Full Stack Web Developer in Just 30 Days
Live Preview

2.12 General Sibling Selector

Usage of General Adjacent Selector

General Adjacent Sibling Selector rule is used when you want to

apply rule to for every element which is one after the other.

Selectors are separated with ‘~’ (plus) sign to indicate the rule is
applied one after the other.

h1 ~ a { color: red; }

means apply the rule to all the adjacent sibling <a> tag after h1.

It is Adjacent (right after) and sibling and at the same level. All the
next <a> will also be affected

<a> with Red1 is adjacent to <h1> and sibling as well.

<a> with Red2 is also near adjacent to <h1>.

Become PHP Full Stack Web Developer in Just 30 Days

Outtput: Both will be RED

SYNTAX:

h1 ~ a
{
color: red;
}

</style>
</head>
<body>
<h1>Test</h1>
<a href=”#”>Red1</a>
<a href=”#”>Red2</a>
</body>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>General Adjacent Sibling Selector Notation</title>

Become PHP Full Stack Web Developer in Just 30 Days

selector + selector

property1: value1; => Declaration

property2: value2; => Declaration

h1 ~ a

color: red;

font-weight: bold;

</style>

</head>

<body>

<h1>Adjacent Sibling Selector - HTML TAG</h1>

<a href="#">Home Page</a>

<a href="#">Contact</a>

<a href="#">About</a>

<p><a href="#">Lorem Ipsum is simply dummy text</a> of the printing

and typesetting industry. </p>

<hr>

Become PHP Full Stack Web Developer in Just 30 Days

<div><a href="#">Lorem Ipsum is simply dummy text</a> of the
printing and typesetting industry.</div>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with General Adjacent Selectors

Make the all the paragraph bold after the h1 tag which are adjacent.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Do the following steps:

Apply the CSS color red when <a> tag is inside the <p> with
descendant and also child selectors and also with Adjacent Siblings
Selector and also the general sibling selector.

Observe which rule is applied.

Become PHP Full Stack Web Developer in Just 30 Days

Become PHP Full Stack Web Developer in Just 30 Days
Live Preview

2.13 Pseudo Classes

Usage of Pseudo Class Selector

Pseudo Class Selector are predefined class that are available to use
for the HTML tags.

For Example, You want to change the color of link when someone
mouse over the link.

This is done by predefined class for the HTML tags called as Pseudo
Class Selectors.

<a> anchor tags has hover, visited pseudo class that we can use.

Pseudo class are separated with “:” along with the HTML tags.

Example: a:hover { color: red; }

SYNTAX:

Become PHP Full Stack Web Developer in Just 30 Days

a:hover { color: red; }

</style>
</head>
<body>
<a href=”#”>Hover on me and I will turn red in color</a>
</body>

You don’t have to mention the Pseudo class to the HTML tags
attribute.

These are the properties of the HTML tags that you are changing.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Pseudo Class Selector Notation</title>

selector: pseudo class

property1: value1; => Declaration

property2: value2; => Declaration

Become PHP Full Stack Web Developer in Just 30 Days

/* UnVisited Link */

a:link

color: blue;

/* Visited Link */

a:visited

color: gray;

/* On Mouse Over Link */

a:hover

color: red;

/* Active link that is clicked */

a:active

color: green;

</style>

</head>

<body>

<h1>Pseudo Class Selector - HTML TAG</h1>

<a href="#1">Home Page</a>

Become PHP Full Stack Web Developer in Just 30 Days

<a href="#2">Contact</a>

<a href="#3">About</a>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Pseudo Class Selector

Change the <a> color to red when mouse is over the link.

Apply the Pseudo class only for the first <a> tag after the h1.

Rest of the <a> are not affected.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Apply the hover effect to all the <a> anchor tag only in
<p> tag anywhere in the body.

All the <a> tags outside the <p> are not affected.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

2.14 Pseudo Elements

Usage of Pseudo Elements Selector

Pseudo Elements Selector are rules that you want to add right after
the element is closed. Irrespective of what is there after the tag.

For Example, You want to add “!!!” after every paragraph ending.
Then you can use the Pseudo Element Selector.

Pseudo class are separated with “::” along with the HTML tags.

Example: p::after { content: “!!!”; }

This will add “!!!” after the every paragraph tag.

p::before will apply the before the tag.

SYNTAX:

p::after { content: “!!!”; }

</style>
</head>
<body>
<p>See the !!! right after the paragraph</p>
</body>

You don’t have to mention the Pseudo element to the HTML tags
attribute.

These are the addition data you are inserting before/ after the HTML
tags.

Sample Example

Become PHP Full Stack Web Developer in Just 30 Days

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Pseudo Elements Selector Notation</title>

selector:: Pseudo Elements

property1: value1; => Declaration

property2: value2; => Declaration

h1::after{

content: "!!!";

</style>

</head>

<body>

<h1>Pseudo Elements</h1>

Become PHP Full Stack Web Developer in Just 30 Days

<h1>Exclamation Mark is added by CSS</h1>

<a href="#1">Home Page</a>

<a href="#2">Contact</a>

<a href="#3">About</a>

<p><a href="#">Lorem Ipsum is simply dummy text</a> of the printing

and typesetting industry. </p>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write the CSS rule with Pseudo Element Selector

Add “!!!” only to the first paragraph after the h1 tag.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Add the “!!!’ before every paragraph

Tip: use p::before to apply the rule before the paragraph.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

3. CSS Rules

Become PHP Full Stack Web Developer in Just 30 Days

3 CSS Rules

3.1 Precedence

Usage of Precedence

There are many ways to write the same rule in different ways but
which one will be applied on the browser depends on the
precedence of the rule.

Some rule has higher priority or precedence over the other rules.

Here are some the rules of precedence:

Order of precedence and last one is applied and gets higher

precedence.

ID selector has higher precedence than class selector.

Become PHP Full Stack Web Developer in Just 30 Days

3 CSS Rules

div { color: red; }

div { color: blue’ }

div will be blue in color because of the order of the precedence.

CSS rule that is more specific has more priority and applied.

.text-blue{ color: blue; }

div.text-blue { color: blue; }

div.text-blue gets the higher precedence over normal .text-blue class

selector because it is very specific to div tag.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>CSS Order Precedence</title>

h1 {

color: blue;

p {

color: green;

Become PHP Full Stack Web Developer in Just 30 Days

3 CSS Rules

/* This takes the precedence over the first declaration */

p, h1

color: red;

/* First id then class then element */

/* The more specific the more precedence */

div

color: red;

#text-blue{

color: blue;

.text-green{

color: green;

div#text-blue{

color: lightblue;

</style>

</head>

<body>

<h1>Heading</h1>

Become PHP Full Stack Web Developer in Just 30 Days

3 CSS Rules

<p>Paragraph Text</p>

<div id="text-blue" class="text-green">

CSS Rule which is more specific has more precedence. <br>

id has more precedence over the class.

class is more predence over the element.

</div>

<ul>

</ul>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

3 CSS Rules

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Check if ID is higher precedence or class get the higher

precedence.

Change the color of h1 with two selector one is ID selector with blue
color and another one is class selector with red color.

Guess the color of h1?

Live Preview

Exercise 2

Become PHP Full Stack Web Developer in Just 30 Days

Download the Exercise 2

Exercise 2: Check which one has the higher precedence

h1 + p { color: blue; }

h1 ~ p { color: red; }

Live Preview

3.2 Inheritance

Usage of Inheritance

All the styles are inherited from the parent styles. This is very
important concept to understand.

Lets say you set the background color of body as red color then
every elements get the red background

If you make the font color as red in body then all the text on the page
will red in color.

The style is inherited from parent tags to child tags.

Example:

Become PHP Full Stack Web Developer in Just 30 Days

body { color: red; }

</style>
</head>
<body>
<h1>This is red color heading</h1>
<p>This is red color Paragraph</p>
</body>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Inheritance in CSS</title>

/* Anything defined here will be applied to all child elements.

body{

color: white;

background-color: red;

/* Overwrite background-color style from parent. */

h1{

text-decoration: underline;

Become PHP Full Stack Web Developer in Just 30 Days

background-color: black;

.blackscreen{

background-color: black;

</style>

</head>

<body>

<h1>Heading!</h1>

<!-- Inherit the background-color from body parent element style. -

<p>Paragraph Text</p>

<ul>

</ul>

<hr>

<p class="blackscreen"><a href="#">Lorem Ipsum is simply dummy

text</a> of the printing and typesetting industry. </p>

<hr>

<p><a href="#">Lorem Ipsum is simply dummy text</a> of the printing

and typesetting industry. </p>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Apply the default style to all the content on the page.

Font Size 12 px

Color Red

Text is italics

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Make body font-size to 12 px and h1 font size to 20px.

See which one take the precedence and the style is inherited or not.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

3.3 Last Rule Wins

Usage of Last Rule Wins

When working with CSS you will often find situation when you want
to apply that last rule and it should work everytime irrespective of all
the other inheritance rules applied on that tag.

You can specify the last rule to the tag using the inline css on the tag
itself.

This last rule can be applied with style attribute on the tag.

All the elements will have this style attribute using which you can
apply the desired style which will override all the styles mentioned in
the internal or external css.

SYNTAX:

p { color: red; }

</style>
</head>
<body>
<p style=”color: blue;”>This text color will be BLUE</p>
</body>

All the other precedence is overwritten by this inline style because it

is applied at the last after all the rules are applied on that tag.

Sample Example

Download the Example

Become PHP Full Stack Web Developer in Just 30 Days

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Last Rule has the Highest Precedence</title>

body{

color: red;

#text-red {

color:red;

.text-red {

color: red;

h1#text-red{

Become PHP Full Stack Web Developer in Just 30 Days

color: red;

h1.text-red{

color:red;

</style>

</head>

<body>

<h1 style="color: green;" class="text-red" id ="text-red"

>Heading!</h1>

<p style="color: blue;">Paragraph Text</p>

<ul>

</ul>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Apply color red with tag, class, id and blue color with
inline to see the impact of the rules on the tag.

Become PHP Full Stack Web Developer in Just 30 Days

Become PHP Full Stack Web Developer in Just 30 Days
Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Define <p> tag inline as color red. Check if for the next
iteration of <p> will it be red or black.

Will the inline rule is limited to that tag or it is inherited to next tag?

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

3.4 Important Rule Wins

Usage of Important Rule Wins

If Inline is the last rule that applied on the HTML tags and it overrides
all the rule then this important rule will even overwrites the inline
rule.

“!important” is the keyword that we can append to the declaration

property value at the end to indicate to the browser that this is
important than anything else said in the CSS.

Browser will always give important to the rules that has !important at
the end of the rule.

Example: p { color: red!important; }

Observe !important is used after the value and before the “;”

SYNTAX:

p { color: red!important; }

</style>
</head>
<body>
<p style=”color: blue;”>This text will still be red</p>
</body>

Nothing can override the property that is marked as Important.

Sample Example
Download the Example

Become PHP Full Stack Web Developer in Just 30 Days

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Last Rule has the Highest Precedence</title>

p,h1

color: red!important;

#text-blue {

color:blue;

.text-blue {

color: blue;

h1#text-blue{

color: blue;

h1.text-blue{

color:blue;

Become PHP Full Stack Web Developer in Just 30 Days

</style>

</head>

<body>

<h1 style="color: green;" class="text-blue" id ="text-blue"

>Heading!</h1>

<p style="color: blue;">Paragraph Text</p>

<ul>

</ul>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Use the !important for <p> as inline css. Check for next
element is it inherited.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Apply the !important for <p> tag as red and for one p tag
use the inline color as blue with !important.

Become PHP Full Stack Web Developer in Just 30 Days

Which one gets the precedence. Will the paragraph be red or blue?

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

4. Colors and Text

Become PHP Full Stack Web Developer in Just 30 Days

4 Colors and Text

4.1 Colors

Usage of Colors

You can represent colors in CSS using different ways.

Colors can be applied to almost every HTML tag like background,

text, border and fill the box.

Mostly commonly used method to represent colors:

RGB Value

Hex Code Value

Name of the Color.

Become PHP Full Stack Web Developer in Just 30 Days

4 Colors and Text

RGB is represented with the short form rgb(red, green, blue) and
numbers inside it.

RGB(255, 0, 0) – Red, RGB(0, 255, 0) – Green

Hex Code Value is also used to represent the specific colors. The
value starts with # and then followed by numbers & characters in
Hexadecials. It is typically 6 digits long.

background-color: #ff0000;

You can use UPPERCASE – FF or lowercase ff to represents the

HEX value. It is good to use lowercase.

SYNTAX:

a:hover { color: red; }

</style>
</head>
<body>
<a href=”#”>Hover on me and I will turn red in color</a>
</body>

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

Become PHP Full Stack Web Developer in Just 30 Days

4 Colors and Text

<title>CSS Colors</title>

div{

padding: 10px;

width: 50%;

font-size: 40px;

.redboxRGB {

background-color: rgb(255,0,0);

color: white;

.redboxHEX {

background-color: #FF0000;

color: white;

.redboxNAME {

background-color: red;

color: white;

.redboxDARKNAME {

background-color: darkred;

color: white;

</style>

</head>

<body>

RED BOX - RGB - rgb(255,0,0)

</div>

Become PHP Full Stack Web Developer in Just 30 Days

4 Colors and Text

<hr>

RED BOX - HEX - #FF0000

</div>

<hr>

RED BOX - NAME - red

</div>

<hr>

RED BOX - NAME - dark red

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

4 Colors and Text

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Fill the body with GREEN color and all the tags
background colors with White and Text as Black.

Represent the colors only with rgb notation.

rgb(0,0,0) – Black , rgb(255,255,255) – White

Become PHP Full Stack Web Developer in Just 30 Days

4 Colors and Text

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Replace the RGB value with Hex Values for the Exercise 1.

RGB value 255 – Hex Value ff

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

4.2 Text

Usage of Text

Font or Text word is used change the behavior of text on the page.

Here are some of the font and text properties.

font-family – Specify the font-name to be used.

font-size – Specify the size of the font in pixels or px. It is the same
pixel used in MS Word.

font-style – Used to apply the italics, normal or oblique

font-weight – Weight is used to represent how thick the stroke of the

font should be. Usually bold, light, medium

text-transform – Control the case of text – Uppercase or lowercase.

text-decoration – Decorating the text underline or over-line.

text-shadow – Add shadow at the back of the text.

Changing Fonts in CSS is no different that you modify a Word

document and changing the contents.

Most of the words will match with the keywords we use in Microsoft
Word Software.

Sample Example

Download the Example

<!DOCTYPE html>

Become PHP Full Stack Web Developer in Just 30 Days

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>CSS Fonts</title>

font-family: 'Times New Roman', Times, serif;

font-size: 20px; /* em, px, %, normal/medium/large */

line-height: 2em;

letter-spacing: 0.2em;

word-spacing: 1em;

text-align: left; /* left, right, center, justify */

font-style: italic; /* Normal, Italic, Oblique */

font-weight: bold; /* Light, Medium, Bold, Black */

text-transform: uppercase; /* lowercase, capitalize */

text-decoration: underline;

/* none, overline, line-through */

text-indent: 500px;

text-shadow: 1px 1px 0px red;

p::first-letter{

font-size: 200%;

Become PHP Full Stack Web Developer in Just 30 Days

p::first-line{

text-shadow: none;

</style>

</head>

<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting

industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Use the same text as above sample and apply the
following rules without seeing the properties.

Change the Font Name to ‘Georgia’

Font Size to 18 px;

Align the text to be at the Center

Underline the some part of the Text

Become PHP Full Stack Web Developer in Just 30 Days

Capitalize the entire text.

Bold Few things in the text

Italics some words in the text

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Add Text Shadow to First Letter and Make the First Letter
Big. Handle all the changes via the CSS only.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

5. CSS Box

Become PHP Full Stack Web Developer in Just 30 Days

5 CSS Box

5.1 Borders

Usage of Borders

There is a magical box around every HTML tags.

To see the BOX around every HTML tag apply this rule.

*{
border-style: solid;
border-color: red;
}

Become PHP Full Stack Web Developer in Just 30 Days

Always remember that every html tag has a box around it that you
can control.

Every element is a box which is arranged side by side or on top of

each other.

You can control that element by controlling that box.

border-style: solid; – Controls the style of the line

border-color: red; – Color of the border line
border-width: 4px; – Width of the Border Line
border-top-style: dashed; – Apply the style only to top line
border-bottom-style: dotted; – Apply the style only to bottom line

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Page Description">

<title>CSS Box - Border</title>

div{

border-style: solid;

border-color: red;

border-width: 4px;

border-top-style: dashed;

border-bottom-style: dotted;

width: 50%;

Become PHP Full Stack Web Developer in Just 30 Days

}

.blue-border{

border: 5px solid blue;

.green-border{

border: 5px solid green;

</style>

</head>

<body>

<div>

Border Example with Diff line of 4px width and red in color.

</div>

Border Example with Solid line of 5px width and blue in color.

</div>

Border Example with Solid line of 5px width and green in color.

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Draw the Box with Border like this.

border-top-style is used to style the border

border-top-color will change the border color
border-width will change the size of the border width

height: 250px; //This make the box 250 px of height

width: 250px; //This make the box 250 px of width

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Add Border Style Class Selector with blue color and apply
it to h1 to h6.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

5.2 Margin

Usage of Margin

With Margin, you can push the boxes around the HTML tag.

Become PHP Full Stack Web Developer in Just 30 Days

You can add Margin on four sides of the box

TOP

RIGHT

BOTTOM

LEFT

Margin can be used to add spaces between the boxes and push the
boxes around.

Margin Properties:

margin

margin-top

margin-right

margin-bottom

margin-left

Margin can be set in different ways:

Always think like a clock rotating in clockwise direction

Become PHP Full Stack Web Developer in Just 30 Days

Top, Right, Bottom and Left.

That is how the parameters settings are done as well.

h1{
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}

h1{
margin: 5px; /*All the 4 sides will have margin of 5 px;*/
}

h1{
/* margin: top right bottom left */
margin: 5px 5px 5px 5px;
}

h1{
/* margin: top left+right bottom */
margin: 5px 5px 5px;
}

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

Become PHP Full Stack Web Developer in Just 30 Days

<meta name="description" content="Page Description">

<title>CSS Box - Margin</title>

.red-border{

border: 5px solid red;

margin-bottom: 25px;

.blue-border{

border: 5px solid blue;

margin-top: 25px;

margin-left: 20px;

.green-border{

border: 5px solid green;

margin-left:50px;

margin-top: 25px;

</style>

</head>

<body>

Margin Example with Solid red line.

</div>

<div class="red-border" style="border-style: dashed">

Become PHP Full Stack Web Developer in Just 30 Days

Margin Example with Dashed red line.

</div>

<div class="red-border" style="border-style: dotted">

Margin Example with Dotted red line.

</div>

Margin Example with Solid Blue line.

</div>

<div class="blue-border" style="border-style: dashed">

Margin Example with Dashed Blue line.

</div>

<div class="blue-border" style="border-style: dotted">

Margin Example with Dotted Blue line.

</div>

Margin Example with Solid Green line.

</div>

<div class="green-border" style="border-style: dashed">

Margin Example with Dashed Green line.

</div>

<div class="green-border" style="border-style: dotted">

Margin Example with Dotted Green line.

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Become PHP Full Stack Web Developer in Just 30 Days
Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Add h1 and p tag and add a red color border. Add
negative value to <p> margin-top: -50px;

Observe the Output.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Push the paragraph to the bottom of the page and

heading on the top of the page.

Add the margin to h1 tag.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

5.3 Padding

Usage of Padding

Padding is the extra space that you inside the box.

Padding add extra space inside the box to make it look bigger.

Become PHP Full Stack Web Developer in Just 30 Days

Padding properties are similar to margin properties the only
different is that margin add space after the box and padding add
space inside the box.

Padding add space inside the box.

Margin add space outside the box.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>CSS Box - Padding</title>

Become PHP Full Stack Web Developer in Just 30 Days

.red-border{

border: 5px solid red;

padding-top: 10px;

.blue-border{

border: 5px solid blue;

padding-left: 10px;

.green-border{

border: 5px solid green;

padding: 10px;

</style>

</head>

<body>

Padding Top Example with Solid red line. No Margin.

</div>

Padding Top Example with Solid red line. No Margin.

</div>

Padding Top Example with Diff red line. No Margin.

</div>

Become PHP Full Stack Web Developer in Just 30 Days

Padding Left Example with Solid blue line. No Margin.

</div>

Padding Left Example with Solid blue line. No Margin.

</div>

Padding Left Example with Solid blue line. No Margin.

</div>

Padding all sides Example with Solid green line. No Margin.

</div>

Padding all sides Example with Solid green line. No Margin.

</div>

Padding all sides Example with Solid green line. No Margin.

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Create RED Box of Width 250px and Height 100px and
add margin of 100px all sides and padding of 50px all sides.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Draw 4 red square box at 4 corner of the page.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

5.4 Height and Width

Usage of Height and Width

Height and Width property is used to control the box sizes.

How big or small you want the box size is defined with this property.

You can even set the minimum and maximum height and width of
the box.

This is very important property to organize the boxes size on the

page.

Become PHP Full Stack Web Developer in Just 30 Days

100 x 250 means 100 Width x 250 Height

Properties of the Height and Width:

width

height

minwidth

minheight

maxwidth

maxheight

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>CSS Box - Width and Height</title>

.box250 {

height: 250px;

width: 250px;

border: 5px solid green;

margin: 10px;

min-width: 100px;

Become PHP Full Stack Web Developer in Just 30 Days

min-height: 100px;

.minbox100 {

border: 5px solid green;

margin: 10px;

min-width: 300px;

min-height: 300px;

.maxbox500 {

border: 5px solid green;

margin: 10px;

max-width: 500px;

max-height: 500px;

</style>

</head>

<body>

This is a box with 250x250 size and green border and margin of
10px.

</div>

<div class="box250" style="padding: 10px;">

This is a box with 250x250 size and green border and margin of
10px. <strong>It also has Padding of 10px all sides.</strong>

</div>

This is a box with 250x250 size and green border and margin of
10px.

</div>

I am a flexible box and I can become as small as 300px. How big

i can grow? No Limit.

Become PHP Full Stack Web Developer in Just 30 Days

</div>

I am a flexible box and I can grow as big as 500px. I can be

the smallest.

</div>

</body>

</html>

Exercise 1

Download the Exercise 1

Exercise 1: Draw two box on top of each other.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Draw two boxes side by side.

Use the Property display: inline on both box1 and box2

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

6. Floating Columns

Become PHP Full Stack Web Developer in Just 30 Days

6 Floating Columns

6.1 Floating Box

Usage of Floating Box

float property to specify the element to float left or right or follow the
existing flow of box arrangement.

float: none|left|right|initial|inherit;

none – This will follow the default floating of box and it also breaks
the existing floating property set by it siblings or parent.

left and right – allows to element to float left or right

initial – Custom value can be given to float the element

inherit – Follows the inheritance property from its parent style.

clear: both – property will clear the floating of boxes next to each
other.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

Become PHP Full Stack Web Developer in Just 30 Days

<title>Floating Example</title>

.box{

height: 130px;

width: 130px;

margin-bottom: 10px;

margin-right: 10px;

.blue{

background-color: #5bc0de;

float: left;

.green{

background-color: #5cb85c;

float: right;

</style>

</head>

<body>

<div class="box blue"></div>

<div class="box green"></div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Draw 2 box one row and another two box another row.
Like a 2 x 2 matrix.

Use Property: clear: both; to break the floating of boxes.

BOX 1 BOX 2

BOX 3 BOX 4

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Float one box on left and one on right.

Try: float: center;

See the code for more details.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

6.2 Floating Images

Usage of Floating Images

Text beside the images can be floated to right or left with the float
property.

Like the articles in the newspaper, you have the image and then text
running sometime or left side or right side.

This is achieved by floating the image to left or right and then next
text element will float with it.

Code Snippet to clear floating:

.clearfix::after {
content: “.”;
/* This display property you will learn in next lesson */

Become PHP Full Stack Web Developer in Just 30 Days

display: block;
clear: both;
height: 0;
/* Hide the content that we placed above “.” */
visibility: hidden;
}

This code snippet is a famous hack that many developers use to clear
any floating objects after the box.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Floating Example</title>

h1 {

text-align: center;

text-decoration: underline;

img {

margin-right: 20px;

.clearfix::after {

content: "";

Become PHP Full Stack Web Developer in Just 30 Days

clear: both;

display: table;

content: ".";

display: block;

clear: both;

height: 0;

visibility: hidden;

.float-left {

float: left;

.float-right{

float: right;

</style>

</head>

<body>

<h1>German Shepherd</h1>

<img class="float-left" src ="dog1.jpg" alt="German Shepherd"

height="250px" width="250px">

<p>The German Shepherd (German: Deutscher Schäferhund, German

pronunciation: is a breed of medium to large-sized working dog that
originated in Germany. The breed's officially recognized name is German
Shepherd Dog in the English language (sometimes abbreviated as GSD). The
breed was once known as the Alsatian in Britain and Ireland.</p>

</div>

<hr>

Become PHP Full Stack Web Developer in Just 30 Days

<p>The German Shepherd (German: Deutscher Schäferhund, German

</div>

<hr>

<img class="float-left" src ="dog1.jpg" alt="German Shepherd"

height="250px" width="250px">

<img class="float-left" src ="dog1.jpg" alt="German Shepherd"

height="250px" width="250px">

<img class="float-left" src ="dog1.jpg" alt="German Shepherd"

height="250px" width="250px">

</div>

<hr>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Draw a table with two columns and display content as

below.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 2

Download the Exercise 2

Exercise 2: Put the Image in the center and text in the center without
table.

Use Property on img:

display: block;
margin-left: auto;
margin-right: auto;

Refer to the code for more details

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

6.3 Horizontal Menu

Usage of Horizontal Menu

display: inline-block property is used to align all the block side by

side.

Floating the <li> elements left will align all the block to stick together.

There are two properties in this declaration inline-block – one is

block and another one is inline.

All the properties of block can be applied to display:inline-block.

display property controls the behavior of the displaying the

elements on the page.

display: none; will hide that element on the page.

display: block will show the block

display: inline will show the block inline.

With display: inline-block allows to set the height and width of the
block where as display: inline does not.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Floating Example</title>

Become PHP Full Stack Web Developer in Just 30 Days

ul{

background-color: #333;

list-style-type: none;

overflow: hidden;

li{

float: left;

li a{

display: inline-block;

color: white;

padding: 14px 16px;

text-decoration: none;

</style>

</head>

<body>

<ul>

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

<li><a href="#">About</a></li>

</ul>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Write a simple html page with h1, p and li tags and with
display property hide everything on the page.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 2

Download the Exercise 2

Exercise 2: Add Red Underline on hover of the menu elements.

Live Preview

6.4 Vertical Menu

Usage of Vertical Menu

Vertical menu is achieved by displaying the each list items as block

and not floating either to left or right.

NOT Floating the <li> elements left/right will align all the block stack
one top of each other.

It is like block of items stacked on top of each other.

Remove the float: left from previous horizontal menu and you can
find all the elements stack vertically.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

Become PHP Full Stack Web Developer in Just 30 Days

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Floating Example</title>

ul{

background-color: #333;

list-style-type: none;

width: 200px;

li a{

display: block; /* Make the links appear below each other

color: white;

padding: 8px 16px;

text-decoration: none;

</style>

</head>

<body>

<ul>

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

<li><a href="#">About</a></li>

</ul>

Become PHP Full Stack Web Developer in Just 30 Days

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Change the Color of the Link when hover over it.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Combine the Horizontal Menu and Vertical menu

together and do it without seeing the code.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

7. Positioning
Elements

Become PHP Full Stack Web Developer in Just 30 Days

7 Positioning Elements

7.1 Position Fixed

Usage of Position Fixed

With position: fixed property any element can be fixed at any

position of the screen.

Once the element property is mentioned as position: fixed then

using the following property the element can be moved any where
on the page.

top

right

bottom

left

Element will be fixed and will will not move on the page.

It is good when you want to show a header bar or footer

announcement of some pages.

Sample Example

Download the Example

<!DOCTYPE html>

Become PHP Full Stack Web Developer in Just 30 Days

<html>

<head>

<!-- <meta name="viewport" content="width=device-width, initial-

scale=1.0"> -->

<meta name="description" content="Page Description">

<title>Fixed Bar Position at Bottom of Page</title>

/* Default Page & Font Styles - Because we love to see nice design.
*/

body, html {

height: 100%;

p {

margin: 0 auto;

max-width: 600px;

margin-top: 40px;

line-height: 1.5;

body {

font-family: Georgia, serif;

h1 {

text-align: center;

/* Lesson Example - Focus on below code. */

Become PHP Full Stack Web Developer in Just 30 Days

.announcement-bottom {

background-color: red;

opacity: .85;

padding: 20px;

color: rgba(255,255,255,.9);

position: fixed;

bottom: 0; /* Key Property */

left: 0;

right: 0;

text-align: center;

.announcement-top{

background: #d4765d;

position: fixed;

top: 0; /* Key Property */

left: 0;

right: 0;

/* z-index: 2; */

/* opacity: .85; */

text-align: center;

color: white;

padding: 20px;

</style>

</head>

<body>

<div class="announcement-top">Get this 10% Off.</div>

<div class="announcement-bottom">Fixed Element at end of the

Page</div>

<h1>Position: Fixed</h1>

Become PHP Full Stack Web Developer in Just 30 Days

<p>What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted

by the readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content here', making it look
like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for
'lorem ipsum' will uncover many web sites still in their infancy. Various
versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random

text. It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
words, consectetur, from a Lorem Ipsum passage, and going through the cites
of the word in classical literature, discovered the undoubtable source.
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
This book is a treatise on the theory of ethics, very popular during the
Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is

reproduced below for those interested. Sections 1.10.32 and 1.10.33 from
"de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
exact original form, accompanied by English versions from the 1914
translation by H. Rackham.

Where can I get some?

There are many variations of passages of Lorem Ipsum available,

but the majority have suffered alteration in some form, by injected humour,

Become PHP Full Stack Web Developer in Just 30 Days

or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text. All the Lorem Ipsum
generators on the Internet tend to repeat predefined chunks as necessary,
making this the first true generator on the Internet. It uses a dictionary
of over 200 Latin words, combined with a handful of model sentence
structures, to generate Lorem Ipsum which looks reasonable. The generated
Lorem Ipsum is therefore always free from repetition, injected humour, or
non-characteristic words etc.

</p>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 1: Write Your Name on the top, right, bottom and left of the
page.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Display a Word Center of the page.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

7.2 Position Absolute

Usage of Position Absolute

Positions allows to move the element around the pages.

By default without CSS, browser will lay all the element one after the
other.

To arrange them into correct position we use this position

declaration.

Become PHP Full Stack Web Developer in Just 30 Days

With position: absolute we break the running flow of browser
placement and position based on the body position again.

Example:

<p>This is paragraph</p>

Without CSS, they both appear one after the other. h1 tags starts
from the absolute position the parent position and <p> tag will follow
the flow and sit after <h1>

If you want to break the <p> flow and want to position somewhere
else and follow the new location then we set the position of that
element as absolute.

Then browser will start placing them again from top.

position: absolute tells the browser to take this element out of the
flow and start putting from the absolute body position not the
current flow.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<!-- <meta name="viewport" content="width=device-width, initial-

scale=1.0"> -->

<meta name="description" content="Page Description">

<title>Fixed Bar Position at Bottom of Page</title>

/* Page Styles */

Become PHP Full Stack Web Developer in Just 30 Days

/* Exercise Section */

.container {

background: rgba(0,0,0,.4);

height: 250px;

width: 250px;

margin-left: 300px;

margin-top: 150px;

.box

height: 150px;

width: 150px;

background-color: #5bc0de;

top: 50px;

left: 50px;

position: absolute; /* Absolute to Document and break from

parent */

</style>

</head>

<body>

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Open the Example 1 file and change the parameter to

observe the behavior of the box.

position: absolute; ==> position: relative;

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Draw 2 box (box1 and box2) within one container to and
lay them on top of each other.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

7.3 Position Relative

Usage of Position Relative

Become PHP Full Stack Web Developer in Just 30 Days

Relative is just tell browser to follow the current flow and make it
relative to is parent.

Where ever the parent element is, relative property will make the
child stack them relative to parent element.

position: relative helps to group the parent and child together and
flow them next to each other.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<!-- <meta name="viewport" content="width=device-width, initial-

scale=1.0"> -->

<meta name="description" content="Page Description">

<title>Fixed Bar Position at Bottom of Page</title>

/* Page Styles */

body {

background: rgba(0,0,0,.1);

/* Exercise Section */

.container {

background: rgba(0,0,0,.4);

height: 250px;

width: 250px;

Become PHP Full Stack Web Developer in Just 30 Days

margin-left: 500px;

margin-top: 150px;

position: relative; /* For all my child element this is the

document. */

.box

height: 150px;

width: 150px;

background-color: #5bc0de;

top: 50px;

left: 50px;

position: absolute;

</style>

</head>

<body>

</div>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Draw two box inside the container stack them vertically.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Draw 3 boxes side by side inside the container

horizontally.

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

8. Display inline
Block
Become PHP Full Stack Web Developer in Just 30 Days
8 Display Inline and Block

8 Display Inline and Block

8.1 Display Inline & Block Example 1

Usage of Display Inline Example 1

display: inline and display:block is the most important CSS rule

that will help to align all the blocks in the page as you want.

display:inline will arrange all the elements side by side.

Become PHP Full Stack Web Developer in Just 30 Days

display:block will arrange all the elements one after the other.

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Display Inline Example</title>

/* Page Styles */

/* Exercise Section */

span

display: block;

div

display: inline;

</style>

Become PHP Full Stack Web Developer in Just 30 Days

</head>

<body>

<span>Hello This is the first span tag.</span>

<span>Hello This is the second span tag.</span>

<span>Hello This is the third span tag.</span>

<div>Hello This is the first div tag.</div>

<div>Hello This is the second div tag.</div>

<div>Hello This is the third div tag.</div>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Exercise 1: Display the images side by side and one after the other
with display inline and block.

Become PHP Full Stack Web Developer in Just 30 Days

Become PHP Full Stack Web Developer in Just 30 Days
Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Draw two menu one with inline and another one with
block.

Live Preview

8.2 Display Inline & Block Example 2

Usage of Display Inline Example 2

display:inline will not allow to change the height and width of the
box.

display:inline-block can be used to change height and width of the

box and still remain inline.

Sample Example

Download the Example

<!DOCTYPE html>

Become PHP Full Stack Web Developer in Just 30 Days

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<meta name="description" content="Page Description">

<title>Display Inline and Block Example</title>

/* Page Styles */

/* Exercise Section */

body{

color: white;

li{

display: block;

li {

display: inline;

background-color: blue;

width: 100px; /* Cannot add width and height when

display is inline. */

height: 100px;

li{

display: inline-block;

background-color: blue;

Become PHP Full Stack Web Developer in Just 30 Days

width: 100px;

height: 100px;

</style>

</head>

<body>

<ul>

<li>Contact</li>

<li>About</li>

</ul>

</body>

</html>

Live Preview

Exercise 1

Download the Exercise 1

Become PHP Full Stack Web Developer in Just 30 Days

Exercise 1: Try to change the height and width of the box when
display:inline is used.

Live Preview

Exercise 2

Download the Exercise 2

Exercise 2: Draw two boxes and align them side by side with
display:inline. Try to change the size of the box with width and
height.

Change the display:inline with display:inline-block;

See the difference.

Live Preview

Become PHP Full Stack Web Developer in Just 30 Days

9. Layouts

Become PHP Full Stack Web Developer in Just 30 Days

9 Layouts

9.1 Layout 1

Usage of Layout 1

Build a simple layout with the following things:

Header

Content

Footer

Sample Example

Become PHP Full Stack Web Developer in Just 30 Days

Download the Example

<!DOCTYPE html>

<html>

<head>

<title>Sample HTML5 Layout</title>

<style>

body {

width: 940px;

margin: 0 auto;

font: "Georgia", Arial, sans-serif;

header,section,article,aside,footer{

display: block;

header, footer

padding: 0px;

text-align:center;

</style>

</head>

<body>

<h1>Page Layout 1</h1>

</header>

<hr>

Become PHP Full Stack Web Developer in Just 30 Days

<header><h1><u>Article 1</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>

<p>#End of Article 1</p>

</article>

<header><h1><u>Article 2</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>

<p>#End of Article 2</p>

</article>

</section>

<hr>

</footer>

</body>

</html>

Become PHP Full Stack Web Developer in Just 30 Days

Live Preview

Project Work 1:

Build the same layout from scratch by adding a horizontal menu

under the header.

Try it yourself as a Project!

9.2 Layout 2

Usage of Layout 2

Build a simple layout with the following things:

Header

Content

Left Sidebar

Footer

Become PHP Full Stack Web Developer in Just 30 Days

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<title>Sample HTML5 Layout</title>

<style>

body {

width: 940px;

margin: 0 auto;

font: "Georgia", Arial, sans-serif;

header,section,article,aside,footer{

display: block;

header, footer

Become PHP Full Stack Web Developer in Just 30 Days

{

padding:0px;

text-align:center;

aside{

float: left;

section{

float: right;

width: 700px;

padding-left: 20px;

border-left: 2px dotted #b2a497;

footer{

clear:both !important;

width:940px;

height: 100px;

padding: 10px;

</style>

</head>

<body>

<h1>Page Layout 2</h1>

</header>

<hr>

<aside>

Become PHP Full Stack Web Developer in Just 30 Days

<figcaption>German Breed</figcaption>

</figure>

<div>

<ul>

<li><a href="#">About</a></li>

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

</ul>

</div>

</aside>

<header><h1><u>Article 1</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>

<p>#End of Article 1</p>

</article>

<header><h1><u>Article 2</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>

<p>#End of Article 2</p>

</article>

</section>

Become PHP Full Stack Web Developer in Just 30 Days

<hr>

</footer>

</body>

</html>

Live Preview

Project Work 1:

Build the same layout from scratch by adding a horizontal menu

under the footer also.

Try it yourself as a Project!

9.3 Layout 3

Usage of Layout 3

Build a simple layout with the following things:

Become PHP Full Stack Web Developer in Just 30 Days

Header

Top Navigation Menu

Content

Left Side Bar

Footer

Sample Example

Download the Example

<!DOCTYPE html>

<html>

<head>

<title>Sample HTML5 Layout</title>

<style>

body {

width: 940px;

margin: 0 auto;

font: "Georgia", Arial, sans-serif;

Become PHP Full Stack Web Developer in Just 30 Days

header,section,article,aside,footer{

display: block;

header, footer

padding: 0px;

text-align:center;

</style>

</head>

<body>

<h1>Page Layout 1</h1>

</header>

<hr>

<header><h1><u>Article 1</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>

<p>#End of Article 1</p>

</article>

<header><h1><u>Article 2</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy

Become PHP Full Stack Web Developer in Just 30 Days

text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>

<p>#End of Article 2</p>

</article>

</section>

<hr>

</footer>

</body>

</html>

Live Preview

Project Work 1:

Build the same layout from scratch by adding a right side sidebar
along with the left side.

Try it yourself as a Project!

Become PHP Full Stack Web Developer in Just 30 Days

9.4 Layout 4

Usage of Layout 4

Build a simple layout with the following things:

Header

Top Navigation Menu

Content

Left Side Bar

Right Side Bar

Footer

Sample Example

Download the Example

Become PHP Full Stack Web Developer in Just 30 Days

<!DOCTYPE html>

<html>

<head>

<title>Sample HTML5 Layout</title>

<style>

body {

width: 940px;

margin: 0 auto;

font: "Georgia"", sans-serif;

header,section,article,aside,footer{

display: block;

header, footer

padding:0px;

text-align:center;

nav

text-align:center;

nav ul

list-style-type: none;

padding: 0;

margin-bottom: 0;

nav li

Become PHP Full Stack Web Developer in Just 30 Days

{

display: inline-block;

margin: 0 0 0 50px;

width: 100px;

aside, .aleft{

float: left;

aside, .aright{

float: right;

section{

float: left;

width: 500px;

padding-left: 20px;

padding-right: 20px;

border-left: 2px dotted #b2a497;

border-right: 2px dotted #b2a497;

footer{

clear:both !important;

width:940px;

height: 100px;

padding: 10px;

</style>

</head>

<body>

<h1>Page Layout 4</h1>

Become PHP Full Stack Web Developer in Just 30 Days

</header>

<hr>

<nav>

<ul>

<li><a href="#">About</a></li>

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

</ul>

</nav>

<hr>

<img src="dog1.jpg" height="100px" width="100px" />

<figcaption>German Breed</figcaption>

</figure>

<div>

<ul>

<li><a href="#">About</a></li>

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

</ul>

</div>

</aside>

<header><h1><u>Article 1</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>

Become PHP Full Stack Web Developer in Just 30 Days

<p>#End of Article 1</p>

</article>

<header><h1><u>Article 2</u></h1></header>

<div>

<p>Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book.</p>

</div>