Scribd
Upload
3 views

HTML-CSS

CSS, or Cascading Style Sheets, is a language used to describe the presentation of web pages, including layout, colors, and fonts. It allows for easier maintenance, greater consistency, and faster download times, but can present challenges with browser compatibility. CSS can be applied in three ways: inline, internal, and external, and includes various properties for styling elements.

Uploaded by

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

HTML-CSS

CSS, or Cascading Style Sheets, is a language used to describe the presentation of web pages, including layout, colors, and fonts. It allows for easier maintenance, greater consistency, and faster download times, but can present challenges with browser compatibility. CSS can be applied in three ways: inline, internal, and external, and includes various properties for styling elements.

Uploaded by

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

css

What is CSS?
CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on


the webpages. It add styles to html.

The CSS coding language was invented by Norwegian


programmer Håkon Wium Lie in 1994 while working with
Tim Berners-Lee and Robert Caillau.

CSS saves a lot of work. It can control the layout of


multiple web pages all at once.
What is the need for CSS?
CSS is the language for describing the presentation of Web
pages, including colors, layout, and fonts.

 It allows one to adapt the presentation to different types of


devices, such as large screens, small screens, or printers.

CSS is independent of HTML and can be used with any XML-


based markup language.
What are the advantages of CSS?
Some of the advantages of using CSS are:

Easier to maintain and update.


Greater consistency in design.
More formatting options.
Lightweight code.
Faster download times.
Ease of presenting different styles to different viewers.
Greater accessibility.
What are the disadvantages of
CSS?
 CSS renders different dimensions with each browser.
Programmers are required to consider and test all code across
multiple browsers for compatibility before taking any website or
mobile application live.

There are different levels to CSS: CSS; CSS 2; CSS 3. This has
been confusing for developers and browsers. One language is
preferred.
Difference between HTML & CSS
SYNTAX OF CSS
CSS declarations rest within curly brackets, and each consist of two
parts: property and its value, separated by a colon.

Selector{property: value;}
SYNTAX OF CSS
You can define numerous properties in one
declaration, each separated by a semi-colon.
TYPES OF CSS

CSS can be added to HTML elements in 3 ways:

• Inline - by using the style attribute in HTML elements


• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file
TYPES OF CSS
INLINE CSS
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.

TYPES OF CSS
INTERNAL CSS
 An internal style sheet may be used if one single HTML page has a unique style.
 The internal style is defined inside the <style> element, inside the head section.
TYPES OF CSS
EXTERNAL CSS
 An external style sheet is used to define the style for many HTML pages.
 With an external style sheet, you can change the look of an entire web site, by
changing one file!
 To use an external style sheet, add a link to it in the section of the HTML page:
sample.html hello.css
TYPES OF CSS
EXTERNAL CSS
HTML <Link> element specifies relationship between the
current file and an external resource.
The “rel” component stands for relationship. It is the feature
of the <link> element.
The “href” component specifies the name of the CSS file being
linked.
TASK SHEET
Design a webpage with the following using all the 3
types of CSS.

Display your Name in Heading style 1,font type is


“Jokerman” ,font color is “red” and font size is 100
pixels.

Write a paragraph about CSS, font type is “forte” ,font


color is “blue” and font size is 50 pixels.
TASK SHEET ANSWERS
Inline CSS
<html>
<body>
<h1 style="color:red;font-size:100px;font-
family:Jokerman;">NISHA</h1>
<p style="color:blue;font-size:50px;font-family:Forte;">Cascading
Style Sheet</p>
</body>
</html>
Internal CSS
<html>
<head>
<style>
h1 {
color: red;
font-size:100px;
font-family:"Jokerman";
}
p {
color: blue;
font-size:50px;
font-family:"forte";
}
</style>
</head>
<body>
<h1>NISHA</h1>
<p>CASCADING STYLE SHEETS</p>
</body>
</html>
EXTERNAL CSS
Sample.html hello.css

<html> h1 {
<head> color: red;
<link rel="stylesheet" href="hello.css"> font-size:100px;
</head> font-family:"Jokerman";
<body> }
<h1>NISHA</h1>
p{
<p>CASCADING STYLE SHEET</p>
color: blue;
</body>
font-size:50px;
</html>
font-family:"forte";
}
FONT PROPERTIES
COLOR
BACKGROUND-COLOR
FONT-FAMILY
FONT-SIZE
FONT-STYLE (Normal, Italic, Oblique)

FONT-WEIGHT NOT IN SYLLABUS


FONT -VARIANT
BORDER PROPERTIES
 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
 Mix-Defines mixed border

 The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).
BORDER PROPERTIES
BORDER PROPERTIES
 border-style: dotted solid double dashed;  Border-color : red green yellow blue;
 top border is dotted
 top border is red
 right border is solid
 bottom border is double  right border is green
 left border is dashed  bottom border is yellow
 left border is blue
 border-style: dotted solid double;
 top border is dotted  Border-color : red green yellow;
 right and left borders are solid  top border is red
 bottom border is double
 right and left borders are green
 border-style: dotted solid;  bottom border is yellow
 top and bottom borders are dotted  Border-color : red green;
 right and left borders are solid
 top and bottom borders are red
 border-style: dotted;  right and left borders are green
 all four borders are dotted  Border-color : red;
 all four borders are red
Border: green 20px dotted;
HEIGHT & WIDTH PROPERTIES
 The height property sets the height of an element.
 If height: auto; the element will automatically adjust its height to allow its
content to be displayed correctly.
 If height is set to a numeric value (like pixels, percentages) then if the content
does not fit within the specified height, it will overflow.
 height: auto;
 height: 100px;
 height: 50%;
 The width property sets the width of an element.
 width: auto;
 width: 100px;
 width: 50%;
OUTLINE PROPERTIES
CSS has the following outline properties:
outline-style
outline-color
outline-width
outline-offset
outline
OUTLINE PROPERTIES
 CSS Outline Style
 The outline-style property specifies the style of the outline, and can have one of the
following values:
 dotted - Defines a dotted outline
 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
 hidden - Defines a hidden outline
OUTLINE PROPERTIES
outline-color:red;
outline-style:dotted;
outline-width:20px;
outline-offset:15px; (space between border and
outline)
outline: red dotted 20px 15px;
Align & Float PROPERTIES
The text-align property specifies the horizontal
alignment of text in an element.

The float property specifies how an element should


float.
MARGIN PROPERTY
Background Properties
CSS background property (w3schools.com)

<html>


<style>
Body
{
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
(Image will be added to the webpage)
background-color: red; (background color of the webpage will be changed to red)
background-attachment: fixed;(Image will be fixed even if you scroll up and down)
background-repeat: no-repeat; (background image will not be repeated)
}
</style>
<body>
<h2>Background-image property example</h2>
<p>Hello World!</p>
</body>
</html>

You might also like