Scribd
Upload
243 views

CSS Tutorial: CSS Example With CSS Editor

This document provides an overview of CSS (Cascading Style Sheets) in 3 sections: 1. CSS is a style sheet language used to describe the presentation of HTML documents, including colors, layout, and fonts. It can be used to style web pages and user interfaces. 2. The document explains the basic CSS syntax of selectors and declaration blocks. It also covers different types of CSS selectors like element, id, class, and universal selectors. 3. Methods for adding CSS to HTML pages are discussed, including inline, internal, and external CSS stylesheets. Common CSS properties are also defined.

Uploaded by

Nive S
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
243 views

CSS Tutorial: CSS Example With CSS Editor

This document provides an overview of CSS (Cascading Style Sheets) in 3 sections: 1. CSS is a style sheet language used to describe the presentation of HTML documents, including colors, layout, and fonts. It can be used to style web pages and user interfaces. 2. The document explains the basic CSS syntax of selectors and declaration blocks. It also covers different types of CSS selectors like element, id, class, and universal selectors. 3. Methods for adding CSS to HTML pages are discussed, including inline, internal, and external CSS stylesheets. Common CSS properties are also defined.

Uploaded by

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

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:

o CSS stands for Cascading Style Sheet.

o CSS is used to design HTML tags.

o CSS is a widely used language on the web.

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

CSS 3 Tutorial
In this tutorial, we will learn CSS 3 properties to design box model, apply opacity, radius
etc.

All CSS Properties


In this tutorial, you will get details of all CSS properties such as background, border, font,
float, display, margin, opacity, padding, text-align, vertical-align, position, color etc.

Prerequisite
Before learning CSS, you must have the basic knowledge of HTML.

Audience
Our CSS tutorial is designed to help beginners and professionals both.

Problem
If you find any problem or mistake in our CSS tutorial, you can report to us. We assure, you
will not find any problem in CSS tutorial.

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


o You can add new looks to your old HTML documents.

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

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.

1. Selector{Property1: value1; Property2: value2; ..........;}

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of
CSS 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.

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 Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>
Test it Now

Output:

Hello Javatpoint.com

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>
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. p.center {
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


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;
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 Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>
Test it Now

Output:

Hello Javatpoint.com
Hello Javatpoint.com (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

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 style.css.

For example:

1. p{color:blue}

You need to link this style.css file to your html pages like this:

1. <link rel="stylesheet" type="text/css" href="style.css">

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

For more visit here: External CSS

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

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 style.css.

For example:

1. p{color:blue}

You need to link this style.css file to your html pages like this:

1. <link rel="stylesheet" type="text/css" href="style.css">

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

For more visit here: External CSS

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>
Test it Now

Output:

Inline CSS is applied on this heading.


This paragraph is not affected.

Disadvantages of Inline CSS


o You cannot use quotations within inline CSS. If you use quotations the browser will
interpret this as an end of your style value.

o These styles cannot be reused anywhere else.

o These styles are tough to be edited because they are not stored at a single place.

o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.

o 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 {
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="mystyle.css">
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 "mystyle.css".

File: mystyle.css

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
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 Javatpoint.com</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>
Test it Now

Output:

Hello Javatpoint.com

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

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>
Test it Now

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("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>
Test it Now

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 Javatpoint.com</h1>
13. </body>
14. </html>
Test it Now

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 Javatpoint.com</h1>
13. </body>
14. </html>
Test it Now

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('bbb.gif');
2. background-repeat: no-repeat;
3. background-attachment: fixed;
Test it Now

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('good-morning.jpg');


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

o border-style

o border-color

o border-width

o border-radius

1) CSS border-style
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. p.none {border-style: none;}
6. p.dotted {border-style: dotted;}
7. p.dashed {border-style: dashed;}
8. p.solid {border-style: solid;}
9. p.double {border-style: double;}
10. p.groove {border-style: groove;}
11. p.ridge {border-style: ridge;}
12. p.inset {border-style: inset;}
13. p.outset {border-style: outset;}
14. p.hidden {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>
27. <p class="hidden">A hidden border.</p>
28. </body>
29. </html>
Test it Now

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. p.one {
6. border-style: solid;
7. border-width: 5px;
8. }
9. p.two {
10. border-style: solid;
11. border-width: medium;
12. }
13. p.three {
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>
Test it Now

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

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

o RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".

o 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. p.one {
6. border-style: solid;
7. border-color: red;
8. }
9. p.two {
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 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

version css1

javascript syntax object.style.display="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:


o <span>

o <a>

o <em>

o <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 Javatpoint.com</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>
Test it Now

Output:

Hello Javatpoint.com 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 Javatpoint.com</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>
Test it Now

Output:

Hello Javatpoint.com 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;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello Javatpoint.com</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>
Test it Now

Output:

Hello Javatpoint.com

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.

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

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

o 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 Javatpoint.com</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>
Test it Now

Output:

Hello Javatpoint.com

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. h1.hidden {
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>
Test it Now

Output:

This heading is visible.


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

Other CSS display values

Property-value Description

flex It is used to display an element as an block-level flex container. It is new in

inline-flex It is used to display an element as an inline-level flex container. It is new in

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-group It makes the element behave like a <colgroup> element.

table-header-group It makes the element behave like a <thead> element.

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 Float
The CSS float property is a positioning property. It is used to push an element to the left
or right, allowing other element to wrap around it. It is generally used with images and
layouts.

To understand its purpose and origin, let's take a look to its print display. In the print
display, image is set into the page such that text wraps around it as needed.

Its web layout is also just similar to print layout.

How it works
Elements are floated only horizontally. So it is possible only to float elements left or right,
not up or down.

1. A floated element may be moved as far to the left or the right as possible. Simply, it
means that a floated element can display at extreme left or extreme right.

2. The elements after the floating element will flow around it.

3. The elements before the floating element will not be affected.

4. If the image floated to the right, the texts flow around it, to the left and if the image
floated to the left, the text flows around it, to the right.

CSS Float Properties

Property Description Values

clear The clear property is used to avoid elements after the floating elements which left, rig
flow around it. inherit

float It specifies whether the box should float or not. left, rig

CSS Float Property Values


Value Description

none It specifies that the element is not floated, and will be displayed just where it occurs in the te
default value.

left It is used to float the element to the left.

right It is used to float the element to the right.

initial It sets the property to its initial value.

inherit It is used to inherit this property from its parent element.

CSS Float Property Example


Let's see a simple example to understand the CSS float property.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img {
6. float: right;
7. }
8. </style>
9. </head>
10. <body>
11. <p>The following paragraph contains an image with style
12. <b>float:right</b>. The result is that the image will float to the right in the paragraph.</
p>
13. <img src="good-morning.jpg" alt="Good Morning Friends"/>
14. This is some text. This is some text. This is some text.
15. This is some text. This is some text. This is some text.
16. This is some text. This is some text. This is some text.
17. This is some text. This is some text. This is some text.
18. This is some text. This is some text. This is some text.
19. This is some text. This is some text. This is some text.
20. This is some text. This is some text. This is some text.
21. This is some text. This is some text. This is some text.
22. This is some text. This is some text. This is some text.
23. This is some text. This is some text. This is some text.
24. This is some text. This is some text. This is some text.
25. This is some text. This is some text. This is some text.
26. This is some text. This is some text. This is some text.
27. </p>
28. </body>
29. </html>

CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you
can change the text size, color, style and more. You have already studied how to make text
bold or underlined. Here, you will also know how to resize your font using percentage.

These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)

2. CSS Font family: This property is used to change the face of the font.

3. CSS Font size: This property is used to increase or decrease the size of the font.

4. CSS Font style: This property is used to make the font bold, italic or oblique.

5. CSS Font variant: This property creates a small-caps effect.

6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.

1) CSS Font Color


CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS
fonts. It is used to change the color of the text.

There are three different formats to define a color:

o By a color name

o By hexadecimal value

o By RGB
In the above example, we have defined all these formats.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { color: red; }
9. h2 { color: #9000A1; }
10. p { color:rgb(0, 220, 98); }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This is heading 1</h1>
16. <h2>This is heading 2</h2>
17. <p>This is a paragraph.</p>
18. </body>
19. </html>
Test it Now

Output:

This is heading 1
This is heading 2

This is a paragraph.

2) CSS Font Family


CSS font family can be divided in two types:

o Generic family: It includes Serif, Sans-serif, and Monospace.

o Font family: It specifies the font family name like Arial, New Times Roman etc.
Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new
roman, Georgia etc.

Sans-serif: A sans-serif font doesn't include the small lines at the end of characters.
Example of Sans-serif: Arial, Verdana etc.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { font-family: sans-serif; }
9. h2 { font-family: serif; }
10. p { font-family: monospace; }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This heading is shown in sans-serif.</h1>
16. <h2>This heading is shown in serif.</h2>
17. <p>This paragraph is written in monospace.</p>
18. </body>
19. </html>
Test it Now

Output:

This heading is shown in sans-serif.


This heading is shown in serif.

This paragraph is written in monospace.

3) CSS Font Size


CSS font size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.

medium used to display medium text size.

large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.

smaller used to display comparatively smaller text size.

larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.

1. <html>
2. <head>
3. <title>Practice CSS font-size property</title>
4. </head>
5. <body>
6. <p style="font-size:xx-small;"> This font size is extremely small.</p>
7. <p style="font-size:x-small;"> This font size is extra small</p>
8. <p style="font-size:small;"> This font size is small</p>
9. <p style="font-size:medium;"> This font size is medium. </p>
10. <p style="font-size:large;"> This font size is large. </p>
11. <p style="font-size:x-large;"> This font size is extra large. </p>
12. <p style="font-size:xx-large;"> This font size is extremely large. </p>
13. <p style="font-size:smaller;"> This font size is smaller. </p>
14. <p style="font-size:larger;"> This font size is larger. </p>
15. <p style="font-size:200%;"> This font size is set on 200%. </p>
16. <p style="font-size:20px;"> This font size is 20 pixels. </p>
17. </body>
18. </html>
Test it Now

Output:

This font size is extremely small.

This font size is extra small

This font size is small

This font size is medium.

This font size is large.

This font size is extra large.

This font size is


extremely large.
This font size is smaller.

This font size is larger.

This font size is set on 200%.


This font size is 20 pixels.
4) CSS Font Style
CSS Font style property defines what type of font you want to display. It may be italic,
oblique, or normal.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h2 { font-style: italic; }
9. h3 { font-style: oblique; }
10. h4 { font-style: normal; }
11. }
12. </style>
13. </head>
14. <body>
15. <h2>This heading is shown in italic font.</h2>
16. <h3>This heading is shown in oblique font.</h3>
17. <h4>This heading is shown in normal font.</h4>
18. </body>
19. </html>
Test it Now

Output:

This heading is shown in italic font.


This heading is shown in oblique font.

This heading is shown in normal font.

5) CSS Font Variant


CSS font variant property specifies how to set font variant of an element. It may be normal
and small-caps.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p { font-variant: small-caps; }
6. h3 { font-variant: normal; }
7. </style>
8. </head>
9. <body>
10. <h3>This heading is shown in normal font.</h3>
11. <p>This paragraph is shown in small font.</p>
12. </body>
13. </html>
Test it Now

Output:

This heading is shown in normal font.

THIS PARAGRAPH IS SHOWN IN SMALL FONT.

6) CSS Font Weight


CSS font weight property defines the weight of the font and specify that how bold a font is.
The possible values of font weight may be normal, bold, bolder, lighter or number (100,
200..... upto 900).

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p style="font-weight:bold;">This font is bold.</p>
5. <p style="font-weight:bolder;">This font is bolder.</p>
6. <p style="font-weight:lighter;">This font is lighter.</p>
7. <p style="font-weight:100;">This font is 100 weight.</p>
8. <p style="font-weight:200;">This font is 200 weight.</p>
9. <p style="font-weight:300;">This font is 300 weight.</p>
10. <p style="font-weight:400;">This font is 400 weight.</p>
11. <p style="font-weight:500;">This font is 500 weight.</p>
12. <p style="font-weight:600;">This font is 600 weight.</p>
13. <p style="font-weight:700;">This font is 700 weight.</p>
14. <p style="font-weight:800;">This font is 800 weight.</p>
15. <p style="font-weight:900;">This font is 900 weight.</p>
16. </body>
17. </html>
Test it Now

Output:

This font is bold.

This font is bolder.

This font is lighter.

This font is 100 weight.

This font is 200 weight.

This font is 300 weight.

This font is 400 weight.

This font is 500 weight.

This font is 600 weight.

This font is 700 weight.

This font is 800 weight.

This font is 900 weight.

You might also like