CSS
Cascading Style Sheets
• CSS (Cascading Style Sheets) is a styling language used to add style to
a webpage.
• HTML provides structure and adds content to a webpage, while CSS
enhances the visual presentation of that content through various
styles.
• CSS handles the look and feel part of a web page. Using CSS, you can
control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs,variations in display for
different devices and screen sizes as well as a variety of other effects.
Applications of CSS
• CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You
can define a style for each HTML element and apply it to as many Web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
faster download times.
• Easy maintenance - To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a
far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type
of device. By using the same HTML document, different versions of a website can be presented
for handheld devices such as PDAs and cell phones or for printing.
• Global web standards - Now HTML attributes are being deprecated and it is being recommended
to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to
future browsers.
CSS - Syntax
• A style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1> or <table> etc.
• Property − A property is a type of attribute of HTML tag. Put simply,
all the HTML attributes are converted into CSS properties. They could
be color, border etc.
• Value − Values are assigned to properties. For example, color property
can have value either red or #F1F1F1 etc.
• selector { property: value }
table{ border :1px solid #C00; }
The Type Selectors
• A CSS selector selects the HTML element(s) you want to style
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector
CSS Element Selector
• The element selector selects the HTML element by name.
• Here, all <p> elements on the page will be center-aligned, with a red
text color:
•p{
text-align: center;
color: red;
}
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.
• #para1 { <p id="para1">Hello World!</p>
text-align: center; <p>This paragraph is not affected by the style.</p>
color: red;
}
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.
.center {
text-align: center;
color: blue;
}
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.
[Link] {
text-align: center;
color: blue;
}
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
CSS Universal Selector
• he universal selector is used as a wildcard character. It selects all the
elements on the pages.
*{ <body>
color: green; <h1>Hello world!</h1>
font-size: 20px; <p>Every element on the page will be affected by the style.</p>
} <p id="para1">Me too!</p>
<p>And me!</p>
</body>
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.
h1 {
text-align: center;
h1,p {
color: blue; text-align: center;
} color: blue;
}
p{
text-align: center;
color: blue;
}
How to add CSS
• CSS is added to HTML pages to format the document according to
information in the style sheet. There are three ways to insert CSS in
HTML documents.
• Inline CSS
• Internal CSS
• External CSS
Inline CSS
• Inline CSS is used to apply CSS on a single line or element.
• <p style="color:blue">Hello CSS</p>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
Internal CSS
• Internal CSS is used to apply CSS on a single document or page. It can
affect all the elements of the page. It is written inside the style tag
within head section of html.
<style>
p{color:blue}
</style>
External CSS
• External CSS is used to apply CSS on multiple pages or all pages. Here,
we write all the CSS code in a css file. Its extension must be .css for
example [Link]. The link tag must be used inside head section of
html.
• <link rel="stylesheet" type="text/css" href="[Link]">
CSS Box Model
• The CSS box model is a fundamental concept that defines how the
element's dimensions and spacing are calculated.
• The box model treats every HTML element as a rectangular box consisting
of content, padding, border, and margin.
• The components of the box model are:
• content: actual text or image that is displayed in the element
• padding: transparent space between the content and the border of an
element
• border: line that surrounds the padding and content within the element
• margin: transparent area added outside the borderThe primary purpose of
the box model is to explain how the dimensions and spacing of elements
are calculated and how they relate to each other.
•
Elements of the width and height
Size of the box Properties of CSS
Height height + padding-top + padding-bottom +
border-top + border-bottom + margin-top +
margin-bottom
Width width + padding-left + padding-right +
border-left + border-right + margin-left +
margin-right
CSS Position
• 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.
following CSS positioning:
• CSS Static Positioning
• CSS Fixed Positioning
• CSS Relative Positioning
• CSS Absolute Positioning
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.
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.
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
position: fixed;
top: 50px;
right: 5px;
color: blue;
}
</style>
</head>
<body>
<p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><p>.... ...</p
><p>........</p><p>........</p><p>........</p><p>........</p>
<p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>
<p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>Some text...</p>
<p class="pos_fixed">This is the fix positioned text.</p>
</body>
</html>
CSS Relative Positioning
• The relative positioning property is used to set the element relative to
its normal position.
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 30px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>
<p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</p>
<p>The style "left:30px" adds 30 pixels to the element's original left position.</p>
</body>
</html>
CSS Absolute Positioning
• The absolute positioning is used to position an element relative to the
first parent element that has a position other than static. If no such
element is found, the containing block is HTML.
• With the absolute positioning, you can place an element anywhere on
a page
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position: absolute;
left: 150px;
top: 250px;
}
</style>
</head>
<body>
<h2>This heading has an absolute position</h2>
<p> The heading below is placed 150px from the left and 250px from the top of the page.</p>
</body>
</html>
All CSS Position Properties
No. property description values
1) bottom It is used to set the bottom margin edge for a auto, length, %, inherit
positioned box.
2) clip It is used to clip an absolutely positioned shape, auto, inherit
element.
3) cursor It is used to specify the type of cursors to be url, auto, crosshair, default,
displayed. pointer, move, e-resize, ne-
resize, nw-resize, n-resize,
se-resize, sw-resize, s-
resize, w-resize, text, wait,
help
4) left It sets a left margin edge for a positioned box. auto, length, %, inherit
5) overflow This property is used to define what happens if auto, hidden, scroll, visible,
content overflow an element's box. inherit
6) position It is used to specify the type of positioning for absolute, fixed, relative,
an element. static, inherit
7) right It is used to set a right margin edge for a auto, length, %, inherit
positioned box.
8) top It is used to set a top margin edge for a auto, length, %, inherit
positioned box.
9) z-index It is used to set stack order of an element. number, auto, inherit
CSS Vertical Align
• The CSS vertical align property is used to define the vertical alignment
of an inline or table-cell box. It is the one of the self-explanatory
property of CSS
value description
baseline It aligns the baseline of element with the baseline of parent
element. This is a default value.
length It is used to increase or decrease length of the element by the
specified length. negative values are also allowed.
% It is used to increase or decrease the element in a percent of the
"line-height" property. negative values are allowed.
sub It aligns the element as if it was subscript.
super It aligns the element as if it was superscript.
top It aligns the top of the element with the top of the tallest element
on the line.
bottom It aligns the bottom of the element with the lowest element on the
line.
text-top the top of the element is aligned with the top of the parent
element's font.
middle the element is placed in the middle of the parent element.
text-bottom the bottom of the element is aligned with the bottom of the parent
element's font.
initial It sets this property to Its default value.
inherit inherits this property from Its parent element.
Background Properties
property Description Values Example
background-color Specify the background color of the element. hex, rgb, rgba, color names body{ background-color:#ccc; }
background-image Set the background image of the element. URL, none, inherit body{ background-color:url([Link]); }
background-repeat Repeats the background image vertically and repeat, repeat-x, repeat-y, body{ background-color:url([Link]);
horizontally. inherit, no-repeat background-repeat:no-repeat; }
background-position Set the position of background image. left top, left center, left body{ background-color:url([Link]);
bottom, right top, right background-repeat:no-repeat;
center, right bottom, center background-position:center center; }
top, center center, center
bottom
background- Set the background image is scroll or fixed. fixed,scroll body{ background-color:utl([Link]);
attachment background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed; }
background-size Set the background image width. cover, auto, body{ background-color:url([Link]);
length(px,pt,cm), contain background-repeat:no-repeat;
background-size:cover; }
Font Properties
Property Description Values Example
font-family Specifies the font family Arial, Calibri, Times New p{ font-family:Arial; }
for a selected element. Roman, inherit, etc.
font-size Specifies the font size for small, medium, larger, p{ font-size:12px; }
a selected element. large, length (px, em), %,
inherit
font-variant Specifies the text normal, small-caps, p{ font-variant:small-
displayed in small caps. inherit caps; }
font-weight Specifies the font weight normal, bold, 100, 200, p{ font-weight:bold; }
for a selected element. 300, 400, 500, 600, 700,
800, 900, inherit.
font-style Specifies the font style for normal, italic, oblique, p{ font-style:italic; }
a selected element. inherit.
font Sets all the font font-style font-variant p{ font:italic bold 18px
properties for a selected font-weight font-size font- Arial; }
element. family
Text Properties - CSS
Property Description Values Example
color Sets the color value of a text hex, rgb, color names p{ color:green; }
text-align Sets the horizontal alignment of text. left,right,center,justify p{ text-align:right; }
text-decoration Specifies the decoration to text. none, undeline, overline, line- p{ text-decoration:undeline; }
through
text-indent Specifies the first line indentation in a length(px, pt, cm), % p{ text-indent:10px; }
text.
text-transform Specifies the letter case to text. none, uppercase, lowercase, p{ text-transform:uppercase;
capitalize }
letter-spacing Specifies the space between characters in normal, length(px, pt, cm) p{ letter-spacing:15px; }
a text.
word-spacing Specifies the space between words in a normal, length(px, pt, cm) p{ word-spacing:15px; }
text.
vertical-align Sets the vertical alignment of text. sub, super, top, middle, p{ vertical-align:middle; }
bottom
line-height Specifies the height of a line. normal, length(px, pt, cm), % p{ line-height:15px; }
Image css
• Images are an important part of any web application.
• 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.
Thumbnail Image
• A thumbnail is a small image that represents a larger image (when
clicked on).
• The border property is used to make a thumbnail image.
Transparent image
• To make an image transparent, we have to use the opacity property.
The value of this property lies between 0.0 to 1.0, respectively.