Html 3

Styling HTML with CSS
1
Acknowledgements: www.w3schools.com
Computer Network & Web Tech (SET, JU)

What is CSS?
 CSS is a language that describes the style of an HTML document
 Describes how HTML elements should be displayed on screen
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
} 2

What is CSS?
 CSS stands for Cascading Style Sheets
 Saves a lot of work - can control the layout of multiple web
pages all at once
 Can be added to HTML in three ways:
 Inline  using style attribute in HTML elements
 Internal  using <style> element in <head> section
 External  Using an external stylesheet, stored in
external CSS file
3Computer Network & Web Tech (SET, JU)

Inline CSS
 Used to apply a unique style to a single html element using
‘style’ attribute of an HTML element
<h1 style=“color:blue;”> This is a Blue Heading </h1>
<table style="width:200 px" border>

Internal CSS
 Used to define style for a single HTML page
 Defined in the <head> section using <style> element
<head>
<style>
body { background-color: lightblue;}
h1 {color: white; text-align: center;}
p {color: red; font-family: verdana; font-size: 20px;}
</style>
</head>

External CSS
 Used to define style for many HTML pages
 With external CSS, one can change the look of an entire
website very quickly by changing a single file
 To use an external stylesheet, add a link to it in the header
page
<head>
<link rel=“stylesheet” type="text/css" href=“styles.css”>
</head>

External CSS (contd..)
 An external style-sheet can be written in any text editor , and
saved with a .CSS extension
 Must not contain any HTML code
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-size: 20px;
} 7Computer Network & Web Tech (SET, JU)

External Reference
(Absolute & Relative Path)
 External style sheets can be referenced with a full URL or with a path
relative to the current web page
A full URL to link to a style sheet:
<link rel="stylesheet" href="https://www.xyz.com/html/styles.css">
Link to a style sheet located in the html folder on the current web site:
<link rel="stylesheet" href="/html/styles.css">
Link to a style sheet located in the same folder as the current page:
link rel="stylesheet" href="styles.css">
Link to a style sheet located in a folder one level up from the current page:
<link rel="stylesheet" href=“../html/styles.css">

CSS Syntax

CSS Syntax
 A CSS rule-set consists of a selector and a declaration block
 Selector points to the HTML element to style
 Used to "find" (or select) HTML elements based on their element
name, id, class, attribute etc.
 Declaration block surrounded by curly braces
 Contains one or more declarations separated by semicolons
 Each declaration includes a CSS property name and a value,
separated by a colon

Element Selector
 Selector selects elements based on the element name
Eg. <h1> element in red color, and with centre-aligned text
<p> element in black color, and text using verdana font and size = 20px
h1 { color: red; text-align: center;}
p { color: black; font-family: verdana; font-size: 20px;}

Id Selector
 Uses the id attribute of an HTML element to select a specific element
 To define a specific style for one special element, add an id attribute
to the element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
#p01 {
color: blue;
}
 The id of an element should be unique within a page, so the id selector
is used to select one unique element
12

Class Selector
 Selects elements with a specific class attribute
 To define a style for a type of special elements, add a class attribute to
corresponding elements in the page
<p class=“center"> I am different</p>
 To select elements with a specific class for styling, write a period (.)
character, followed by the name of the class in the stylesheet
With above definition, all HTML elements with class="center" will be red and
center-aligned
.center {
text-align: center;
color: red;
}

Class Selector (contd..)
 One can specify that only specific HTML elements should be affected
by a class (element + class)
 Eg. only <p> elements with class="center" will be center-aligned
 HTML elements can also refer to more than one class
p.center {
text-align: center;
color: red;
}
<p class=“center large” >

Grouping Selector
 For elements with same definition, selectors can be grouped together
to minimize code – separated by commas
h1, h2, p {
text-align: center;
color: red;
}
h1 {
color: white;
text-align: center;}
h2 {
color: white;
text-align: center;}
p {
color: white;
text-align: center; }

Styling Text

CSS Color and Fonts
 CSS color property defines the text color to be used
 CSS font-family property defines the font to be used
 CSS font-size property defines the text size to be used
Example
<style>
h1 {
color: blue;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 16 px; text-align:center;
}
</style> 17Computer Network & Web Tech (SET, JU)

Background Color
 The background-color property defines the background color
for an HTML element
 This example sets the background color for a page to
powderblue
<html>
<body style="background-color:powderblue;">
<p style="color:black;"> This is a para </p>
</body>
</html>

HTML Colors

HTML Colors
 Specified by color name or value (RGB, HEX, HSL, RGBA, HSLA)
Specification by Color Names
Examples
Background Color
<body style="background-color:powderblue;">
Text Color
<h1 style="color:red;">This is a heading</h1>
Border Color
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

Color Value - RGB
 In HTML, a color can be specified as an RGB value, using this
formula:
rgb(red, green, blue)
 Each parameter (red, green, and blue) defines the intensity of the
color between 0 and 255
Examples
rgb (255,0,0)  red
rgb (0,255,0)  green
rgb(0,0,0)  black
rgb(255,255,255)  white
Shades of gray are often defined using equal values for all the 3 lightsources

Color Value - Hex
 Color value specified as a hexadecimal of the form #RRGGBB
 Each parameter (red, green, and blue) is defined as a hex value
representing its intensity between 00 and FF
Examples
#FF0000  red
#00FF00  green
#000000  black
#FFFFFF  white

Color Value - HSL
 In HTML, a color can be specified using hue, saturation, and lightness
(HSL) in the form
hsl(hue, saturation, lightness)
 Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is
green, and 240 is blue.
 Saturation is a % value, 0% means a complete shade of gray, 50% is
50% gray and 100% is the pure color, no shades of gray
 Lightness is also a percentage, 0% is black, 50% is neither light or
dark, 100% is white – how much light given to the color
 Shades of gray are often defined by setting the hue and saturation to
0, and adjust the lightness from 0% to 100% to get darker/lighter
shades
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

Color Value – RGBA & HSLA
 RGBA color values are an extension of RGB color values with an
alpha channel - which specifies the opacity for a color
rgba(red, green, blue, alpha)
 HSLA color values are an extension of HSL color values with an
alpha channel - which specifies the opacity for a color
hsla(hue, saturation, lightness, alpha)
 The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (not transparent at all)
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Border, Margins, Padding

Box Model: Border, Padding and Margin
 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent26Computer Network & Web Tech (SET, JU)

CSS Border, Padding and Margin
 CSS border property defines a border around an HTML element
p {
border: 1px solid powderblue;
}
 CSS padding property defines a padding (space) between the
text and the border
p {
padding: 30px;
}
 CSS margin property defines a margin (space) outside the
border
p {
margin: 50px;
} 27Computer Network & Web Tech (SET, JU)

Border
 If no border style defined, table displayed without borders
 Border can be defined for tables and also table cells and headers
 Border set using CSS border property
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
 CSS border property - border-collapse
 Border-style property specifies what kind of border to display – solid,
dotted, dashed, double, inset, outset
p.mix {border-style: dotted solid double;}

Cell Padding & Border Spacing
 Cell padding specifies the space between the cell content and its borders
 If padding not specified, table cells to be displayed without padding
 Padding set using CSS padding property
th, td {
padding: 15 px;
}
 Border spacing specifies the space between the cells
 Spacing specified using CSS border-spacing property
 No effect if border-collapse set
table {
border-spacing: 5 px;
}

Margin
 CSS margin properties are used to generate space around elements
 Set the size of the white space outside the border – top, bottom, left, right
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px; }
p {
margin: 100px 150px 100px 80px;
}
4 values  top, right, bottom, left
3 values  top, right and left, bottom
2 values  top & bottom, right and left

Margin - Inherit
 CSS margin properties can be inherited from parent element
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}

Html 3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Html 3

Ähnlich wie Html 3 (20)

Mehr von pavishkumarsingh

Mehr von pavishkumarsingh (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html 3