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

unit2_CSS

Uploaded by

rudrakumar73633
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

unit2_CSS

Uploaded by

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

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.

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>

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>

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>

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>

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 class=”center”>And me!</p>
16. </body>
17. </html>

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>

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>

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>

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.

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


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 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.
6. h2,p{
7. background-color: #b0d4de;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>My first CSS page.</h2>
13. <p>Hello Javatpoint. This is an example of CSS background-color.</p>
14. </body>
15. </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("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
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 Javatpoint.com</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 Javatpoint.com</h1>
13. </body>
14. </html>

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-image: url('bbb.gif');
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-image: url('good-morning.jpg');
2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;

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>

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>

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>

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 fo This font size is smaller.

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

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>

Output:

This heading is shown in normal font.

THIS PARAGRAPH IS 111SHOWN 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>

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.

CSS Text
CSS has a lot of properties for formatting text. Like Text color, Text alignment, Text transformation etc.

1. Text Color
The color property is used to set the color of the text. The color is specified by:

 a color name - like "red"


 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

The default text color for a page is defined in the body selector.
Example
body {
color: blue;
}

h1 {
color: green;
}

Text Color and Background Color


In this example, we define both the background-color property and the color property:

Example
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}

Important: High contrast is very important for people with vision problems. So, always ensure that the contrast between
the text color and the background color (or background image) is good!

The CSS Text Color Property

Property Description

color Specifies the color of text

2.Text Alignment and Text Direction


To control the alignment of text CSS provide us following properties:

 text-align
 text-align-last
 direction
 unicode-bidi
 vertical-align

The CSS Text Alignment/Direction Properties

Property Description

direction Specifies the text direction/writing direction

text-align Specifies the horizontal alignment of text

text-align-last Specifies how to align the last line of a text

vertical-align Sets the vertical alignment of an element

Text Alignment
The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is
default if text direction is left-to-right, and right alignment is default if text direction is right-
to-left):

Example
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
When the text-align property is set to "justify", each line is stretched so that every line
has equal width, and the left and right margins are straight (like in magazines and
newspapers):

Example
div {
text-align: justify;
}

Text Align Last


The text-align-last property specifies how to align the last line of a text.

Example
Align the last line of text in three <p> elements:

p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}

Text Direction
The direction property can be used to change the text direction of an element: possible
values are rtl, ltr (default).

Example
p {
direction: rtl;
}

Vertical Alignment
The vertical-align property sets the vertical alignment of an element. vertical-align can
take a % or length value. Or it can take one of the following values: Baseline, bottom,
middle, sub, super, text-bottom, text-top.
Example
Set the vertical alignment of an image in a text:

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

3.Text Transformation
The text-transform property is used to Controls the capitalization of text. It specifies
uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word:

Example
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
4. Text Spacing
In this chapter you will learn about the following properties:

 text-indent
 letter-spacing
 line-height
 word-spacing
 white-space

Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:

Example
p {
text-indent: 50px;
}

Letter Spacing
The letter-spacing property is used to specify the space between the characters in a
text.

The following example demonstrates how to increase or decrease the space between
characters:

Example
h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}

Line Height
The line-height property is used to specify the space between lines:

Example
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}

Word Spacing
The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between
words:

Example
p.one {
word-spacing: 10px;
}

p.two {
word-spacing: -2px;
}

White Space
The white-space property specifies how white-space inside an element is handled. Possible
values: nowrap, pre-wrap, normal etc. Default value normal

This example demonstrates how to disable text wrapping inside an element:

Example
p {
white-space: nowrap;
}

The CSS Text Spacing Properties

Property Description

letter-spacing Specifies the space between characters in a text

line-height Specifies the line height

text-indent Specifies the indentation of the first line in a text-block


white-space Specifies how to handle white-space inside an element

word-spacing Specifies the space between words in a text

4.Text Shadow
The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow
(2px):

Text shadow effect!

Example
h1 {
text-shadow: 2px 2px;
}

Next, add a color (red) to the shadow:

Text shadow effect!


Example
h1 {
text-shadow: 2px 2px red;
}

Then, add a blur effect (5px) to the shadow:

Text shadow effect!


Example
h1 {
text-shadow: 2px 2px 5px red;
}

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

 Coffee
 Tea
 Coca Cola

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

I. Coffee
II. Tea
III. Coca Cola

HTML Lists and CSS List Properties


In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

 Set different list item markers for ordered lists


 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items

Different List Item Markers


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

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

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

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

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

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

An Image as The List Item Marker


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

Example
ul {
list-style-image: url('sqpurple.gif');
}

Position The List Item Markers


The list-style-position property specifies the position of the list-item markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item
will be aligned vertically. This is default:

 Coffee - A brewed drink prepared from roasted coffee beans...


 Tea
 Coca-cola

"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it will be
part of the text and push the text at the start:

 Coffee - A brewed drink prepared from roasted coffee beans...


 Tea
 Coca-cola

Example
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

Remove Default Settings


The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin
and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

List - Shorthand property


The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example
ul {
list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:

 list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some
reason cannot be displayed)
 list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
 list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors


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

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

Example
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}

Result:

1. Coffee
2. Tea
3. Coca Cola

 Coffee
 Tea
 Coca Cola

All CSS List Properties

Property Description

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style-position Specifies the position of the list-item markers (bullet points)

list-style-type Specifies the type of list-item marker


CSS Tables
1. Table Borders
To specify table borders in CSS, use the border property.

The example below specifies a solid border for <table>, <th>, and <td> elements:

Firstname Lastname

Peter Griffin

Lois Griffin

Example
table, th, td {
border: 1px solid;
}

Full-Width Table
The table above might seem small in some cases. If you need a table that should span the entire screen (full-width),
add width: 100% to the <table> element:

Firstname Lastname

Peter Griffin

Lois Griffin

Example
table {
width: 100%;
}

Double BordersNotice that the table in the examples above have double borders. This is because both the
table and the <th> and <td> elements have separate borders.

To remove double borders, take a look at the example below.

Collapse Table Borders


The border-collapse property sets whether the table borders should be collapsed into a single border:

Firstname Lastname

Peter Griffin

Lois Griffin
Example
table {
border-collapse: collapse;
}

If you only want a border around the table, only specify the border property for <table>:

Firstname Lastname

Peter Griffin

Lois Griffin

Example
table {
border: 1px solid;
}

2. CSS Table Size


Table Width and Height
The width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements to 70px:

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
table {
width: 100%;
}

th {
height: 70px;
}

To create a table that should only span half the page, use width: 50%:
Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
table {
width: 50%;
}

3. CSS Table Alignment


Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or
<td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
To center-align the content of <td> elements as well, use text-align: center:
Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
td {
text-align: center;
}

To left-align the content, force the alignment of <th> elements to be left-aligned, with
the text-align: left property:

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300


Example
th {
text-align: left;
}

Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or
<td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

The following example sets the vertical text alignment to bottom for <td> elements:

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
td {
height: 50px;
vertical-align: bottom;
}

CSS Table Style


Table Padding
To control the space between the border and the content in a table, use the padding property on <td> and
<th> elements:

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150


First Name Last Name Savings

Joe Swanson $300

Example
th, td {
padding: 15px;
text-align: left;
}

Horizontal Dividers

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Add the border-bottom property to <th> and <td> for horizontal dividers:

Example
th, td {
border-bottom: 1px solid #ddd;
}

Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over:

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150


Joe Swanson $300

Example
tr:hover {background-color: coral;}

Striped Tables

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

For zebra-striped tables, use the nth-child() selector and add a background-color to all
even (or odd) table rows:

Example
tr:nth-child(even) {background-color: #f2f2f2;}

Table Color

The example below specifies the background color and text color of <th> elements:

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
th {
background-color: #04AA6D;
color: white;
}
CSS Box Model
All HTML elements can be considered as boxes.

The CSS Box Model


In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding,
and the actual content. The image below illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example
Demonstration of the box model:

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

Width and Height of an Element


In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of
the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Example
This <div> element will have a total width of 350px:

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Here is the calculation:


320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Border Properties


We can specify the border style, border width, color etc.by using Border Property. CSS
provide us various border properties :

4. Border-style
5. Border-width
6. Border-color
7. Rounded Borders

CSS Border Style


The border-style property specifies what kind of border to display.
The following values are allowed:

 dotted - Defines a dotted border


 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

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

Example

Demonstration of the different border styles:

p.dotted {border-style: dotted;}


p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

CSS Border Width


The border-width property specifies the width of the four borders. The width can be set as a specific size (in
px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

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

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

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

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

CSS Border Color


The border-color property is used to set the color of the four borders.The color can be set by:

 name - specify a color name, like "red"


 HEX - specify a HEX value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"

Note: If border-color is not set, it inherits the color of the element.

Specific Side Colors


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

Example
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

CSS Border - Individual Sides


From the examples on the previous pages, you have seen that it is possible to specify a different border for
each side. In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Example
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

CSS Rounded Borders


The border-radius property is used to add rounded borders to an element:

Example
p{
border: 2px solid red;
border-radius: 5px;
}

CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side
of an element (top, right, bottom, and left).

Margin - Individual Sides


CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin


 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a <p> element:

p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

The auto Value


You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the
left and right margins.

Example

Use margin: auto:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

The inherit Value


This example lets the left margin of the <p class="ex1"> element be inherited from the parent element
(<div>):

Example

Use of the inherit value:

div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}

CSS Padding
Padding is used to create space around an element's content, inside of any defined borders.

The CSS padding properties are used to generate space around an element's content, inside of any defined
borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side
of an element (top, right, bottom, and left).

Padding - Individual Sides


CSS has properties for specifying the padding for each side of an element:

 padding-top
 padding-right
 padding-bottom
 padding-left

All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.


 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.


Example

Set different padding for all four sides of a <div> element:

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

CSS Layout - The display Property


The display property is the most important CSS property for controlling layout.

The display Property


The display property is used to specify how an element is shown on a web page.

Every HTML element has a default display value, depending on what type of element it is. The default
display value for most elements is block or inline.

The display property is used to change the default display behavior of HTML elements.

Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as
far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>

Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

 <span>
 <a>
 <img>

The display Property Values


The display property has many values:

Value Description

Inline Displays an element as an inline element

Block Displays an element as a block element

Flex Displays an element as a block-level flex container

Grid Displays an element as a block-level grid container

list-item Let the element behave like a <li> element

Table Let the element behave like a <table> element

table-row Let the element behave like a <tr> element

None The element is completely removed

Initial Sets this property to its default value

inherit Inherits this property from its parent element

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating
them. Take a look at our last example on this page if you want to know how this can be achieved.

The <script> element uses display: none; as default.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.
Changing an inline element to a block element, or vice versa, can be useful for making the page look a
specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

Example
li {
display: inline;
}

Note: Setting the display property of an element only changes how the element is displayed, NOT what
kind of element it is. So, an inline element with display: block; is not allowed to have other block elements
inside it.

The following example displays <span> elements as block elements:

Example
span {
display: block;
}

The following example displays <a> elements as block elements:

Example
a{
display: block;
}

Hide an Element - display:none or visibility:hidden?


Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be
displayed as if the element is not there:

Example
h1.hidden {
display: none;
}

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Example
h1.hidden {
visibility: hidden;
}
CSS Display/Visibility Properties

Property Description

display Specifies how an element should be displayed

visibility Specifies whether or not an element should be visible

CSS Layout - The position Property


The position property specifies the type of positioning method used for an element (static, relative, fixed,
absolute or sticky).

The position Property


The position property specifies the type of positioning method used for an element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work
unless the position property is set first. They also work differently depending on the position value.

position: static;
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow
of the page:

This <div> element has position: static;

Here is the CSS that is used:

Example
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its
normal position. Other content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

Here is the CSS that is used:

Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even
if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative
to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with
page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Here is a simple example:

This <div> element has position: relative;

This <div> element has position: absolute;


Here is the CSS that is used:

Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

position: sticky;
An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given
offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You
must also specify at least one of top, right, bottom or left for sticky positioning to work.

In this example, the sticky element sticks to the top of the page ( top: 0), when you reach its scroll position.

Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

CSS Layout - float and clear


The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float Property


The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:

 left - The element floats to the left of its container


 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs in the text). This is default
 inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

Example - float: right;


Example
img {
float: right;
}

Example - float: left;


The following example specifies that an image should float to the left in a text:

Example
img {
float: left;
}

Example - No float
In the following example the image will be displayed just where it occurs in the text (float: none;):

Example
img {
float: none;
}

CSS Layout - Horizontal & Vertical Align


Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins:

This div element is centered.

Example
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

Note: Center aligning has no effect if the width property is not set (or set to 100%).

Center Align Text


To just center the text inside an element, use text-align: center;

This text is centered.

Example
.center {
text-align: center;
border: 3px solid green;
}

Center an Image
To center an image, set left and right margin to auto and make it into a block element:

Example
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}

Left and Right Align - Using position


One method for aligning elements is to use position: absolute;
Example
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Left and Right Align - Using float


Another method for aligning elements is to use the float property:

Example
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Center Vertically - Using padding


There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:

I am vertically centered.

Example
.center {
padding: 70px 0;
border: 3px solid green;
}

To center both vertically and horizontally, use padding and text-align: center:

I am vertically and horizontally centered.

Example
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}

CSS Pseudo-classes
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.

For example, it can be used to:

 Style an element when a user mouses over it


 Style visited and unvisited links differently
 Style an element when it gets focus

Syntax
selector:pseudo-class {
property: value;
}

Anchor Pseudo-classes
Links can be displayed in different ways:

Example
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */


a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

CSS Navigation Bar


Demo: Navigation Bars
Vertical

 Home
 News
 Contact
 About
Horizontal

 Home
 News
 Contact
 About

 Home
 News
 Contact
 About

Navigation Bars
Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links


A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Example explained:
 list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
 Set margin: 0; and padding: 0; to remove browser default settings

CSS Styling Images

Learn how to style images using CSS.

Rounded Images
Use the border-radius property to create rounded images:

Example
Rounded Image:

img {
border-radius: 8px;
}
Example
Circled Image:

img {
border-radius: 50%;
}

Thumbnail Images
Use the border property to create thumbnail images.

Thumbnail Image:

Example
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

<img src="paris.jpg" alt="Paris">

Thumbnail Image as Link:

Example
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>

Responsive Images
Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:


If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Example
img {
max-width: 100%;
height: auto;
}

Center an Image
To center an image, set left and right margin to auto and make it into a block element:
Example
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

Image Text
How to position text in an image:

Example

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Try it Yourself:

Top Left » Top Right » Bottom Left » Bottom Right » Centered »


Image Filters
The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer or Edge 12.

Example
Change the color of all images to black and white (100% gray):

img {
filter: grayscale(100%);
}

Tip: Go to our CSS filter Reference to learn more about CSS filters.

Image Hover Overlay


Create an overlay effect on hover:

Example
Fade in text:
Hello World

Example
Fade in a box:
Hello World

Example
Slide in (bottom):
Hello World

Example
Slide in (left):
Hello World

Example
Slide in (right):
Hello World

Flip an Image
Move your mouse over the image:
Example
img:hover {
transform: scaleX(-1);
}

Responsive Image Gallery


CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen
sizes. Resize the browser window to see the effect:

Add a description of the image here

Add a description of the image here


Add a description of the image here

Add a description of the image here

Example
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

@media only screen and (max-width: 700px){


.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 500px){


.responsive {
width: 100%;
}
}.

Image Modal (Advanced)


This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the
image:
Example
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal


var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal


span.onclick = function() {
modal.style.display = "none";
}

CSS Colors
CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA Colors
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);

rgba(255, 0, 0, 0.4);

rgba(255, 0, 0, 0.6);

rgba(255, 0, 0, 0.8);
The following example defines different RGBA colors:

Example
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

HSL Colors
HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):


o 0 (or 360) is red
o 120 is green
o 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.

hsl(0, 100%, 30%);


hsl(0, 100%, 50%);

hsl(0, 100%, 70%);

hsl(0, 100%, 90%);

The following example defines different HSL colors:

Example
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

HSLA Colors
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the
opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

hsla(0, 100%, 30%, 0.3);

hsla(0, 100%, 50%, 0.3);

hsla(0, 100%, 70%, 0.3);

hsla(0, 100%, 90%, 0.3);

The following example defines different HSLA colors:


Example
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

Opacity
The CSS opacity property sets the opacity for the whole element (both background color and text will be
opaque/transparent).

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

rgb(255, 0, 0);opacity:0.2;

rgb(255, 0, 0);opacity:0.4;

rgb(255, 0, 0);opacity:0.6;

rgb(255, 0, 0);opacity:0.8;

Notice that the text above will also be transparent/opaque!

The following example shows different elements with opacity:

Example
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity *

CSS The object-fit Property


The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

The CSS object-fit Property


The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up
and take up as much space as possible".

Look at the following image from Paris. This image is 400 pixels wide and 300 pixels high:
However, if we style the image above to be half its width (200 pixels) and same height (300 pixels), it will look like this:

Example
img {
width: 200px;
height: 300px;
}

We see that the image is being squished to fit the container of 200x300 pixels (its original aspect ratio is destroyed).

Here is where the object-fit property comes in. The object-fit property can take one of the following values:

 fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or
squished to fit
 contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
 cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
 none - The image is not resized
 scale-down - the image is scaled down to the smallest version of none or contain
Using object-fit: cover;
If we use object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit:

Example
img {
width: 200px;
height: 300px;
object-fit: cover;
}

Using object-fit: contain;


If we use object-fit: contain; the image keeps its aspect ratio, but is resized to fit within the given dimension:
Example
img {
width: 200px;
height: 300px;
object-fit: contain;
}

Using object-fit: fill;


If we use object-fit: fill; the image is resized to fill the given dimension. If necessary, the image will be stretched or
squished to fit:

Example
img {
width: 200px;
height: 300px;
object-fit: fill;
}

Using object-fit: none;


If we use object-fit: none; the image is not resized:
Example
img {
width: 200px;
height: 300px;
object-fit: none;
}

Using object-fit: scale-down;


If we use object-fit: scale-down; the image is scaled down to the smallest version of none or contain:

Example
img {
width: 200px;
height: 300px;
object-fit: scale-down;
}

You might also like