Scribd
Upload
13 views44 pages

Comprehensive CSS Tutorial Guide

Fffg

Uploaded by

duttamoksh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views44 pages

Comprehensive CSS Tutorial Guide

Fffg

Uploaded by

duttamoksh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS Tutorial

CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology.
Our CSS tutorial is developed for beginners and professionals. The major points of CSS are
given below:

 CSS stands for Cascading Style Sheet.


 CSS is used to design HTML tags.
 CSS is a widely used language on the web.
 HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.

CSS Example with CSS Editor


In this tutorial, you will get a lot of CSS examples, you can edit and run these examples with
our online CSS editor tool.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <style>
5. h1{
6. color:white;
7. background-color:red;
8. padding:5px;
9. }
10. p{
11. color:blue;
12. }
13. </style>
14. </head>

121 | P a g e
15. <body>
16. <h1>Write Your First CSS Example</h1>
17. <p>This is Paragraph.</p>
18. </body>
19. </html>

Test it Now

Output:

Write Your First CSS Example


This is Paragraph.

What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user
interfaces. It can also be used with any kind of XML documents including plain XML, SVG
and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

What does CSS do


 You can add new looks to your old HTML documents.
 You can completely change the look of your website with only a few changes in CSS
code.

Why use CSS


These are the three major benefits of CSS:

1) Solves a big problem


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

122 | P a g e
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.

3) Provide more attributes


CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

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

Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by
a semicolon. For the above example, there are two declarations:

1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

Selector{Property1: value1; Property2: val


ue2; ..........;} CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS

123 | P a g e
rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector


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

1) CSS Element Selector


The element selector selects the HTML element by name.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>

Test it Now

Output:

This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id
is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

124 | P a g e
Let?s take an example with the id "para1".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello [Link]</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>

Test it Now

Output:

Hello [Link]

This paragraph will not be affected.

3) CSS Class Selector


The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>

125 | P a g e
14. </body>
15. </html>

Test it Now

Output:

This heading is blue and center-aligned.


This paragraph is blue and center-aligned.

CSS Class Selector for specific element


If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.

Let's see an example.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

Test it Now

Output:

This heading is not affected


This paragraph is blue and center-aligned.

4) CSS Universal Selector

126 | P a g e
The universal selector is used as a wildcard character. It selects all the elements on the pages.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. * {
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>

Test it Now

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!

5) CSS Group Selector


The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.

Let's see the CSS code without group selector.

1. h1 {
2. text-align: center;
3. color: blue;
4. }
5. h2 {
6. text-align: center;

127 | P a g e
7. color: blue;
8. }
9. p {
10. text-align: center;
11. color: blue;
12. }

As you can see, you need to define CSS properties for all the elements. It can be grouped in
following ways:

1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }

Let's see the full example of CSS group selector.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello [Link]</h1>
13. <h2>Hello [Link] (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>

Output:

Hello [Link]
Hello [Link] (In smaller font)

This is a paragraph.

How to add CSS


CSS is added to HTML pages to format the document according to information in the style
sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS

128 | P a g e
3. External CSS

1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.

For example:

1. <p style="color:blue">Hello CSS</p>

For more visit here: Inline CSS

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements
of the page. It is written inside the style tag within head section of html.

For example:

1. <style>
2. p{color:blue}
3. </style>

For more visit here: Internal CSS

3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS
code in a css file. Its extension must be .css for example [Link].

For example:

1. p{color:blue}

You need to link this [Link] file to your html pages like this:

1. <link rel="stylesheet" type="text/css" href="[Link]">

The link tag must be used inside head section of html.

129 | P a g e
Inline CSS
We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method
mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Example:

1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>


2. <p>This paragraph is not affected.</p>

Output:

Inline CSS is applied on this heading.


This paragraph is not affected.

Disadvantages of Inline CSS


 You cannot use quotations within inline CSS. If you use quotations the browser will
interpret this as an end of your style value.
 These styles cannot be reused anywhere else.
 These styles are tough to be edited because they are not stored at a single place.
 It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
 Inline CSS does not provide browser cache advantages.

Internal CSS
The internal style sheet is used to add a unique style for a single document. It is defined in
<head> section of the HTML page inside the <style> tag.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {

130 | P a g e
6. background-color: linen;
7. }
8. h1 {
9. color: red;
10. margin-left: 80px;
11. }
12. </style>
13. </head>
14. <body>
15. <h1>The internal style sheet is applied on this heading.</h1>
16. <p>This paragraph will not be affected.</p>
17. </body>
18. </html>

External CSS
The external style sheet is generally used when you want to make changes on multiple pages.
It is ideal for this condition because it facilitates you to change the look of the entire web site
by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

Example:

1. <head>
2. <link rel="stylesheet" type="text/css" href="[Link]">
3. </head>

The external style sheet may be written in any text editor but must be saved with a .css
extension. This file should not contain HTML elements.

Let's take an example of a style sheet file named "[Link]".

File: [Link]

1. body {
2. background-color: lightblue;
3. }
4. h1 {
5. color: navy;
6. margin-left: 20px;
7. }

Note: You should not use a space between the property value and the unit. For example: It
should be margin-left:20px not margin-left:20 px.

CSS Comments
131 | P a g e
CSS comments are generally written to explain your code. It is very helpful for the users who
reads your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/ .

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. color: blue;
7. /* This is a single-line comment */
8. text-align: center;
9. }
10. /* This is
11. a multi-line
12. comment */
13. </style>
14. </head>
15. <body>
16. <p>Hello [Link]</p>
17. <p>This statement is styled with CSS.</p>
18. <p>CSS comments are ignored by the browsers and not shown in the output.</p>
19. </body>
20. </html>

Output:

Hello [Link]

This statement is styled with CSS.

CSS comments are ignored by the browsers and not shown in the output.

CSS Background
CSS background property is used to define the background effects on element. There are 5
CSS background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

132 | P a g e
1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello Javatpoint. This is an example of CSS background-color.</p>
13. </body>
14. </html>

Output:

My first CSS page.


Hello Javatpoint. This is an example of CSS background-color.

2) CSS background-image
The background-image property is used to set an image as a background of an element. By
default the image covers the entire element. You can set the background image for a page like
this.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("[Link]");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello [Link]</h1>

133 | P a g e
13. </body>
14. </html>

Note: The background image should be chosen according to text color. The bad combination
of text and background image may be a cause of poor designed and not readable webpage.

3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-x;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello [Link]</h1>
13. </body>
14. </html>

background-repeat: repeat-y;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-y;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello [Link]</h1>
13. </body>
14. </html>

134 | P a g e
4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or
scroll with the rest of the page in browser window. If you set fixed the background image
then the image will not move during scrolling in the browser. Let?s take an example with
fixed background image.

1. background: white url('[Link]');


2. background-repeat: no-repeat;
3. background-attachment: fixed;

5) CSS background-position
The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

1. background: white url('[Link]');


2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;

CSS Border
The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the border of an
element. The CSS border properties are given below

 border-style
 border-color
 border-width
 border-radius

1) CSS border-style

135 | P a g e
The Border style property is used to specify the border type which you want to display on the
web page.

There are some border style values which are used with border-style property to define a
border.

Value Description

none It doesn't define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

solid It is used to define a solid border.

double It defines two borders wIth the same border-width value.

groove It defines a 3d grooved border. effect is generated according to border-color value.

ridge It defines a 3d ridged border. effect is generated according to border-color value.

inset It defines a 3d inset border. effect is generated according to border-color value.

outset It defines a 3d outset border. effect is generated according to border-color value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {border-style: none;}
6. [Link] {border-style: dotted;}
7. [Link] {border-style: dashed;}
8. [Link] {border-style: solid;}
9. [Link] {border-style: double;}
10. [Link] {border-style: groove;}
11. [Link] {border-style: ridge;}
12. [Link] {border-style: inset;}
13. [Link] {border-style: outset;}
14. [Link] {border-style: hidden;}
15. </style>
16. </head>
17. <body>
18. <p class="none">No border.</p>
19. <p class="dotted">A dotted border.</p>
20. <p class="dashed">A dashed border.</p>
21. <p class="solid">A solid border.</p>
22. <p class="double">A double border.</p>
23. <p class="groove">A groove border.</p>
24. <p class="ridge">A ridge border.</p>
25. <p class="inset">An inset border.</p>
26. <p class="outset">An outset border.</p>

136 | P a g e
27. <p class="hidden">A hidden border.</p>
28. </body>
29. </html>

Output:

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

2) CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can also
use the one of the three pre-defined values, thin, medium or thick to set the width of the
border.

Note: The border-width property is not used alone. It is always used with other border properties like
"border-style" property to set the border first otherwise it will not work.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. border-style: solid;
7. border-width: 5px;
8. }
9. [Link] {
10. border-style: solid;
11. border-width: medium;

137 | P a g e
12. }
13. [Link] {
14. border-style: solid;
15. border-width: 1px;
16. }
17. </style>
18. </head>
19. <body>
20. <p class="one">Write your text here.</p>
21. <p class="two">Write your text here.</p>
22. <p class="three">Write your text here.</p>
23. </body>
24. </html>

3) CSS border-color
There are three methods to set the color of the border.

 Name: It specifies the color name. For example: "red".


 RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
 Hex: It specifies the hex value of the color. For example: "#ff0000".

There is also a border color named "transparent". If the border color is not set it is inherited
from the color property of the element.

Note: The border-color property is not used alone. It is always used with other border properties like
"border-style" property to set the border first otherwise it will not work.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. border-style: solid;
7. border-color: red;
8. }
9. [Link] {
10. border-style: solid;
11. border-color: #98bf21;
12. }
13. </style>
14. </head>
15. <body>
16. <p class="one">This is a solid red border</p>
17. <p class="two">This is a solid green border</p>
18. </body>
19. </html>

CSS border-collapse property


138 | P a g e
This CSS property is used to set the border of the table cells and specifies whether the table
cells share the separate or common border.

This property has two main values that are separate and collapse. When it is set to the value
separate, the distance between the cells can be defined using the border-spacing property.
When the border-collapse is set to the value collapse, then the inset value of border-style
property behaves like groove, and the outset value behaves like ridge.

Syntax

1. border-collapse: separate | collapse | initial | inherit;

The values of this CSS property are defined as follows.

Property Values

separate: It is the default value that separates the border of the table cell. Using this value,
each cell will display its own border.

collapse: This value is used to collapse the borders into a single border. Using this, two
adjacent table cells will share a border. When this value is applied, the border-spacing
property does not affect.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's understand this CSS property by using some examples. In the first example, we are
using the separate value of the border-collapse property. In the second example, we are
using the collapse value of the border-collapse property.

Example - Using separate value

With this value, we can use the border-spacing property to set the distance between the
adjacent table cells.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-collapse property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. width: 80%;
12. height: 50%;
13. }
14. th{

139 | P a g e
15. border: 5px solid red;
16. background-color: yellow;
17. }
18. td{
19. border: 5px solid violet;
20. background-color: cyan;
21. }
22. #t1 {
23. border-collapse: separate;
24. }
25. </style>
26. </head>
27.
28. <body>
29.
30. <h1> The border-collapse Property </h1>
31. <h2> border-collapse: separate; </h2>
32. <table id = "t1">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>
46. <td> Alan </td>
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59.
60. </html>

Test it Now

Output

140 | P a g e
Example - Using collapse property

The border-spacing and border-radius properties cannot be used with this value.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-collapse property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. width: 80%;
12. height: 50%;
13. }
14. th{
15. border: 5px solid red;
16. background-color: yellow;
17. }
18. td{
19. border: 5px solid violet;
20. background-color: cyan;
21. }
22. #t1{
23. border-collapse: collapse;
24. }
25. </style>
26. </head>
27.
28. <body>
29.
30. <h1> The border-collapse Property </h1>
31. <h2> border-collapse: collapse; </h2>
32. <table id = "t1">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>
46. <td> Alan </td>

141 | P a g e
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59. </html>

Test it Now

Output

CSS border-spacing property


This CSS property is used to set the distance between the borders of the adjacent cells in the
table. It applies only when the border-collapse property is set to separate. There will not be
any space between the borders if the border-collapse is set to collapse.

It can be defined as one or two values for determining the vertical and horizontal spacing.

 When only one value is specified, then it sets both horizontal and vertical spacing.
 When we use the two-value syntax, then the first one is used to set the horizontal spacing (i.e.,
the space between the adjacent columns), and the second value sets the vertical spacing (i.e.,
the space between the adjacent rows).

Syntax

1. border-spacing: length | initial | inherit;

Property Values

The values of this CSS property are defined as follows.

length: This value sets the distance between the borders of the adjacent table cells in px, cm,
pt, etc. Negative values are not allowed.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Let's understand this CSS property by using some examples. In the first example, we are
using the single value of the border-spacing property, and in the second example, we are

142 | P a g e
using two values of the border-spacing property.

Example

Here, we are using the single value of the border-spacing property. The border-collapse
property is set to separate, and the value of the border-spacing is set to 45px.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-spacing property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. background-color: lightgreen;
12. }
13. th{
14. border: 5px solid red;
15. background-color: yellow;
16. }
17. td{
18. border: 5px solid violet;
19. background-color: cyan;
20. }
21. #space{
22. border-collapse: separate;
23. border-spacing: 45px;
24. }
25. </style>
26. </head>
27.
28. <body>
29.
30. <h1> The border-spacing Property </h1>
31. <h2> border-spacing: 45px; </h2>
32. <table id = "space">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>

143 | P a g e
46. <td> Alan </td>
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59.
60. </html>

Output

Example

Here, we are using two values of the border-spacing property. The border-collapse property
is set to separate, and the value of the border-spacing is set to 20pt 1em. The first value,
i.e., 20pt sets the horizontal spacing, and the value 1em set the vertical spacing.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-spacing property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. background-color: lightgreen;
12. }
13. th{
14. border: 5px solid red;
15. background-color: yellow;
16. }
17. td{
18. border: 5px solid violet;
19. background-color: cyan;
20. }
21. #space{
22. border-collapse: separate;
23. border-spacing: 20pt 1em;
24. }
25. </style>
26. </head>

144 | P a g e
27.
28. <body>
29.
30. <h1> The border-spacing Property </h1>
31. <h2> border-spacing: 20pt 1em; </h2>
32. <table id = "space">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>
46. <td> Alan </td>
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59.
60. </html>

CSS Display
CSS display is the most important property of CSS which is used to control the layout of the
element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that rectangular
box.

CSS Display default properties


default value inline
inherited no
animation supporting no

145 | P a g e
version css1
javascript syntax [Link]="none"

Syntax
1. display:value;

CSS display values


There are following CSS display values which are commonly used.

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: run-in;
5. display: none;

1) CSS display inline


The inline element takes the required width only. It doesn't force the line break so the flow of
text doesn't break in inline example.

The inline elements are:

 <span>
 <a>
 <em>
 <b> etc.

Let's see an example of CSS display inline.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello [Link]</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>

146 | P a g e
16. </body>
17. </html>

Output:

Hello [Link] Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

2) CSS display inline-block


The CSS display inline-block element is very similar to inline element but the difference is
that you are able to set the width and height.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline-block;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello [Link]</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello [Link] Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

3) CSS display block


The CSS display block element takes as much as horizontal space as they can. Means the
block element takes the full available width. They make a line break before and after them.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. display: block;

147 | P a g e
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello [Link]</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello [Link]

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

4) CSS display run-in


This property doesn't work in Mozilla Firefox. These elements don't produce a specific box
by themselves.

 If the run-in box contains a bock box, it will be same as block.


 If the block box follows the run-in box, the run-in box becomes the first inline box of
the block box.
 If the inline box follows the run-in box, the run-in box becomes a block box.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: run-in;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello [Link]</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>

148 | P a g e
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello [Link]

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

5) CSS display none


The "none" value totally removes the element from the page. It will not take any space.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. display: none;
7. }
8. </style>
9. </head>
10. <body>
11. <h1>This heading is visible.</h1>
12. <h1 class="hidden">This is not visible.</h1>
13. <p>You can see that the hidden heading does not contain any space.</p>
14. </body>
15. </html>

Output:

This heading is visible.


You can see that the hidden heading does not contain any space.

Other CSS display values


149 | P a g e
Property-value Description
It is used to display an element as an block-level flex container. It is new
flex
in css3.
It is used to display an element as an inline-level flex container. It is new
inline-flex
in css3.
inline-table It displays an element as an inline-level table.
list-Item It makes the element behave like a <li> element.
table It makes the element behave like a <table> element.
table-caption It makes the element behave like a <caption> element.
table-column-
It makes the element behave like a <colgroup> element.
group
table-header-
It makes the element behave like a <thead> element.
group
table-footer-group It makes the element behave like a <tfoot> element.
table-row-group It makes the element behave like a <tbody> element.
table-cell It makes the element behave like a <td> element.
table-row It makes the element behave like a <tr> element.
table-column It makes the element behave like a <col> element.

CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on the element. It
allows us to specify the cursor type, which will be displayed to the user. When a user hovers
on the link, then by default, the cursor transforms into the hand from a pointer.

Let's understand the property values of the cursor.

Values Usage
It is used to display the indication of the cursor of something that is to be
alias
created.
auto It is the default property in which the browser sets the cursor.
all-scroll It indicates the scrolling.
col-resize Using it, the cursor will represent that the column can be horizontally resized.
cell The cursor will represent that a cell or the collection of cells is selected.
context-
It indicates the availability of the context menu.
menu
default It indicates an arrow, which is the default cursor.
copy It is used to indicate that something is copied.
crosshair In it, the cursor changes to the crosshair or the plus sign.
It represents the east direction and indicates that the edge of the box is to be
e-resize
shifted towards right.
ew-resize It represents the east/west direction and indicates a bidirectional resize cursor.
n-resize It represents the north direction that indicates that the edge of the box is to be

150 | P a g e
shifted to up.
It represents the north/east direction and indicates that the edge of the box is to
ne-resize
be shifted towards up and right.
move It indicates that something is to be shifted.
It is in the form of a question mark or ballon, which represents that help is
help
available.
None It is used to indicate that no cursor is rendered for the element.
No-drop It is used to represent that the dragged item cannot be dropped here.
s-resize It indicates an edge box is to be moved down. It indicates the south direction.
Row-resize It is used to indicate that the row can be vertically resized.
It represents the south/east direction, which indicates that an edge box is to be
Se-resize
moved down and right.
It represents south/west direction and indicates that an edge of the box is to be
Sw-resize
shifted towards down and left.
Wait It represents an hourglass.
<url> It indicates the source of the cursor image file.
It indicates the west direction and represents that the edge of the box is to be
w-resize
shifted left.
Zoom-in It is used to indicate that something can be zoomed in.
Zoom-out It is used to indicate that something can be zoomed out.

The illustration of using the above values of cursor property is given below:

Example

1. <html>
2. <head>
3. </head>
4. <style>
5. body{
6. background-color: lightblue;
7. color:green;
8. text-align: center;
9. font-size: 20px;
10. }
11.
12. </style>
13.
14. <body>
15. <p>Move your mouse over the below words for the cursor change.</p>
16. <div style = "cursor:alias">alias Value</div>
17. <div style = "cursor:auto">auto Value</div>
18. <div style = "cursor:all-scroll">all-scroll value</div>
19. <div style = "cursor:col-resize">col-resize value</div>
20. <div style = "cursor:crosshair">Crosshair</div>
21. <div style = "cursor:default">Default value</div>

151 | P a g e
22. <div style = "cursor:copy">copy value</div>
23. <div style = "cursor:pointer">Pointer</div>
24. <div style = "cursor:move">Move</div>
25. <div style = "cursor:e-resize">e-resize</div>
26. <div style = "cursor:ew-resize">ew-resize</div>
27. <div style = "cursor:ne-resize">ne-resize</div>
28. <div style = "cursor:nw-resize">nw-resize</div>
29. <div style = "cursor:n-resize">n-resize</div>
30. <div style = "cursor:se-resize">se-resize</div>
31. <div style = "cursor:sw-resize">sw-resize</div>
32. <div style = "cursor:s-resize">s-resize</div>
33. <div style = "cursor:w-resize">w-resize</div>
34. <div style = "cursor:text">text</div>
35. <div style = "cursor:wait">wait</div>
36. <div style = "cursor:help">help</div>
37. <div style = "cursor:progress">Progress</div>
38. <div style = "cursor:no-drop">no-drop</div>
39. <div style = "cursor:not-allowed">not-allowed</div>
40. <div style = "cursor:vertical-text">vertical-text</div>
41. <div style = "cursor:zoom-in">Zoom-in</div>
42. <div style = "cursor:zoom-out">Zoom-out</div>
43. </body>
44. </html>

CSS Buttons
In HTML, we use the button tag to create a button, but by using CSS properties, we can style
the buttons. Buttons help us to create user interaction and event processing. They are one of
the widely used elements of web pages.

During the form submission, to view or to get some information, we generally use buttons.

Let's see the basic styling in buttons.

Basic styling in Buttons


There are multiple properties available that are used to style the button element. Let's discuss
them one by one.

background-color
As we have discussed earlier, this property is used for setting the background color of the
button element.

Syntax

1. element {
2. // background-color style

152 | P a g e
3. }

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. }
20. .b2 {
21. background-color: blue;
22. }
23. .b3 {
24. background-color: violet;
25. }
26. </style>
27. </head>
28.
29. <body>
30. <h1>The background-color property.</h1>
31. <button class="b1">Red color button</button>
32. <button class="b2">Blue color button</button>
33. <button class="b3">Violet color button</button>
34. </body>
35. </html>

border
It is used to set the border of the button. It is the shorthand property for border-width,
border-color, and border-style.

Syntax

1. element {
2. // border style

153 | P a g e
3. }

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. border:none;
20. }
21. .b2 {
22. background-color: blue;
23. border:5px brown solid;
24. }
25. .b3 {
26. background-color: yellow;
27. color:black;
28. border:5px red groove;
29. }
30. .b4{
31. background-color:orange;
32. border: 5px red dashed;
33. }
34. .b5{
35. background-color: gray;
36. border: 5px black dotted;
37. }
38. .b6{
39. background-color: lightblue;
40. border:5px blue double;
41. }
42. </style>
43. </head>
44.
45. <body>
46. <h1>The border property</h1>

154 | P a g e
47. <button class="b1">none</button>
48. <button class="b2">solid</button>
49. <button class="b3">groove</button>
50. <button class="b4">dashed</button>
51. <button class="b5">dotted</button>
52. <button class="b6">double</button>
53.
54. </body>
55. </html>

border-radius
It is used to make the rounded corners of the button. It sets the border radius of the button.

Syntax

1. element {
2. // border-radius property
3. }

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. border:none;
20. }
21. .b2 {
22. background-color: blue;
23. border:5px brown solid;
24. border-radius: 7px;
25. }
26. .b3 {
27. background-color: yellow;

155 | P a g e
28. color:black;
29. border:5px red groove;
30. border-radius: 10px;
31. }
32. .b4{
33. background-color:orange;
34. border: 5px red dashed;
35. border-radius: 20px;
36. }
37. .b5{
38. background-color: gray;
39. border: 5px black dotted;
40. border-radius: 30px;
41. }
42. .b6{
43. background-color: lightblue;
44. border:5px blue double;
45. border-radius: 25px;
46. }
47. </style>
48. </head>
49.
50. <body>
51. <h1>The border-radius property</h1>
52. <h2>Below there is the border name and border-radius</h2>
53. <button class="b1">none</button>
54. <button class="b2">solid 7px</button>
55. <button class="b3">groove 10px</button>
56. <button class="b4">dashed 20px</button>
57. <button class="b5">dotted 30px</button>
58. <button class="b6">double 25px</button>
59.
60. </body>
61. </html>

box-shadow
As its name implies, it is used to create the shadow of the button box. It is used to add the
shadow to the button. We can also create a shadow during the hover on the button.

Syntax

1. box-shadow: [horizontal offset] [vertical offset] [blur radius]


2. [optional spread radius] [color];

Example

1. <!DOCTYPE html>
2. <html>

156 | P a g e
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1{
18. background-color: lightblue;
19. border:5px red double;
20. border-radius: 25px;
21. color:black;
22. box-shadow : 0 8px 16px 0 black,
23. 0 6px 20px 0 rgba(0, 0, 0, 0.19);
24. }
25. .b2{
26. background-color: lightblue;
27. border:5px red dotted;
28. color:black;
29. border-radius: 25px;
30. }
31. .b2:hover{
32. box-shadow : 0 8px 16px 0 black,
33. 0 6px 20px 0 rgba(0, 0, 0, 0.19);
34. }
35. </style>
36. </head>
37.
38. <body>
39. <button class="b1">Shadow on button</button>
40. <button class="b2">Box-shadow on hover</button>
41. </body>
42. </html>

padding
It is used to set the button padding.

Syntax

1. element {
2. // padding style

157 | P a g e
3. }

Let's understand it using an illustration.

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. border:none;
20. padding: 16px;
21. }
22. .b2 {
23. background-color: blue;
24. border:5px brown solid;
25. padding:15px 30px 25px 40px;
26. }
27. .b3 {
28. background-color: yellow;
29. color:black;
30. border:5px red groove;
31. padding-top:30px;
32. }
33. .b4{
34. background-color:orange;
35. border: 5px red dashed;
36. padding-bottom:40px;
37. }
38. .b5{
39. background-color: gray;
40. border: 5px black dotted;
41. padding-left: 40px;
42. }
43. .b6{
44. background-color: lightblue;

158 | P a g e
45. border:5px blue double;
46. padding-right: 40px;;
47. }
48. </style>
49. </head>
50.
51. <body>
52. <h1>The padding property</h1>
53. <button class="b1">none</button>
54. <button class="b2">solid</button>
55. <button class="b3">groove</button>
56. <button class="b4">dashed</button>
57. <button class="b5">dotted</button>
58. <button class="b6">double</button>
59.
60. </body>
61. </html>

CSS Line Height


The CSS line height property is used to define the minimal height of line boxes within the
element. It sets the differences between two lines of your content.

It defines the amount of space above and below inline elements. It allows you to set the
height of a line of independently from the font size.

CSS line-height values


There are some property values which are used with CSS line-height property.

value description
normal This is a default value. it specifies a normal line height.
It specifies a number that is multiplied with the current font size to set the line
number
height.
length It is used to set the line height in px, pt,cm,etc.
% It specifies the line height in percent of the current font.
initial It sets this property to its default value.
inherit It inherits this property from its parent element.

CSS line-height example


1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {

159 | P a g e
6. line-height: 70%;
7. }
8. [Link] {
9. line-height: 200%;
10. }
11. </style>
12. </head>
13. <body>
14. <h3>
15. This is a heading with a standard line-height.<br>
16. This is a heading with a standard line-height.<br>
17. The default line height in most browsers is about 110% to 120%.<br>
18. </h3>
19. <h3 class="small">
20. This is a heading with a smaller line-height.<br>
21. This is a heading with a smaller line-height.<br>
22. This is a heading with a smaller line-height.<br>
23. This is a heading with a smaller line-height.<br>
24. </h3>
25. <h3 class="big">
26. This is a heading with a bigger line-height.<br>
27. This is a heading with a bigger line-height.<br>
28. This is a heading with a bigger line-height.<br>
29. This is a heading with a bigger line-height.<br>
30. </h3>
31. </body>
32. </html>

CSS Margin
CSS Margin property is used to define the space around elements. It is completely transparent
and doesn't have any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate properties.
You can also change all properties at once by using shorthand margin property.

There are following CSS margin properties:

CSS Margin Properties


Property Description

margin This property is used to set all the properties in one declaration.

margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

160 | P a g e
margin-top It is used to set top margin of an element.

margin-bottom It is used to set bottom margin of an element.

CSS Margin Values


These are some possible values for margin property.

Value Description

auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is 0px.

% It is used to define a margin in percent of the width of containing element.

inherit It is used to inherit margin from parent element.

Note: You can also use negative values to overlap content.

CSS margin Example


You can define different margin for different sides for an element.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. [Link] {
9. margin-top: 50px;
10. margin-bottom: 50px;
11. margin-right: 100px;
12. margin-left: 100px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This paragraph is not displayed with specified margin. </p>
18. <p class="ex">This paragraph is displayed with specified margin.</p>
19. </body>
20. </html>

Output:

This paragraph is not displayed with specified margin.

161 | P a g e
This paragraph is displayed with specified margin.

Margin: Shorthand Property


CSS shorthand property is used to shorten the code. It specifies all the margin properties in
one property.

There are four types to specify the margin property. You can use one of them.

1. margin: 50px 100px 150px 200px;


2. margin: 50px 100px 150px;
3. margin: 50px 100px;
4. margin 50px;

1) margin: 50px 100px 150px 200px;


It identifies that:

top margin value is 50px

right margin value is 100px

bottom margin value is 150px

left margin value is 200px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. [Link] {
9. margin: 50px 100px 150px 200px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>

162 | P a g e
17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified


margin.

2) margin: 50px 100px 150px;


It identifies that:

top margin value is 50px

left and right margin values are 100px

bottom margin value is 150px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. [Link] {
9. margin: 50px 100px 150px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

163 | P a g e
This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

3) margin: 50px 100px;


It identifies that:

top and bottom margin values are 50px

left and right margin values are 100px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. [Link] {
9. margin: 50px 100px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

164 | P a g e

You might also like