CSS Notes
Caricato da
sherajsalmani8CSS Notes
Caricato da
sherajsalmani8AAA FOUNDATION
USCSS NOTES 2
AAA FOUNDATION
uscss notes
USCSS NOTES 3
AAA FOUNDATION
[Pick the date]
AAA Computer Institute
AAA FOUNDATION
Introduction to CSS
USCSS NOTES 4
AAA FOUNDATION
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 applica-
tions.
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, bor-
der 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 rec-
ommendation.
USCSS NOTES 5
AAA FOUNDATION
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.
The declaration block can contain one or more declarations
Declaration Block:
separated by a semicolon. For the above example, there are two declara-
tions:
USCSS NOTES 6
AAA FOUNDATION
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property:A Property is a type of attribute of HTML element. It could be color,
border etc.
Value: Values are assigned to CSS properties. In the above example, value
"yellow" is assigned to color property.
Selector{Property1: value1; Property2: 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{
USCSS NOTES 7
AAA FOUNDATION
text-align: center;
color: blue;
6. }
7. </style>
8. </head>
9. <body>
10. <p>This style will be applied on every paragraph.</p>
11. <p> Happy Birthday to you!</p>
12. <p> I'm so grateful you came into the world because you make my world better every
day. ... !</p>
13. </body>
14. </html>
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"> London Bridge </p>
13. <p> This Several bridges named London Bridge have spanned the River Thames between the City
of London and Southwark, in central London. </p>
USCSS NOTES 8
AAA FOUNDATION
14. <p> the first of which was built by the Roman founders of London. </p>
15. </body>
16. </html>
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">The Pool of London </h1>
13. <p class="center"> The Pool of London is a stretch of the River Thames from London Bridge to
below Limehouse.</p>
14. </body>
15. </html>
3) CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be af-
fected then you should use the element name with class selector.
Let's see an example.
USCSS NOTES 9
AAA FOUNDATION
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the ele-
ments 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> Tower Bridge </h2>
13. <p> Tower Bridge is a combined bascule and suspension bridge in London, built between 1886 and
1894.</p>
14. <p> The bridge crosses the River Thames close to the Tower of London</p>
15. <p> London bridges owned and maintained by the Bridge House Estates,</p>
16. </body>
USCSS NOTES 10
AAA FOUNDATION
17. </html>
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. As you can see, you need to define CSS properties
for all the elements. It can be grouped in following ways:
Let's see the CSS code without group selector.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1> Tower Bridge </h1>
13. <h2> Tower Bridge is a combined bascule and suspension bridge in London, built between 1886
and 1894.</h2>
14. <p> The bridge crosses the River Thames close to the Tower of London</p>
15. <p> London bridges owned and maintained by the Bridge House Estates,</p>
16. </body>
17. </html>
USCSS NOTES 11
AAA FOUNDATION
How to add CSS
CSS is added to HTML pages to format the document according to infor-
mation in the style sheet. There are three ways to insert CSS in HTML docu-
ments.
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. 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.
For example:
1. <h1 style="color:blue">Hello CSS</ h1>
2. <h2 style="color:red;margin-left:40px;">
Inline CSS is applied on this heading.</h2>
3. <p>This paragraph is not affected.</p>
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 sin-
gle place.
USCSS NOTES 12
AAA FOUNDATION
o It is not possible to style pseudo-codes and pseudo-classes with inline
CSS.
o Inline CSS does not provide browser cache advantages.
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can af-
fect all the elements of the page. It is written inside the style tag within
head section of html.
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.
For 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>
3) External CSS
USCSS NOTES 13
AAA FOUNDATION
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 in-
side the head section.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <link rel="stylesheet" type="text/css" href="[Link]">
5. </head>
6. <body>
7. <h1>This is a heading</h1>
8. <p>This is a paragraph.</p>
9. </body>
10. </html>
The external style sheet may be written in any text editor but must be saved
with a .css extension.
This file should not contain HTML elements.
Let's take an example of a style sheet file named "[Link]".
File: [Link]
1. body {
2. background-color: lightblue;
3. }
4. h1 {
5. color: navy;
6. margin-left: 20px;
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
USCSS NOTES 14
AAA FOUNDATION
CSS comments are generally written to explain your code. It is very helpful
for the users who reads your code so that they can easily understand the code.
Comments are ignored by browsers.
Comments are single or multiple lines statement and written within /*............*/ .
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. color: blue;
7. /* This is a single-line comment */
8. text-align: center;
9. }
10. /* This is
11. a multi-line
12. comment */
13. </style>
14. </head>
15. <body>
16. <p>Hello [Link]</p>
17. <p>This statement is styled with CSS.</p>
18. <p>CSS comments are ignored by the browsers and not shown in the output.</p>
19. </body>
20. </html>
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
USCSS NOTES 15
AAA FOUNDATION
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. h1,h2{
6. text-align: center; background-color: #b0d4de;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1> Tower Bridge </h1>
13. <h2> Tower Bridge is a combined bascule and suspension bridge in London, built between 1886
and 1894. </h2>
14. <p> The bridge consists of two bridge towers tied together at the upper level by two horizontal
walkways, designed to withstand the horizontal tension forces imposed by the suspended sections
of the bridge on the landward sides of the towers. The vertical components of the forces in the
suspended sections and the vertical reactions of the two walkways are carried by the two robust
towers. The bascule pivots and operating machinery are housed in the base of each tower. </p>
15. </body>
16. </html>
2) CSS background-image
USCSS NOTES 16
AAA FOUNDATION
The background-image property is used to set an image as a background of
an element. By default the image covers the entire element. You can set the
background image for a page like this.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("[Link]");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1> Welcome to London [Link] </h1>
13. <h2> Tower Bridge </h2>
14. <h3> Tower Bridge is a combined bascule and suspension bridge in London, built be-
tween 1886 and 1894. </h3>
15. <p>The bridge consists of two bridge towers tied together at the upper level by two
horizontal walkways, designed to withstand the horizontal tension forces imposed by the
suspended sections of the bridge on the landward sides of the towers. The vertical com-
ponents of the forces in the suspended sections and the vertical reactions of the two
walkways are carried by the two robust towers. The bascule pivots and operating ma-
chinery are housed in the base of each tower. </p>
16. </body>
17. </html>
3) CSS background-repeat
By default, the background-image property repeats the background image
horizontally and vertically. Some images are repeated only horizontally or ver-
tically.
The background looks better if the image repeated horizontally only.
Background-repeat: repeat-x;
USCSS NOTES 17
AAA FOUNDATION
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("[Link]");
7. background-repeat: repeat-x;
8. margin-left:100px;
9. }
10. </style>
11. </head>
12. <body>
13. <h1> Welcome to London [Link] </h1>
14. <h2> Tower Bridge </h2>
15. <h3> Tower Bridge is a combined bascule and suspension bridge in London, built be-
tween 1886 and 1894. </h3>
16. </body>
17. </html>
(background-repeat: repeat-y; )
USCSS NOTES 18
AAA FOUNDATION
4) CSS background-attachment
The background-attachment property is used to specify if the background im-
age 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. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("[Link]");
7. background-attachment:fixed;
8. margin-left:100px;
9. }
10. </style>
11. </head>
12. <body>
13. <h1> Welcome to London [Link] </h1>
14. <h2> Tower Bridge </h2>
15. <h3> Tower Bridge is a combined bascule and suspension bridge in London, built be-
tween 1886 and 1894. </h3>
16. <p>Tower Bridge is a combined bascule and suspension bridge in London, built between
1886 and [Link] bridge crosses the River Thames close to the Tower of London and
has become an iconic symbol of [Link] a result, it is sometimes confused with Lon-
don Bridge, about half a mile upstream. Wikipedia</p>
17.(Repeat this same paragraph 50 time in notepad)
18. </body>
19. </html>
5) CSS background-position
USCSS NOTES 19
AAA FOUNDATION
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:
o center
o top
o bottom
o left
o right
For example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("[Link]");
7. background-repeat: no-repeat;
8. background-attachment: fixed;
9. background-position: center;
10. margin-left:100px;
11. }
12. </style>
13. </head>
14. <body>
15. <h1> Welcome to London [Link] </h1>
16. <h2> Tower Bridge </h2>
17. <h3> Tower Bridge is a combined bascule and suspension bridge in London, built be-
tween 1886 and 1894. </h3>
18. <p>Tower Bridge is a combined bascule and suspension bridge in London, built between
1886 and [Link] bridge crosses the River Thames close to the Tower of London and
USCSS NOTES 20
AAA FOUNDATION
has become an iconic symbol of [Link] a result, it is sometimes confused with Lon-
don Bridge, about half a mile upstream. Wikipedia</p>
19. </body>
20. </html>
CSS background-size property
The background-size CSS property is used to set the size of a background
image of an element. The background image can be stretched or constrained
to fit into the existing space. It allows us to control the scaling of the back-
ground image.
This property can be defined using length, percentage, or keyword values.
It has two possible keyword values that are contain and cover. Its single-
value syntax defines the width of the image (in this case, the height sets to
auto), whereas the double values define the value of both height and width in
which the first value sets the width and second sets the height.
If an element has multiple background images, we can define the comma-
separated values to define the different sizes of each one.
The cover value of the background-size property is used to cover the entire
background area of the element. In contrast, the contain value of this prop-
erty scales the image as much as possible without clipping the image.
Syntax
1. background-size: auto | length | cover | contain | initial | inherit;
USCSS NOTES 21
AAA FOUNDATION
Property Values
auto: This is the default value, which displays the background image in its
original size.
length: It is used to set the width and height of the background image. This
value stretches the image in the corresponding dimension of the given length.
Its single value specifies the width of the image, and the height sets to auto.
If two values are given, the first value sets the width, and the second value
sets the height. It does not allow negative values.
percentage: This value defines the width and height of the background image
to the percentage (%) of the background positioning area. Negative values
are not allowed.
cover: This value is used to resize the background image to cover the entire
container. Sometimes, it crops the little bit off one of the edges or stretches
the image. It resizes the image to ensure the element is completely covered.
contain: Without stretching or cropping, it resizes the background image to
ensure the image is completely visible.
initial: It sets the property to its default value.
inherit: It inherits the property from its parent element.
Let's understand this CSS property by using some illustrations.
Example
In this example, there are three div elements with a width of 300px and a
height of 200px. Every div element has a background-image on which we are
applying the background-size property.
Here we are using the length and percentage values to set the background-
size of div element. The background-size of first div element set to auto,
USCSS NOTES 22
AAA FOUNDATION
second div element is set to 150px 150px, and the background-size of third
div element is set to 30%.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. background-size property
6. </title>
7. <style>
8. div {
9. width: 300px;
10. height: 200px;
11. border: 2px solid red;
12. }
13. #div1{
14. background-image: url('[Link]');
15. background-size: auto;
16. }
17. #div2{
18. background-image: url('[Link]');
19. background-size: 150px 150px;
20. }
21. #div3{
22. background-image: url('[Link]');
23. background-size: 30%;
24. }
25. </style>
26. </head>
27.
28. <body>
29. <h2> background-size: auto; </h2>
30. <div id = "div1"></div>
31. <h2> background-size: 150px 150px; </h2>
32. <div id = "div2"></div>
33. <h2> background-size: 30%; </h2>
34. <div id = "div3"></div>
USCSS NOTES 23
AAA FOUNDATION
35. </body>
36. </html>
USCSS NOTES 24
AAA FOUNDATION
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.
It defines a 3d grooved border. effect is generated according to border-color
groove
value.
It defines a 3d ridged border. effect is generated according to border-color
ridge
value.
It defines a 3d inset border. effect is generated according to border-color
inset
value.
It defines a 3d outset border. effect is generated according to border-color
outset
value.
USCSS NOTES 25
AAA FOUNDATION
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {border-style: none;}
6. [Link] {border-style: dotted;}
7. [Link] {border-style: dashed;}
8. [Link] {border-style: solid;}
9. [Link] {border-style: double;}
10. [Link] {border-style: groove;}
11. [Link] {border-style: ridge;}
12. [Link] {border-style: inset;}
13. [Link] {border-style: outset;}
14. [Link] {border-style: hidden;}
15. </style>
16. </head>
17. <body>
18. <p class="none">No border.</p>
19. <p class="dotted">A dotted border.</p>
20. <p class="dashed">A dashed border.</p>
21. <p class="solid">A solid border.</p>
22. <p class="double">A double border.</p>
23. </body>
24. </html>
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 "bor-
der-style" property to set the border first otherwise it will not work.
1. <!DOCTYPE html>
USCSS NOTES 26
AAA FOUNDATION
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("[Link]");
7. background-repeat: no-repeat;
8. background-attachment: fixed;
9. background-position: center;
10. margin-left:100px;
11. }
12. [Link] {
13. border-style: solid;
14. border-width: 5px;
15. }
16. [Link] {
17. border-style: solid;
18. border-width: medium;
19. }
20. [Link] {
21. border-style: solid;
22. border-width: 1px;
23. }
24. </style>
25. </head>
26. <body>
27. <h1> Welcome to London [Link] </h1>
28. <h2> Tower Bridge </h2>
29. <h3> Tower Bridge is a combined bascule and suspension bridge in London, built be-
tween 1886 and 1894. </h3>
30. <p class="one">Tower Bridge is a combined bascule and suspension bridge in London,
built between 1886 and [Link] bridge crosses the River Thames close to the Tower of
London and has become an iconic symbol of [Link] a result, it is sometimes con-
fused with London Bridge, about half a mile upstream.</p>
31. <p class="two">Tower Bridge is a combined bascule and suspension bridge in London,
built between 1886 and [Link] bridge crosses the River Thames close to the Tower of
USCSS NOTES 27
AAA FOUNDATION
London and has become an iconic symbol of [Link] a result, it is sometimes con-
fused with London Bridge, about half a mile upstream.</p>
32. <p class="three">Tower Bridge is a combined bascule and suspension bridge in London,
built between 1886 and [Link] bridge crosses the River Thames close to the Tower of
London and has become an iconic symbol of [Link] a result, it is sometimes con-
fused with London Bridge, about half a mile upstream.</p>
33. </body>
34. </html>
3) CSS border-color
There are three methods to set the color of the border.
• Name: It specifies the color name. For example: "red".
• RGB: It specifies the RGB value of the color. For example:
"rgb(255,0,0)".
• Hex: It specifies the hex value of the color. For example: "#ff0000".
There is also a border color named "transparent". If the border color is not
set it is inherited from the color property of the element.
Note: The border-color property is not used alone. It is always used with other border properties like
"border-style" property to set the border first otherwise it will not work.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("[Link]");
7. background-attachment: fixed;
8. margin-left:100px;
9. }
10. [Link] {
11. border-style: solid;
12. border-color: red;
13. border-width: 5px;
USCSS NOTES 28
AAA FOUNDATION
14. }
15. [Link] {
16. border-style: solid;
17. border-color: #98bf21;
18. border-width: medium;
19. }
20. </style>
21. </head>
22. <body>
23. <h1> Welcome to London [Link] </h1>
24. <h2> Tower Bridge </h2>
25. <h3> Tower Bridge is a combined bascule and suspension bridge in London, built be-
tween 1886 and 1894. </h3>
26. <p class="one">Tower Bridge is a combined bascule and suspension bridge in London,
built between 1886 and [Link] bridge crosses the River Thames close to the Tower of
London and has become an iconic symbol of [Link] a result, it is sometimes con-
fused with London Bridge, about half a mile upstream. and has become an iconic symbol
of [Link] a result, it is sometimes confused with London Bridge, about half a mile
upstream and has become an iconic symbol of [Link] a result, it is sometimes con-
fused with London Bridge, about half a mile upstream </p>
27. <p class="two">Tower Bridge is a combined bascule and suspension bridge in London,
built between 1886 and [Link] bridge crosses the River Thames close to the Tower of
London and has become an iconic symbol of [Link] a result, it is sometimes con-
fused with London Bridge, about half a mile upstream. [Link] a result, it is some-
times confused with London Bridge, about half a mile upstream and has become an
iconic symbol </p>
28. </body>
29. </html>
4) CSS border-radius property
This CSS property sets the rounded borders and provides the rounded corners
around an element, tags, or div. It defines the radius of the corners of an
element.
USCSS NOTES 29
AAA FOUNDATION
It is shorthand for border top-left-radius, border-top-right-radius, bor-
der-bottom-right-radius and border-bottom-left-radius. It gives the
rounded shape to the corners of the border of an element. We can specify the
border for all four corners of the box in a single declaration using the border-
radius. The values of this property can be defined in percentage or length
units.
This CSS property includes the properties that are tabulated as follows:
Property Description
border-top-left-radius It is used to set the border-radius for the top-left corner
border-top-right-radius It is used to set the border-radius for the top-right corner
border-bottom-right-radius It is used to set the border-radius for the bottom-right corner
border-bottom-left-radius It is used to set the border-radius for the bottom-left corner
If the bottom-left value is omitted, then it will be same as the top-right. If the
value of bottom-right is eliminated, then it will be same as the top-left. Simi-
larly, if top-right is eliminated, then it will be the same as top-left.
Let's see what happens when we provide a single value, two values, three
values, and four values to this property.
o If we provide a single value (such as border-radius: 30px;) to this prop-
erty, it will set all corners to the same value.
o When we specify two values (such as border-radius: 20% 10% ;), then the
first value will be used for the top-left and bottom-right corners, and
the second value will be used for the top-right and bottom-left cor-
ners.
o When we use three values (such as border-radius: 10% 30% 20%;) then the
first value will be used for the top-left corner, the second value will
be applied on top-right, and bottom-left corners and the third value
will be applied to the bottom-right corner.
o Similarly, when this property has four values (border-radius: 10% 30% 20%
40%;) then the first value will be the radius of top-left, the second
USCSS NOTES 30
AAA FOUNDATION
value will be used for the top-right, the third value will be applied on
bottom-right, and the fourth value is used for bottom-left.
Syntax
border-radius: 1-4 length | % / 1-4 length | % | inherit | initial;
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> CSS border-radius </title>
5. <style>
6. div {
7. padding: 50px;
8. margin: 20px;
9. border: 6px ridge red;
10. width: 300px;
11. float: left;
12. height: 150px;
13. }
14. p{
15. font-size: 25px;
16. }
17. #one {
18. border-radius: 90px;
19. background: lightgreen;
20. }
21. #two {
22. border-radius: 25% 10%;
23. background: orange;
24. }
25. </style>
26. </head>
27. <body>
28. <div id = "one">
29. <h2> Welcome to the London [Link]</h2>
30. <p> border-radius: 90px; </p>
USCSS NOTES 31
AAA FOUNDATION
31. </div>
32. <div id = "two">
33. <h2> Welcome to the London [Link]</h2>
34. <p> border-radius: 25% 10%; </p>
35. </div>
36. </body>
37. </html>
Output
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 ele-
ment on
the
USCSS NOTES 32
AAA FOUNDATION
webpage is a rectangular box and the CSS property defines the behavior of
that rectangular box.
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 [Link]</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>
2) CSS display inline-block
USCSS NOTES 33
AAA FOUNDATION
The CSS display inline-block element is very similar to inline element but the
difference is that you are able to set the width and height.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline-block;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello [Link]</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>
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>
USCSS NOTES 34
AAA FOUNDATION
11. <p>Hello [Link]</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>
CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on
the element. It allows us to specify the cursor type, which will be displayed to
the user. When a user hovers on the link, then by default, the cursor trans-
forms into the hand from a pointer.
Let's understand the property values of the cursor.
Values Usage
default It indicates an arrow, which is the default cursor.
copy It is used to indicate that something is copied.
e-resize It represents the east direction and indicates that the edge of the box is to
be shifted towards right.
n-resize It represents the north direction that indicates that the edge of the box is to
be shifted to up.
move It indicates that something is to be shifted.
None It is used to indicate that no cursor is rendered for the element.
No-drop It is used to represent that the dragged item cannot be dropped here.
Wait It represents an hourglass.
USCSS NOTES 35
AAA FOUNDATION
Here are some Example
1. <html>
2. <head>
3. </head>
4. <style>
5. body{
6. background-color: lightblue;
7. color:green;
8. text-align: center;
9. font-size: 20px;
10. }
11. </style>
12. <body>
13. <p>Move your mouse over the below words for the cursor change.</p>
14. <div style = "cursor:default">Default value</div>
15. <div style = "cursor:copy">copy value</div>
16. <div style = "cursor:pointer">Pointer</div>
17. <div style = "cursor:move">Move</div>
18. <div style = "cursor:e-resize">e-resize</div>
19. <div style = "cursor:n-resize">n-resize</div>
20. <div style = "cursor:wait">wait</div>
21. <div style = "cursor:progress">Progress</div>
22. <div style = "cursor:no-drop">no-drop</div>
23. <div style = "cursor:not-allowed">not-allowed</div>
24. </body>
25. </html>
CSS font-family
USCSS NOTES 36
AAA FOUNDATION
This CSS property is used to provide a comma-separated list of font families.
It sets the font-face for the text content of an element. This property can hold
multiple font names as a fallback system, i.e., if one font is unsupported in
the browser, then others can be used. The different font-family is used for
making attractive web pages.
There are two types of font-family names in CSS, which are defined below:
• family-name: It is the name of the font-family such as "Courier", "Arial",
"Times", etc.
• generic-family: It is the name of the generic family that includes five cat-
egories, which are "serif", "sans-serif", "cursive", "fantasy", and "mon-
ospace". It should be placed at last in the list of the font family names.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body{
6. text-align:center;
7. }
8. h1.a {
9. font-family: "Times New Roman", Times, serif;
10. color:Red;
11. }
12. h2.b {
13. font-family: Arial, Helvetica, sans-serif;
14. color:blue;
15. }
16. </style>
17. </head>
18. <body>
19. <h1>The font-family Property</h1>
20. <h1 class="a">Hello World :) :)</h1>
21. <h2 class="b">Welcome to the [Link]</h2>
USCSS NOTES 37
AAA FOUNDATION
22. </body>
23. </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 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
USCSS NOTES 38
AAA FOUNDATION
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>
2) Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" sys-
tem. If the browser does not support the first font, it tries the next font, and
so on.
Start with the font you want, and end with a generic family, to let the browser
pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quo-
tation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list
USCSS NOTES 39
AAA FOUNDATION
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. font-family: Impact, Charcoal, sans-serif;
7. }
8. </style>
9. </head>
10.<body>
11.<h1>CSS font-family</h1>
12.<p class="impact">This is a paragraph, shown with the Impact font.</p>
13.</body>
14.</html>
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
small used to display small text size.
medium used to display medium text size.
large used to display large 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:small;"> This font size is small</p>
7. <p style="font-size:medium;"> This font size is medium. </p>
8. <p style="font-size:large;"> This font size is large. </p>
USCSS NOTES 40
AAA FOUNDATION
9. <p style="font-size:200%;"> This font size is set on 200%. </p>
10. <p style="font-size:20px;"> This font size is 20 pixels. </p>
11. </body>
12. </html>
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>
5) Font-size with pixels
When we set the size of text with pixels, then it provides us the full control
over the size of the text.
USCSS NOTES 41
AAA FOUNDATION
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5.
6. #first {
7. font-size: 40px;
8. }
9. #second {
10. font-size: 20px;
11. }
12. </style>
13. </head>
14. <body>
15.
16. <p id="first">This is a paragraph having size 40px.</p>
17. <p id="second">This is another paragraph having size 20px.</p>
18.
19. </body>
20. </html>
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>
USCSS NOTES 42
AAA FOUNDATION
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>
CSS Colors
The color property in CSS is used to set the color of HTML elements. Typically,
this property is used to set the background color or the font color of an ele-
[Link] CSS, we use color values for specifying the color. We can also use
this property for the border-color and other decorative effects.
RGB Format
RGB format is the short form of 'RED GREEN and BLUE' that is used for de-
fining the color of an HTML element simply by specifying the values of R,
G, B that are in the range of 0 to 255.
This property is not supported in all browsers that's why it is not recommended
to use it.
RGBA Format
It is almost similar to RGB format except that RGBA contains A (Alpha) that
specifies the element's transparency. The value of alpha is in the range 0.0
to 1.0, in which 0.0 is for fully transparent, and 1.0 is for not transparent
Hexadecimal notation
USCSS NOTES 43
AAA FOUNDATION
Hexadecimal can be defined as a six-digit color representation. This notation
starts with the # symbol followed by six characters ranges from 0 to F. In
hexadecimal notation, the first two digits represent the red (RR) color value,
the next two digits represent the green (GG) color value, and the last two
digits represent the blue (BB) color value.
Let's see the list of built-in colors along with their decimal and hexadecimal
values.
[Link]. Color name Hexadecimal Value Decimal Value or rgb() value
1. Red #FF0000 rgb(255,0,0)
2. Orange #FFA500 rgb(255,165,0)
3. Yellow #FFFF00 rgb(255,255,0)
4. Pink #FFC0CB rgb(255,192,203)
5. Green #008000 rgb(0,128,0)
6. Violet #EE82EE rgb(238,130,238)
7. Blue #0000FF rgb(0,0,255)
8. Aqua #00FFFF rgb(0,255,255)
9. Brown #A52A2A rgb(165,42,42)
10. White #FFFFFF rgb(255,255,255)
11. Gray #808080 rgb(128,128,128)
12. Black #000000 rgb(0,0,0)
Example
1. <html>
2. <head>
3. <title>CSS hsl color property</title>
USCSS NOTES 44
AAA FOUNDATION
4. <style>
5. h1{
6. text-align:center;
7. }
8. #rgb{
9. color:rgb(255,0,0);
10. }
11. #rgba{
12. color:rgba(255,0,0,0.5);
13. }
14. #hex{
15. color:#EE82EE;
16. }
17. </style>
18. </head>
19. <body>
20. <h1 id="rgb">Hello World. This is RGB format. </h1>
21. <h1 id="rgba">
22. Hello World. This is RGBA format.
23. </h1>
24. <h1 id="hex">
25. Hello World. This is Hexadecimal format.
26. </h1>
27. </body>
28. </html>
CSS hover
The hover selector is for selecting the elements when we move the mouse on
them. It is not only limited to the links. We can use it on almost every HTML
element. To style the link to unvisited pages, we can use the link selector. To
style the link for visited pages, we can use the visited selector and to style the
active links we can use the active selector.
It is introduced in CSS1. The hover can be used to highlight the web pages as
per the preference of users in an effective web-designing program.
The hover feature includes the following effects:
USCSS NOTES 45
AAA FOUNDATION
• Change the color of the background and font.
• Modify the opacity of the image.
• Text embedding.
• Create image rollover effects.
• Swapping of images.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <style>
6. body{
text-align:center;
7. }
8. {box-sizing: border-box;}
9. .container {
10. position: relative;
11. width: 50%;
12. max-width: 300px;
13. }
14. .image {
15. display: block;
16. width: 100%;
17. height: auto;
18. }
19. .overlay {
20. position: absolute;
21. bottom: 0;
22. background: rgba(0, 0, 0, 0.2);
23. width: 100%;
24. opacity:0;
25. transition: .9s ease;
26. font-size: 25px;
27. color:white;
28. padding: 20px;
29. }
30. .container:hover .overlay {
31. opacity: 1.5;
32. }
33. </style>
USCSS NOTES 46
AAA FOUNDATION
34. </head>
35. <body>
36. <h1>Image Overlay Title Effect</h1>
37. <h2>Move your mouse over the image to see the effect.</h2>
38. <center>
39. <div class="container">
40. <img src="[Link]" class="image">
41. <div class="overlay">Welcome to Rose [Link]</div>
42. </div> </center>
43. </body>
44. </html>
CSS Line Height
The CSS line height property is used to define the minimal height of line boxes
within the element. It sets the differences between two lines of your content.
It defines the amount of space above and below inline elements. It allows you
to set the height of a line of independently from the font size.
CSS line-height values
There are some property values which are used with CSS line-height property.
value description
normal This is a default value. it specifies a normal line height.
number It specifies a number that is multiplied with the current font size to set the
line height.
length It is used to set the line height in px, pt,cm,etc.
% It specifies the line height in percent of the current font.
initial It sets this property to its default value.
inherit It inherits this property from its parent element.
CSS line-height example
1. <!DOCTYPE html>
USCSS NOTES 47
AAA FOUNDATION
2. <html>
3. <head>
4. <style>
5. [Link] {
6. line-height: 70%;
7. }
8. [Link] {
9. line-height: 200%;
10. }
11. </style>
12. </head>
13. <body>
14. <h3>
15. This is a heading with a standard line-height.<br>
16. This is a heading with a standard line-height.<br>
17. The default line height in most browsers is about 110% to 120%.<br>
18. </h3>
19. <h3 class="small">
20. This is a heading with a smaller line-height.<br>
21. This is a heading with a smaller line-height.<br>
22. This is a heading with a smaller line-height.<br>
23. This is a heading with a smaller line-height.<br>
24. </h3>
25. <h3 class="big">
26. This is a heading with a bigger line-height.<br>
27. This is a heading with a bigger line-height.<br>
28. This is a heading with a bigger line-height.<br>
29. This is a heading with a bigger line-height.<br>
30. </h3>
31. </body>
32. </html>
CSS Margin
CSS Margin property is used to define the space around elements. It is com-
pletely transparent and doesn't have any background color. It clears an area
around the element.
USCSS NOTES 48
AAA FOUNDATION
Top, bottom, left and right margin can be changed independently using sepa-
rate properties. You can also change all properties at once by using shorthand
margin property.
There are following CSS margin properties:
CSS Margin Properties
Property Description
margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.
CSS Margin Values
These are some possible values for margin property.
Value Description
auto This is used to let the browser calculate a margin.
length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
% It is used to define a margin in percent of the width of containing element.
inherit It is used to inherit margin from parent element.
Note: You can also use negative values to overlap content.
USCSS NOTES 49
AAA FOUNDATION
CSS margin Example
You can define different margin for different sides for an element.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. [Link] {
9. margin-top: 50px
10. margin-bottom: 50px;
11. margin-right: 100px;
12. margin-left: 100px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This paragraph is not displayed with specified margin. </p>
18. <p class="ex">This paragraph is displayed with specified margin.</p>
19. </body>
20. </html>
CSS Opacity
The CSS opacity property is used to specify the transparency of an element.
In simple word, you can say that it specifies the clarity of the image.
In technical terms, Opacity is defined as degree in which light is allowed to
travel through an object.
How to apply CSS opacity setting
USCSS NOTES 50
AAA FOUNDATION
Opacity setting is applied uniformly across the entire object and the opacity
value is defined in term of digital value less than 1. The lesser opacity value
displays the greater opacity. Opacity is not inherited.
CSS Opacity Example: transparent image
Let's see a simple CSS opacity example of image transparency.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img{
6. border: 2px solid red;
7. border-radius:5px;
8. padding:10px;
9. opacity:0.3;
10. }
11. h2{
12. color:red;
13. }
14. </style>
15. </head>
16.
17. <body>
18. <h1>Transparent Image</h1>
19. <img src="[Link]"></img>
20. <h2>Welcome to Rose Garden </h2>
21. </body>
22. </html>
Output:
Normal Image
USCSS NOTES 51
AAA FOUNDATION
Transparent Image
Note 1: Chrome, Firefox, Opera, Safari, and IE9 use the opacity property for transparency. The opacity
value ranges from 0.1 to 1.0. Lower value produces the greater opacity.
CSS filter
CSS filters are used to set visual effects to text, images, and other aspects of
a webpage. The CSS filter property allows us to access the effects such as
color or blur, shifting on the rendering of an element before the element gets
displayed.
Let's discuss the property values along with an example.
brightness()
USCSS NOTES 52
AAA FOUNDATION
As its name implies, it is used to set the brightness of an element. If the
brightness is 0%, then it represents completely black, whereas 100% bright-
ness represents the original one. It can also accept values above 100% that
provide brighter results.
We can understand it by using the following illustration.
Example
1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: brightness(130%);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "[Link]"> <h2>Original Image </h2>
17. <img src = "[Link]" id = "img1"> <h2>brightness(130%)</h2>
18. </body>
19. </html>
Grayscale()
It converts the input image into black and white. 0% grayscale represents the
original one, whereas 100% represents completely grayscale. It converts the
object colors into 256 shades of gray.
Example
USCSS NOTES 53
AAA FOUNDATION
1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>CSS filter property</title>
6. <style>
7. body{
8. text-align:center;
9. }
10. #img1 {
11. filter: grayscale(80%);
12. }
13. </style>
14. </head>
15. <body>
16. <img src = "[Link]" > <h2>Original Image </h2>
17. <img src = "[Link]" id = "img1"> <h2> grayscale(80%)</h2>
18. </body>
19. </html>
CSS Images
Images are an important part of any web application. Including a lot of images
in a web application is generally not recommended, but it is important to use
the images wherever they required. CSS helps us to control the display of
images in web applications.
The styling of an image in CSS is similar to the styling of an element by using
the borders and margins. There are multiple CSS properties such as border
property, height property, width property, etc. that helps us to style an image.
Let's discuss the styling of images in CSS by using some illustrations.
Thumbnail Image
The border property is used to make a thumbnail image.
Example
USCSS NOTES 54
AAA FOUNDATION
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img{
6. border: 2px solid red;
7. border-radius:5px;
8. padding:10px;
9. }
10. h2{
11. color:red;
12. }
13. </style>
14. </head>
15.
16. <body>
17. <h1>Thumbnail Image</h1>
18. <img src "[Link]"></img>
19. <h2>Welcome to Rose Garden</h2>
20. </body>
21. </html>
USCSS NOTES 55
AAA FOUNDATION
Rounded image
The border-radius property sets the radius of the bordered image. It is used
to create the rounded images. The possible values for the rounded corners are
given as follows:
• border-radius: It sets all of the four border-radius property.
• border-top-right-radius: It sets the border of the top-right corner.
• border-top-left-radius: It sets the border of the top-left corner.
• border-bottom-right-radius: It sets the border of the bottom-right corner.
• border-bottom-left-radius: It sets the border of the bottom-left corner.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #img1{
6. border: 2px solid green;
7. border-radius:50%;
8. padding:5px;
9. }
10. h2{
11. color:red;
12. }
13. </style>
14. </head>
15. <body>
16. <h1>Rounded Image</h1>
17. <img src="[Link]" id="img1"></img>
18. <h2>Welcome to Rose Garden </h2>
19. </body>
20. </html>
USCSS NOTES 56
AAA FOUNDATION
Center an Image
We can center an image by using the left-margin and right-margin prop-
erty. We have to set these properties to auto in order to make a block element.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #img1{
6. margin-left:auto;
7. margin-right:auto;
8. display:block;
9. }
10. h1,h2{
11. text-align:center;
12. }
13. </style>
14. </head>
15.
16. <body>
17. <h1>Center image</h1>
18. <img src=" [Link] " id="img1"></img>
19. <h2>Welcome to Rose Garden </h2>
20. </body>
21. </html>
CSS Overflow
The CSS overflow property specifies how to handle the content when it over-
flows its block level container.
USCSS NOTES 57
AAA FOUNDATION
We know that every single element on a page is a rectangular box and the
size, positioning and behavior of these boxes are controlled via CSS.
Let's take an example: If you don't set the height of the box, it will grow as
large as the content. But if you set a specific height or width of the box and
the content inside cannot fit then what will happen. The CSS overflow property
is used to overcome this problem. It specifies whether to clip content, render
scroll bars, or just display content.
CSS Overflow Example
Let's see a simple CSS overflow property.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. background-color: #00ffff;
7. width: 100px;
8. height: 100px;
9. overflow: scroll;
10. }
11. [Link] {
12. background-color: #00FF00;
13. width: 100px;
14. height: 170px;
15. overflow: hidden;
16. }
17. </style>
18. </head>
19. <body>
20. <p>The overflow property specifies what to do if the content of an element ex-
ceeds the size of the element's box.</p>
21. <p>overflow:scroll</p>
22. <div class="scroll">You can use the overflow property when you want to have bet-
ter control of the layout.
USCSS NOTES 58
AAA FOUNDATION
23. The default value is visible.</div>
24. <p>overflow:hidden</p>
25. <div class="hidden">You can use the overflow property when you want to have bet-
ter control of the layout.
26. The default value is visible.</div>
27. </body>
28. </html>
CSS Padding
CSS Padding property is used to define the space between the element content
and the element border.
It is different from CSS margin in the way that CSS margin defines the space
around elements. CSS padding is affected by the background colors. It clears
an area around the content.
Top, bottom, left and right padding can be changed independently using sep-
arate properties. You can also change all properties at once by using short-
hand padding property.
CSS Padding Properties
Property Description
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set left padding of an element.
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.
USCSS NOTES 59
AAA FOUNDATION
CSS Padding Values
Value Description
length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing element.
CSS Padding Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. [Link] {
9. padding-top: 50px;
10. padding-right: 100px;
11. padding-bottom: 150px;
12. padding-left: 200px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This is a paragraph with no specified padding.</p>
18. <p class="padding">This is a paragraph with specified paddings.</p>
19. </body>
20. </html>
CSS Position
USCSS NOTES 60
AAA FOUNDATION
The CSS position property is used to set position for an element. it is also used
to place an element behind another and also useful for scripted animation
effect.
You can position an element using the top, bottom, left and right properties.
These properties can be used only after position property is set first. A position
element's computed position property is relative, absolute, fixed or sticky.
Let's have a look at following CSS positioning:
1) CSS Static Positioning
This is a by default position for HTML elements. It always positions an element
according to the normal flow of the page. It is not affected by the top, bottom,
left and right properties.
2) CSS Fixed Positioning
The fixed positioning property helps to put the text fixed on the browser.
This fixed test is positioned relative to the browser window, and doesn't
move even you scroll the window.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.pos_fixed {
6. position: fixed;
7. top: 50px;
8. right: 5px;
9. color: blue;
10. }
11. </style>
12. </head>
13. <body>
14. <p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><
p>.... ...</p
USCSS NOTES 61
AAA FOUNDATION
15. ><p>........</p><p>........</p><p>........</p><p>........</p>
16. <p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>
17. <p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>So
me text...</p>
18. <p class="pos_fixed">This is the fix positioned text.</p>
19. </body>
20. </html>
USCSS NOTES 62
AAA FOUNDATION
The CSS Box Model
All HTML elements can be considered as boxes. 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 ele-
ment. 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 transpar-
ent
• 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.
USCSS NOTES 63
AAA FOUNDATION
Example:
Demonstration of the box model:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div {
6. background-color: lightgrey;
7. width: 300px;
8. border: 15px solid green;
9. padding: 50px;
[Link]: 20px;
11.}
12.</style>
13.</head>
14.<body>
15.<h2>Demonstrating the Box Model</h2>
16.<p>The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual con-
tent.</p>
17.<div>This text is the content of the box. We have added a 50px padding,
20px margin and a 15px green border. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse-
quat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est labo-
rum.</div>
18.</body>
19.</html>
Box-shadow CSS
USCSS NOTES 64
AAA FOUNDATION
It is used to add shadow-like effects around the frame of an element.
Syntax
box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;
v-offset: Unlike the h-offset, it is used to set the shadow position vertically.
The positive value in it sets the shadow below the box, and the negative value
sets the shadow above of the box.
blur: As its name implies, it is used to blur the box-shadow. This attribute is
optional.
spread: It sets the shadow size. The spread size depends upon the spread
value.
color: As its name implies, this attribute is used to set the color of the shadow.
It is an optional attribute.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS box-shadow Property</title>
5. <style>
6. div
7. {
8. border: 1px solid;
9. padding: 10px;
10. }
11. #hvb
12. {
13. /* box-shadow: h-offset v-offset blur */
14. box-shadow: 5px 10px 10px;
15. }
16. #spr
17. {
USCSS NOTES 65
AAA FOUNDATION
18. /* box-shadow: h-offset v-offset blur spread */
19. box-shadow: 5px 10px 10px 10px;
20. }
21. #col
22. {
23. /* box-shadow: h-offset v-offset blur spread color */
24. box-shadow: 5px 10px 10px 10px orange;
25. }
26. #ins
27. {
28. /* box-shadow: h-offset v-offset blur spread color inset */
29. box-shadow: 5px 10px 10px 10px orange inset;
30. }
31. #init
32. {
33. /* box-shadow: initial */
34. box-shadow: initial;
35.
36. }
37. #non
38. {
39. /* box-shadow: none */
40. box-shadow: none;
41. }
42. </style>
43. </head>
44.
45. <body>
46. <div id = "hvb">
47. <h1>It is a shadow box that has h-offset, v-offset and blur attributes.</h1>
48. </div>
49. <br><br>
50. <div id = "spr">
51. <h1>It is a box that includes the spread attribute.</h1>
52. </div>
53. <br><br>
54. <div id = "col">
USCSS NOTES 66
AAA FOUNDATION
55. <h1>It is a box that includes the color attribute.</h1>
56. </div>
57. <br><br>
58. <div id = "ins">
59. <h1>It is a box that includes the inset attribute.</h1>
60. </div>
61. <br><br>
62. <div id = "init">
63. <h1>It is a box that includes the initial attribute.</h1>
64. </div>
65. <br><br>
66. <div id = "non">
67. <h1>It is a box that includes the default attribute i.e. none.</h1>
68. </div>
69. </body>
70. </html>
CSS Text-shadow
As its name implies, this CSS property adds shadows to the text. It accepts
the comma-separated list of shadows that applied to the text. It's default
property is none. It applies one or more than one text-shadow effect on the
element's text content.
Let's see the syntax of text-shadow property.
Syntax
text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;
Values
h-shadow: It is the required value. It specifies the position of the horizontal
shadow and allows negative values.
USCSS NOTES 67
AAA FOUNDATION
v-shadow: It is also the required value that specifies the position of the vertical shadow. It does
not allow negative values.
blur-radius: It is the blur-radius, which is an optional value. Its default value is 0.
color: It is the color of the shadow and also an optional value.
none: It is the default value, which means no shadow.
Example- Simple shadow
1. <!DOCTYPE html>
2.
3. <html>
4. <head>
5. <title> font-weight property </title>
6. <style>
7. [Link]{
8. text-shadow: 3px 3px red;
9. }
10. </style>
11. </head>
12.
13. <body>
14. <p class="simple">
15. Simple Shadow
16. </p>
17.
18. </body>
19. </html>
Example- Fuzzy shadow
1. <!DOCTYPE html>
2.
3. <html>
USCSS NOTES 68
AAA FOUNDATION
4. <head>
5. <title> font-weight property </title>
6. <style>
7. [Link]{
8. text-shadow: 3px 3px 3px violet;
9. font-size:30px;
10. text-align:center;
11. }
12. </style>
13. </head>
Example- Glow Effect
1. <!DOCTYPE html>
2.
3. <html>
4. <head>
5. <title> font-weight property </title>
6. <style>
7. .multi{
8. text-shadow: 0 0 .1em cyan;
9. background-color: black;
10. font-size:50px;
11. text-align:center;
12. }
13. </style>
14. </head>
15.
16. <body>
17. <div class="multi">
18. Glow Effect
19. </div>
20.
21. </body>
22. </html>
USCSS NOTES 69
AAA FOUNDATION
CSS text-transform
This CSS property allows us to change the case of the text. It is used to control
the text capitalization. This CSS property can be used to make the appearance
of text in all-lowercase or all-uppercase or can convert the first character of
each word to uppercase.
Syntax
text-transform: capitalize| uppercase | lowercase | none
Capitalize
It transforms the first character of each word to uppercase. It will not capi-
talize the first letter after the number. It only affects the first letters of the
words instead of changing the rest of the letters in the word.
If we apply the capitalize property on a word that already has capital letters,
then the letters of that word will not switch to lowercase.
The illustration of this property is given below.
Syntax (Only one EG.)
text-transform: capitalize;
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. CSS text-transform Property
6. </title>
7. <style>
8. body{
9. text-align:center;
10. }
USCSS NOTES 70
AAA FOUNDATION
11. h1 {
12. color: blue;
13. }
14.
15. p{
16. text-transform: capitalize;
17. }
18. </style>
19. </head>
20.
21. <body>
22. <center>
23. <h1>CSS text-transform property</h1>
24.
25. <h2>text-transform: capitalize</h2>
26. <p>hello world</p>
27. <p>WELCOME to the javaTpoint</p>
28.
29. </body>
30. </html>
CSS overlay
Overlay means to cover the surface of something with a coating. In other
words, it is used to set one thing on the top of another. The overlay makes a
web-page attractive, and it is easy to design.
Creating an overlay effect means to put two div together at the same place,
but both will appear when required. To make the second div appear, we can
hover or click on one div. In these two divs, one div is the overlay div that
USCSS NOTES 71
AAA FOUNDATION
contains what will show up when the user hovers over the image, and the
second div is a container that will hold both the image and its overlay.
Fade overlay effect
In this overlay effect, when we move the cursor on the image, then the overlay
will appear on the top of the image. Let's see how it works.
Example
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Image Overlay</title>
5. <style>
6. .container img {
7. width: 300px;
8. height: 300px;
9. }
10. .container {
11. position: relative;
12. width: 25%;
13. height: auto;
14. }
15.
16. .overlay{
17. position: absolute;
18. transition: 0.5s ease;
19. height: 300px;
20. width: 300px;
21. top: 0;
22. left: 20px;
23. background-color: lightblue;
24. opacity: 0;
25. }
26. .container:hover .overlay {
27. opacity: 0.9;
USCSS NOTES 72
AAA FOUNDATION
28. }
29.
30. </style>
31. </head>
32.
33. <body>
34. <center>
35.
36. <h1>Fade in Overlay</h1>
37. <h2>Move the cursor over the image to see the effect.</h2>
38. <div class="container">
39. <img src= "[Link]">
40. <div class="overlay"></div>
41. </div>
42. </center>
43. </body>
44.
45. </html>
CSS Clip-path
This CSS property is used to create a clipping region and specifies the ele-
ment's area that should be visible. The area inside the region will be visible,
while the outside area is hidden. Anything outside the clipping will be clipped
by browsers, including borders, text-shadows, and many more.
It allows us to define a particular region of the element to display, instead of
displaying the entire area. It makes it easier to clip the basic shapes by using
ellipse, circle, polygon, or inset keywords.
Defining basic shapes with clip-path
As discussed above, there are four basic shapes. Let's discuss them with an
example of each.
USCSS NOTES 73
AAA FOUNDATION
Polygon
It is one of the shapes of the available basic shapes. It allows us to define any
amount of points. The given points are in the pair of X and Y coordinates of
any unit (such as percent based or pixel-based).
We can understand this basic shape by using the below example. In the fol-
lowing example, we have defined two polygon shapes: diamond shape poly-
gon and star shape polygon.
1. <style>
2. .example {
3. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
4. }
5. .example1{
6. clip-path: poly-
gon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32%
57%, 2% 35%, 39% 35%);
7. }
8. </style>
Ellipse
The syntax to define ellipse is: ellipse(radiusX radiusY at posX posY). Like the cir-
cle, the position in it is optional and default to 50% 50%.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <style>
6. .example {
USCSS NOTES 74
AAA FOUNDATION
7. clip-path: ellipse(50% 35%);
8. }
9. .example1{
10. clip-path: ellipse(50% 65% at 70% 50%);
11. }
12. </style>
13. <body>
14. <center>
15. <h2> Clip-path property example </h2>
16. <img src="[Link]" class="example">
17. <h3> clip-path: ellipse(50% 35%);</h3>
18. <img src="[Link]" class="example1">
19. <h3> clip-path: ellipse(50% 65% at 70% 50%);</h3>
20. </center>
21. </body>
22. </html>
USCSS NOTES 75
AAA FOUNDATION
CSS Navigation bar
A Navigation bar or navigation system comes under GUI that helps the visitors
in accessing information. It is the UI element on a webpage that includes links
for the other sections of the website.
A navigation bar is mostly displayed on the top of the page in the form of a
horizontal list of links. It can be placed below the logo or the header, but it
should always be placed before the main content of the webpage.
It is important for a website to have easy-to-use navigation. It plays an im-
portant role in the website as it allows the visitors to visit any section quickly.
Let's discuss the horizontal navigational bar and vertical navigational bar in
detail.
Horizontal Navigation Bar
The horizontal navigation bar is the horizontal list of links, which is generally
on the top of the page.
Let's see how to create a horizontal navigation bar by using an example.
Example:
In this example, we are adding the overflow: hidden property that prevents the
li elements from going outside of the list, display: block property displays the
links as the block elements and makes the entire link area clickable.
We are also adding the float: left property, which uses float for getting the block
elements to slide them next to each other.
If we want the full-width background color then we have to add the background-
color property to <ul> rather than the <a> element.
1. <!DOCTYPE html>
USCSS NOTES 76
AAA FOUNDATION
2. <html>
3. <head>
4. <style>
5. ul {
6. list-style-type: none;
7. margin: 0;
8. padding: 0px;
9. overflow: hidden;
10. background-color: lightgray;
11. }
12.
13. li {
14. float: left;
15. }
16.
17. li a {
18. display: block;
19. color: blue;
20. font-size:20px;
21. text-align: center;
22. padding: 10px 20px;
23. text-decoration: none;
24. }
25. .active{
26. background-color: gray;
27. color: white;
28. }
29. li a:hover {
30. background-color: orange;
31. color: white;
32. }
33. </style>
34. </head>
35. <body>
36. <ul>
37. <li><a class="active" href="#home">Home</a></li>
38. <li><a href="#">Java</a></li>
USCSS NOTES 77
AAA FOUNDATION
39. <li><a href="#">HTML</a></li>
40. <li><a href="#">CSS</a></li>
41. </ul>
42. </body>
43. </html>
Dropdown Navbar
How to add a dropdown menu inside a navigation bar.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. ul {
6. list-style-type: none;
7. margin: 0;
8. padding: 0;
9. overflow: hidden;
10. background-color: #333;
11. }
12.
13. li {
14. float: left;
15. }
16.
17. li a, .dropbtn {
18. display: inline-block;
19. color: white;
20. text-align: center;
21. padding: 14px 16px;
22. text-decoration: none;
23. }
24.
25. li a:hover, .dropdown:hover .dropbtn {
26. background-color: red;
27. }
28.
29. [Link] {
30. display: inline-block;
31. }
USCSS NOTES 78
AAA FOUNDATION
32.
33. .dropdown-content {
34. display: none;
35. position: absolute;
36. background-color: #f9f9f9;
37. min-width: 160px;
38. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
39. z-index: 1;
40. }
41.
42. .dropdown-content a {
43. color: black;
44. padding: 12px 16px;
45. text-decoration: none;
46. display: block;
47. text-align: left;
48. }
49.
50. .dropdown-content a:hover {background-color: #f1f1f1;}
51.
52. .dropdown:hover .dropdown-content {
53. display: block;
54. }
55. </style>
56. </head>
57. <body>
58.
59. <ul>
60. <li><a href="#home">Home</a></li>
61. <li><a href="#news">News</a></li>
62. <li class="dropdown">
63. <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
64. <div class="dropdown-content">
65. <a href="#">Link 1</a>
66. <a href="#">Link 2</a>
67. <a href="#">Link 3</a>
68. </div>
69. </li>
70. </ul>
71.
72. <h3>Dropdown Menu inside a Navigation Bar</h3>
73. <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
USCSS NOTES 79
AAA FOUNDATION
74. </body>
75. </html>
CSS Image Gallery
CSS can be used to create an image gallery.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. [Link] {
6. margin: 15px;
7. border: 1px solid #ccc;
8. float: left;
9. width: 180px;
10. }
11. [Link]:hover {
12. border: 1px solid #777;
13. }
14. [Link] img {
15. width: 100%;
16. height: 100%;
17. }
18. [Link] {
19. padding: 15px;
USCSS NOTES 80
AAA FOUNDATION
20. text-align: center;
21. }
22. </style>
23. </head>
24. <body>
25. <div class="gallery">
26. <a target="_blank" href="[Link]">
27. <img src="[Link]" alt="mount" width="600" height="400">
28. </a>
29. <div class="desc">Mountain</div>
30. </div>
31. <div class="gallery">
32. <a target="_blank" href="[Link]">
33. <img src="[Link]" alt="Forest" width="600" height="400">
34. </a>
35. <div class="desc">Forest</div>
36. </div>
37. <div class="gallery">
38. <a target="_blank" href="[Link]">
39. <img src="[Link]" alt="sea" width="600" height="400">
40. </a>
41. <div class="desc">sea</div>
42. </div>
43. </body>
44. </html>
CSS Forms
The look of an HTML form can be greatly improved with CSS:
1. <!DOCTYPE html>
2. <html>
3. <style>
4. input[type=text], select {
5. width: 100%;
6. padding: 12px 20px;
7. margin: 8px 0;
8. display: inline-block;
USCSS NOTES 81
AAA FOUNDATION
9. border: 1px solid #ccc;
10. border-radius: 4px;
11. box-sizing: border-box;
12. }
13.
14. input[type=submit] {
15. width: 10%;
16. background-color: #4CAF50;
17. color: white;
18. padding: 14px 20px;
19. margin: 8px 0;
20. border: none;
21. border-radius: 4px;
22. cursor: pointer;
23. }
24.
25. input[type=submit]:hover {
26. background-color: #45a049;
27. }
28. div {
29. border-radius: 5px;
30. background-color: #f2f2f2;
31. padding: 20px;
32. }
33. </style>
34. <body>
35. <h3>Using CSS to style an HTML Form</h3>
36. <div>
37. <form action="/action_page.php">
38. <label for="fname">First Name</label>
39. <input type="text" id="fname" name="firstname" placeholder="Your name..">
40. <label for="lname">Last Name</label>
41. <input type="text" id="lname" name="lastname" placeholder="Your last name..">
42. <label for="country">Country</label>
43. <select id="country" name="country">
USCSS NOTES 82
AAA FOUNDATION
44. <option value="australia">Australia</option>
45. <option value="canada">Canada</option>
46. <option value="usa">USA</option>
47. </select>
48. <input type="submit" value="Submit">
49. </form>
50. </div>
51. </body>
52. </html>
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, pad-
ding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if
the value is 0, the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: absolute and relative.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these
will appear as exactly that size.
Absolute length units are not recommended for use on screen, because
screen sizes vary so much. However, they can be used if the output medium
is known, such as for print layout.
Unit Description
USCSS NOTES 83
AAA FOUNDATION
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
Relative Lengths
Relative length units specify a length relative to another length property.
Relative length units scales better between different rendering mediums.
CSS units: Angles
The transform properties in CSS require values to express in angles
Unit Explanation
deg It expresses the angles in degrees.
grad It expresses the angles in gradians, i.e., 1/400 of a turn.
turn It expresses the angles in turns, i.e., 360 degrees.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img
6. {
7. border:9px ridge gray;
8. border-radius:30px;
9. margin:10px;
10. transition-duration:2s;
11. }
USCSS NOTES 84
AAA FOUNDATION
12. #img1:hover{
13. transform: rotate(30deg);
14. transform-origin: bottom left 50px;
15. }
16. </style>
17. </head>
18. <body>
19. <center>
20. <img src="[Link]" id="img1"/>
21. </center>
22. </body>
23. </html>
Output
USCSS NOTES 85
AAA FOUNDATION
Assignment no.1
USCSS NOTES 86
AAA FOUNDATION
Assignment no.2
USCSS NOTES 87
AAA FOUNDATION
Assignment no.3
USCSS NOTES 88
AAA FOUNDATION
USCSS NOTES 89
AAA FOUNDATION
Examination
Solve the following Question as given Below.
Q.1) Create Property Selling Web Page below image is only for example
Q.2) Create Dropdown menu and link assignment 1,2,3 as follow
USCSS NOTES 90
AAA FOUNDATION
USCSS NOTES 91
AAA FOUNDATION
Q.3) Create an Image Photo Gallery with minimum ten Photos
USCSS NOTES 92
Potrebbero piacerti anche
- Guida Pratica Ai CSS-Come Usare Da Zero I Fogli Di Stile Con StileNessuna valutazione finoraGuida Pratica Ai CSS-Come Usare Da Zero I Fogli Di Stile Con Stile41 pagine
- The Ultimate HTML & CSS Study GuideNessuna valutazione finoraThe Ultimate HTML & CSS Study Guide40 pagine