CSS- cascading style sheet ppt-all basic CSS... Design responsive & attractive website with CSS

1. Unit-3-CSS
Introduction to Style sheet, types of style sheets-inline, External,
embedded CSS , text formatting properties, CSS Border, margin
properties, Positioning use of classes in CSS, color properties, use
of<div>&<spam>,padding, CSS multiple columns.

2. Introduction to Style sheet
• Cascading Style Sheets, fondly referred to as CSS, is a simply designed
language intended to simplify the process of making web pages presentable.
CSS allows you to apply styles to web pages. More importantly, CSS enables
you to do this independent of the HTML that makes up each web page. It
describes how a webpage should look: it prescribes colors, fonts, spacing,
and much more. In short, you can make your website look however you
want. CSS lets developers and designers define how it behaves, including
how elements are positioned in the browser.
• While html uses tags, css uses rulesets. CSS is easy to learn and understand,
but it provides powerful control over the presentation of an HTML
document.

3. •Why CSS??
• CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
• CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
• Easy Maintenance: To make a global change simply change the
style, and all elements in all the webpages will be updated
automatically.
• Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
• 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.
• Offline Browsing: CSS can store web applications locally with the
help of an offline cache. Using this we can view offline websites.

4. • Advantages 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.

5. • CSS versions release years:

6. • CSS Syntax:
• CSS comprises style rules that are interpreted by the browser and
then applied to the corresponding elements in your document.
• A style rule set consists of a selector and declaration block.
Selector -- h1
Declaration -- {color:blue;font size:12px;}

7. • The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons,
and declaration blocks are surrounded by curly braces.

8. • There are three types of CSS which are given below:
• Inline CSS
• Internal or Embedded CSS
• External CSS

9. • Inline CSS: Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Inline CSS</title>
• </head>
•
• <body>
• <p style = "color:#009900; font-size:50px;
• font-style:italic; text-align:center;">
• this is inline css
• </p>
•
• </body>
• </html>

11. •Internal or Embedded CSS: This can
be used when a single HTML
document must be styled uniquely.
The CSS rule set should be within
the HTML file in the head section
i.e. the CSS is embedded within the
HTML file.

12. • <!DOCTYPE html>
• <html>
• <head><title>Internal CSS</title>
• <style>
• .main {
• text-align:center;
• }
• .GFG {
• color:#009900;
• font-size:50px;
• font-weight:bold;
• }
• .geeks {
• font-style:bold;
• font-size:20px;
• }
• </style> </head> <body>
• <div class = "main">
• <div class ="GFG">GeeksForGeeks</div>
• <div class ="geeks">
• A computer science portal for geeks
• </div></div> </body> </html>

14. • External CSS: External CSS contains separate CSS file which contains only style property with the help of tag
attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension
and should be linked to the HTML document using link tag. This means that for each element, style can be set
only once and that will be applied across web pages.
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}

15. • Below is the HTML file that is making use of the created external style sheet
• link tag is used to link the external style sheet with the html webpage.
• href attribute is used to specify the location of the external style sheet file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

17. • CSS text formatting properties is used to format text and style
text.
• CSS text formatting include following properties:
• 1.Text-color
• 2.Text-alignment
• 3.Text-decoration
• 4.Text-transformation
• 5.Text-indentation
• 6.Letter spacing
• 7.Line height
• 8.Text-direction
• 9.Text-shadow
• 10.Word spacing

18. <html>
<head><style>
h1
{
color:red;
text-align:center;
text-decoration:underline;
text-transform:lowercase;
text-indent:80px;
letter-spacing:4px;
line-height:40px;
direction: rtl;
text-shadow:3px 1px blue;
word-spacing:15px;
}
h2{color:green;}
</style>
</head>
<body>
<bdo dir="rtl">This is text formatting properties.</bdo>
<h1>DItms</h1>
<h2>TEXT FORMATTING</h2>
</body>
</html>

20. •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
• border-style
• border-color
• border-width
• border-radius

21. • 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.
• The border-style property specifies what kind of border to display.
• 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

23. • 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.
• You can individually change the width of the bottom, top, left, and right
borders of an element using the following properties −
• border-bottom-width changes the width of bottom border.
• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width of right border.
• border-width:thin/medium/thick

25. • The border-color Property
• The border-color property allows you to change the color of the border
surrounding an element. You can individually change the color of the bottom, left,
top and right sides of an element's border using the properties −
• border-bottom-color changes the color of bottom border.
• border-top-color changes the color of top border.
• border-left-color changes the color of left border.
• border-right-color changes the color of right border.
• Border-color

27. • 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.
• It is shorthand for border top-left-radius, border-top-right-radius,
border-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.

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

29. • <html> <head>
• <style>
• div {
• padding: 50px;
• margin: 20px;
• border: 6px ridge red;
• width: 50px;
• float: left;
• height: 50px;
• }
• p{
• font-size: 25px;
• }
• #one {
• border-radius: 90px;
• background: lightgreen;
• }
• #two {
• border-radius: 25% 10%;
• background: orange;
• }
• #three {
• border-radius: 35px 10em 10%;
• background: cyan;
• }
• #four {
• border-radius: 50px 50% 50cm 50em;
• background: lightblue;
• }
• </style>

31. •CSS Margin
• CSS Margin property is used to define the space around
elements. It is completely transparent and doesn't have any
background color. It clears an area around the element.
• Top, bottom, left and right margin can be changed
independently using separate properties. You can also
change all properties at once by using shorthand margin
property.

32. 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 Properties

33. 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.
CSS Margin Values
These are some possible values for margin property.

35. • Positioning use of classes in CSS
CSS helps you to position your HTML element. You can put any HTML element at whatever location you like.
You can specify whether you want the element positioned relative to its natural position in the page or
absolute based on its parent element.
static
relative
fixed
absolute
sticky
Relative Positioning
Relative positioning changes the position of the HTML element relative to where it normally appears. So
"left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an HTML element anywhere in
the HTML document.
Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

37. • Absolute Positioning
• An element with position: absolute is positioned at the specified
coordinates relative to your screen top-left corner.
• You can use two values top and left along with the position property to
move an HTML element anywhere in the HTML document.
• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

39. • Fixed Positioning
• Fixed positioning allows you to fix the position of an element to a particular
spot on the page, regardless of scrolling. Specified coordinates will be
relative to the browser window.
• You can use two values top and left along with the position property to
move an HTML element anywhere in the HTML document.
• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

41. • color properties
• 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.

42. • 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);

43. • 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);

44. • 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);

45. • 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.

46. • HSL
• It is a short form of Hue, Saturation, and Lightness. Let's understand them
individually.
• 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);

47. • 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);

48. • 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;

49. S.no. 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)

50. • <html>
• <head>
• <title>CSS hsl color property</title>
• <style>
• h1{
• text-align:center;
• }
• #rgb{
• color:rgb(255,0,0);
• }
• #rgba{
• color:rgba(255,0,0,0.5);
• }
• #hex{
• color:#EE82EE;
• }
• #short{
• color: #E8E;
• }
• #hsl{
• color:hsl(0,50%,50%);
• }
• #hsla{
• color:hsla(0,50%,50%,0.5);
• }
• #built{
• color:green;
• }
• </style>
• </head>

51. • Use Of Div & Span tag:
Both the tags (<div> and <span>) are used to represent the part of the
webpage, <div> tag is used a as block part of the webpage and <span>
tag is used as a inline part of the webpage like below:
<div>A Computer Science Portal <span>ditms</span></div>

52. • HTML <div> tag: The div tag is known as Division tag. The div tag is
used in HTML to make divisions of content on the web page like (text,
images, header, footer, navigation bar, etc). Div tag has both
opening(<div>) and closing (</div>) tags and it is mandatory to close
the tag. As we know Div tag is a block-level tag. In this example, the
div tag contains the entire width. It will be displayed div tag each time
on a new line, not on the same line.

53. • <!DOCTYPE html>
• <html>
•
• <head>
• <title>Div tag</title>
•
• <style>
• div {
• color: white;
• background-color: #009900;
• margin: 2px;
• font-size: 25px;
• }
• </style>
• </head>
•
• <body>
• <div> div tag </div>
• <div> div tag </div>
• <div> div tag </div>
• <div> div tag </div>
• </body>
•
• </html>
Output:

54. • HTML <span> tag: The HTML span element is a generic inline
container for inline elements and content. It used to group elements
for styling purposes (by using the class or id attributes). A better way
to use it when no other semantic element is available. The span tag is
very similar to the div tag, but div is a block-level tag and span is an
inline tag.

55. • <!DOCTYPE html>
• <html>
•
• <head>
• <title>span tag</title>
• </head>
•
• <body>
• <h2>Welcome To GFG</h2>
•
• <!-- Inside paragraph applying span tag
• with different style -->
• <p><span style="background-color:lightgreen">
• GeeksforGeeks</span> is A Computer Science Portal
• where you can<span style="color:blue;">
• Publish</span> your own <span
• style="background-color:lightblue;">articles</span>
• and share your knowledge with the world!!
• </p>
• </body>
•
• </html>
Output: