2. Content
• Cascading Style Sheets:
• Box model
• Layout
• Typography
• Color
• Border
• Selector
• Position
• Responsive design
3. What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen.
• It is used to format the layout of a web page.
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files
4. Advantages of CSS
• Here are the following advantages of CSS, such as:
• Faster page speed: It has a faster page speed than other code's page speeds. With the help of the
CSS rule, we can apply it to all occurrences of certain tags in HTML documents.
• Better user experience: CSS makes a webpage very attractive to the eyes. Also, CSS makes it user-
friendly. When the button or text is in a proper format, it improves the user experience.
• Quicker Development time: With the help of CSS, we can specify the format and style the multiple
pages into one code string. In cascading style sheet, we can make a duplicate copy of several
website pages.
• If we make a webpage, it has the same formatting, looks, and feel, so with the help of the CSS rule
for one page, and it is sufficient for all the pages.
• Easy Formatting changes: In CSS, if we need to make changes in the format, it is very easy; we
only need to change the one-page format it will automatically apply to the other pages of CSS.
• There is no need to correct individual pages in a CSS style sheet. If we fix a CSS style sheet, it will
automatically update the other CSS style sheet.
• Compatibility: Compatibility is very important in today's age. If we create any webpage, it should
be very responsive and user-friendly. CSS is used with Html to make webpage design responsive.
5. Why Use CSS?
• CSS provides efficiency in webpage design: It also provides updates so our
webpage works appropriately. With the help of CSS, we can create and apply
those rules within the website. If we create a webpage design separately, we can
make changes in our style sheet, and it will affect all the style sheets.
• CSS provides faster page download: CSS helps with faster page download because
when we download a page, we get the cache that helps to load a page, but with
the help of CSS, we can lead to load a lighter page which helps to improve the
performance.
• CSS is easy to work: In CSS, we can visual aspect of the website separate entirely
from the content; using CSS, we can create a website that allows us to make quick
layout.
6. CSS Syntax
• CSS Syntax
• The CSS provides the style to the HTML element, which the browser interprets. After being
interpreted by the browser, the CSS style property will be applied to all the elements of the HTML.
We can provide style property to the HTML element in three parts. These three parts are as follows.
• 1. Selector
• It is an HTML tag. All the style properties of the CSS will be applied to the selector. The selector tag
like <h1> or <table> etc.
• 2. Property
• It is a type of attribute that is present in HTML tags. All the attributes of the HTML will be converted
to the CSS properties. The CSS properties like color, border, etc.
• 3. Value
• In HTML, these are assigned to the properties. For example, the color property can have a value of
either red or #F1F1F1, etc
7. CSS Syntax
• We must provide the CSS property to the HTML element in a proper way. We
must follow the syntax below to implement the CSS property.
• selector { property: value }
P
{
color: red;
}
12. 1. Inline CSS
• An inline style may be used to apply a unique style for a single element.
• Inline CSS is used to style the elements of HTML documents.
• It is used in HTML to style the attributes without using the selectors.
• Syntax
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
• Example:
<html>
<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p> </html>
13. Disadvantages of Inline CSS
• You cannot use quotations within inline CSS. If you use quotations the browser
will interpret this as an end of your style value.
• These styles cannot be reused anywhere else.
• These styles are tough to be edited because they are not stored at a single place.
• It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
• Inline CSS does not provide browser cache advantages.
14. 2. 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.
• In internal CSS, we style a single webpage uniquely.
• Syntax:
<style>
--- required styles--
</style>
15. Example of internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
</html>
16. 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.
• 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.
17. Example
• External styles are defined within the <link> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
18. Example
• An external style sheet can be written in any text editor, and must be saved with a .css
extension.
• The external .css file should not contain any HTML tags.
• Here is how the "mystyle.css" file looks:
• "mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
19. CSS Box Model
• A CSS box model is a compartment that includes numerous assets, such as edge,
border, padding and material.
• It is used to develop the design and structure of a web page.
• It can be used as a set of tools to personalize the layout of different components.
• According to the CSS box model, the web browser supplies each element as a
square prism.
• The following diagram illustrates how the CSS properties of width, height,
padding, border and margin dictate that how much space an attribute will occupy
on a web page.
21. Properties of CSS Box Model
• The CSS box model contains the different properties in CSS. These are
listed below.
• Border
• Margin
• Padding
• Content
22. Properties of CSS Box Model
• Border Field
• It is a region between the padding-box and the margin. Its proportions are determined
by the width and height of the boundary.
• Margin Field
• This segment consists of the area between the boundary and the edge of the border.
• The proportion of the margin region is equal to the margin-box width and height. It is
better to separate the product from its neighbor nodes.
• Padding Field
• This field requires the padding of the component. In essence, this area is the space
around the subject area and inside the border-box. The height and the width of the
padding box decide its proportions.
• Content Field
• Material such as text, photographs, or other digital media is included in this area.
23. 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.
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector
24. 1) CSS Element Selector
• The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
25. 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 us take an example with the id "para1".
26. 2) CSS Id Selector
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
27. 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.
• Let's take an example with a class "center".
29. 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.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
31. 4) CSS Universal Selector
• The universal selector is used as a wildcard character. It selects all the elements on the pages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
32. Example Continuation
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
33. 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.
35. Let's see the full example of CSS group selector.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
36. Typography in CSS
• Typography simply is a technique in user interface design to create
readable, appealing, attractive, and easy-to-eye text for users to read.
Typography plays an integral role in any website’s design.
• Good typography helps us read better, while bad typography makes it
hard.
37. 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.
• These are some important font attributes:
• CSS Font color: This property is used to change the color of the text. (standalone
attribute)
• CSS Font family: This property is used to change the face of the font.
• CSS Font size: This property is used to increase or decrease the size of the font.
• CSS Font style: This property is used to make the font bold, italic or oblique.
• CSS Font variant: This property creates a small-caps effect.
• CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.
38. 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 element.
• In CSS, we use color values for specifying the color. We can also use this property
for the border-color and other decorative effects.
• We can define the color of an element by using the following ways:
• RGB format.
• RGBA format.
• Hexadecimal notation.
• HSL.
• HSLA.
• Built-in color.
• Let's understand the syntax and description of the above ways in detail.
39. 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.
40. RGB Format
• RGB format is the short form of 'RED GREEN and BLUE' that is used for
defining the color of an HTML element simply by specifying the values
of R, G, B that are in the range of 0 to 255.
• The color values in this format are specified by using the rgb()
property. This property allows three values that can either be in
percentage or integer (range from 0 to 255).
• This property is not supported in all browsers; that's why it is not
recommended to use it.
• Syntax
• color: rgb(R, G, B);
• Example
• color:rgb(255,255,255);
41. 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.
• Syntax
• color:rgba(R, G, B, A);
42. Hexadecimal notation
• 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.
• The black color notation in hexadecimal is #000000, and the white color notation
in hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are
#FF0000, #00FF00, #0000FF, #FFFF00, and many more.
• Syntax
• color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
43. Short Hex codes
• It is a short form of hexadecimal notation in which every digit is
recreated to arrive at an equivalent hexadecimal value.
• For example, #7B6 becomes #77BB66 in hexadecimal.
• The black color notation in short hex is #000, and the white color
notation in short hex is #FFF. Some of the codes in short hex are #F00,
#0F0, #0FF, #FF0, and many more.
• HSL
• It is a short form of Hue, Saturation, and Lightness. Let's understand
them individually.
44. HSL
• Hue: It can be defined as the degree on the color wheel from 0 to 360. 0
represents red, 120 represents green, 240 represents blue.
• Saturation: It takes value in percentage in which 100% represents fully
saturated, i.e., no shades of gray, 50% represent 50% gray, but the color is still
visible, and 0% represents fully unsaturated, i.e., completely gray, and the
color is invisible.
• Lightness: The lightness of the color can be defined as the light that we want
to provide the color in which 0% represents black (there is no light), 50%
represents neither dark nor light, and 100% represents white (full lightness).
• Syntax
• color:hsl(H, S, L);
45. HSLA
• It is entirely similar to HSL property, except that it 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 indicates
fully transparent, and 1.0 indicates not transparent.
• Syntax
• color:hsla(H, S, L, A);
46. Built-in Color
• As its name implies, built-in color means the collection of previously
defined colors that are used by using a name such as red, blue, green,
etc.
• Syntax
• color: color-name;
50. Example Continuation
<body>
<h1 id="rgb">
Hello World. This is RGB format.
</h1>
<h1 id="rgba">
Hello World. This is RGBA format.
</h1>
<h1 id="hex">
Hello World. This is Hexadecimal format.
</h1>
51. Example Continuation
<h1 id="short">
Hello World. This is Short-hexadecimal format.
</h1>
<h1 id="hsl">
Hello World. This is HSL format.
</h1>
<h1 id="hsla">
Hello World. This is HSLA format.
</h1>
<h1 id="built">
Hello World. This is Built-in color format.
</h1>
</body>
</html>
52. 2) CSS Font Family
• CSS font family can be divided in two types:
• Generic family: It includes Serif, Sans-serif, and Monospace.
• 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.
53. Example
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• font-size: 100%;
• }
• h1 { font-family: sans-serif; }
• h2 { font-family: serif; }
• p { font-family: monospace; }
• }
• </style>
• </head>
• <body>
• <h1>This heading is shown in sans-serif.</h1>
• <h2>This heading is shown in serif.</h2>
• <p>This paragraph is written in monospace.</p>
• </body>
• </html>
54. 3) CSS Font Size
• 3) CSS Font Size
• CSS font size property is used to change the size of the font.
• The font-size property in CSS is used to specify the height and size of the font. It affects the size of
the text of an element.
• Its default value is medium and can be applied to every element.
• The values of this property include xx-small, small, x-small, etc.
• Syntax
• font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;
• The font-size can be relative or absolute.
• Absolute-size
• It is used to set the text to a definite size. Using absolute-size, it is not possible to change the size
of the text in all browsers. It is advantageous when we know the physical size of the output.
• Relative-size
• It is used to set the size of the text relative to its neighboring elements. With relative-size, it is
possible to change the size of the text in browsers.
56. Example
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>
57. 4) CSS Font Style
• CSS Font style property defines what type of font you want to display.
It may be italic, oblique, or normal.
58. Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
59. 5) CSS Font Variant
• CSS font variant property specifies how to set font variant of an
element.
• It may be normal and small-caps.
60. Example
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
61. 6) CSS Font Weight
• Syntax and Property Values
• The CSS font-weight property contains various property values for controlling the
weight and boldness of text and adheres to a specified syntax.
• Syntax:
• font-weight: normal | lighter | bolder | bold | number | inherit |initial | unset;
62. Example
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>
63. CSS font-stretch property
• The font-stretch property in CSS allows us to select a normal, expanded, or condensed
face from the font's family.
• This property sets the text wider or narrower compare to the default width of the font. It
will not work on any font but only works on the font-family that has a width-variant face.
• This CSS property only works for the fonts with additional faces like expanded and
condensed faces; otherwise, it will be affectless for the fonts that don't have condensed
or expanded faces.
• The nine keyword values for choosing the width of the font-face are given in the
following syntax.
• Syntax
• font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-
condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
68. <div class = "semi-condensed">
semi-condensed
</div>
<div class = "condensed">
condensed
</div>
<div class = "extra-condensed">
extra-condensed
</div>
<div class = "ultra-condensed">
ultra-condensed
</div>
<div class = "semi-expanded">
semi-expanded
69. </div>
<div class = "expanded">
expanded
</div>
<div class = "extra-expanded">
extra-expanded
</div>
<div class = "ultra-expanded">
ultra-expanded
</div>
</body>
</html>
70. CSS Borders
• The CSS border properties allow you to specify the style, width, and
color of an element's border.
• Example
71. 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).
75. • 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:
78. Example continuation
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.</p>
</body>
</html>
79. 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)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent
81. CSS Border- Individual Sides
• 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;
• }
