Scribd
Upload
0 views

Chapter04 CSS

CSS, or Cascading Style Sheets, is a styling language used to define the visual presentation of HTML webpages, allowing for separation of content and design. It includes various methods for applying styles, such as inline, internal, and external styles, and supports features like selectors, classes, and box properties. CSS enhances web design by enabling faster downloads, easier maintenance, and responsive layouts across different devices.

Uploaded by

abadhan_sabyasachi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0 views

Chapter04 CSS

CSS, or Cascading Style Sheets, is a styling language used to define the visual presentation of HTML webpages, allowing for separation of content and design. It includes various methods for applying styles, such as inline, internal, and external styles, and supports features like selectors, classes, and box properties. CSS enhances web design by enabling faster downloads, easier maintenance, and responsive layouts across different devices.

Uploaded by

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

Cascading Style Sheets

What is CSS ?
• CSS stands for “Cascading Style Sheets”.

• Cascading: refers to the procedure that determines which style will apply
to a certain section, if you have more than one style rule.

• Style: how you want a certain section of your page to look. You can set the
HTML webpage with color, font, layout, margin, etc for things like tables,
paragraphs, and headings.

• Sheets: the “sheets” are like templates, or a set of rules, for determining
how the webpage will look.

• So, CSS (all together) is a styling language – a set of rules to tell browsers
how HTML webpage should look like. look.
Why do we need 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.

• It allows you to separate visual design elements (layout, fonts,


colors, margins, and so on) from the contents of a Web page.

• Allows for faster downloads, streamlined site maintenance,


and global control of design attributes across multiple pages.
What is style ?
• <style> is a command(tag) that you set to tell the browser how a
certain section of your webpage should look.

• Style rule has two parts: (1) selector and (2) declaration.

Selector {
declaration; Example : h1 // Selector (HTML tags)
} {
color: red; // Declaration
text-align : center;
}
Declaration = {property: value;}

Property: what aspect you want to change


ex: color, font, margins, etc.
Value: the exact setting for that aspect.
ex: red, italic, 40px, etc.
Types of writing Style Sheets

• There are three types of style-rule-places that we will cover:

- Inlined Style Sheet


- Internal Style Sheet
- External or Linked Style Sheet
a) Inlined example

<body>
<p style=“text-align: center; font-weight: bold; color: yellow;” > What was I thinking? </p>
<h1 style=“color:red;font-size:50px;”> The heading-1 style is formatted using CSS </h1>

</body>
What was I thinking?
The heading-1 style is formatted using CSS
Note :
• Placed inside the HTML tags.
• Specific to a single instance of an html tag on a page.
2. Internal Style Sheet
• Applicable to an entire HTML document.
• Styles are defined within the <style> </style> tag,
which is placed in the header of the html file
(i.e., within <head> and </head>).
<html>
<head>
<title>Title</title>
<style type="text/css">
<!--[STYLE INFORMATION GOES
HERE] -->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html> 7
Internal Style Sheet Example
<html>
<head>
<title>My Wonderful Example</title>
<style type=“text/css”>
body {
text-align: left;
font-family: verdana;
}
</style>
</head>
<body>
………………..
</body>
</html>
3. External (Linked) Styles
• External style sheet
• Styles are saved in a separate file, with the extension .css
• This single stylesheet can be used to define the look of multiple
pages.
In TextPad,Notepad, etc.… Save this text
file as
p {font-family: verdana, sans-serif; filename.css
font-size: 12pt; color: red}

h1 {font-family: serif; font-size:


14pt; color: green}

h2 {font-family: serif; font-size:


11pt; color: blue}

9
Linked (External)
• To apply the stylesheet “filename.css“ to an HTML
document, call it in from the header:
<html>
<head>
<link rel="stylesheet" href=“filename.css"
type="text/css">
</head>
<body>
…………………………
</body>
</html>

10
Inheritance / Cascading Precedence: which
style prevails when several are present?

• Inline CSS (local) overrides internal CSS (global).


• Internal CSS (global) overrides external CSS (linked).

• An inline style (inside an HTML element) has the highest


priority, which means that it will override every style
declared inside the <head> tag (internal) or an external
style sheet.

11
Grouping selectors
• Separate selectors with a comma
– Example:
h1,h2,h3,h5,h6 { color: green }
(each header will be green)
• Separate selectors with a space
– Example:
p li { color: red }
(only items within a list and a paragraph tag will be red)

12
The class Selector
• With a class selector you can define different styles for the same
type of HTML element
• Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-aligned, italic, and red.
</p>
<p class=“blue"> This paragraph will be center-aligned and blue. </p>

13
The class Selector
• You can also omit the tag name in the selector to define a
style that will be used by all HTML elements that have this
class.

• Example:
.poem {text-align: center; font-style:italic}

Any HTML element with class=“poem" will be center-


aligned and italic.

14
The class Selector
• Example (continued)
Both elements below will follow the rules in the
".poem“ class:

<h1 class=“poem"> This heading will be center-


aligned and italic </h1>

<p class=“poem"> This paragraph will also be


center-aligned and italic. </p>

15
Class Example
<style>
p {font-family: sans-serif; font-size: 10pt; background-color:green}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}

.boldred {color: red; font-weight: bold; font-size : 20pt}


.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>

The tags and classes can then be used in combination:

<h1 class=“boldred">This is rendered as 20-point red serif bold text.</h1>


<p class=“boldred">This is rendered as 20-point red sans-serif bold
text.</p>

16
Applying styles to portions of a
document:
• <span>
– “Wraps” a portion of text into a unit, but doesn't
cause a line break. Allows styles to be applied to an
'elemental' region (such as a portion of a
paragraph).
Example :
• <div>
– A division tag: to “package” a block of document
into one unit. It defines a block element.
– Causes a line break, like <br> and <p>.
– Example : 17
Font formatting properties
• Font-Properties : Values
– font-family : Arial, Times, Courier
– font-style : normal, italic
– font-variant : normal, small-caps
– Font-weight : normal, bold
– font-size : xx-small, x-small, small, medium, large
– Line-height : numerical values (gap between two lines)
More about font-family

•We can specify multiple fonts from highest to lowest priority


•Generic font names:
•serif, sans-serif, cursive, fantasy, monospace
•If the first font is not found on the user's computer, the
next is tried
•Placing a generic font name at the end of your font-family
value, ensures that every computer will use a valid font
p {
font-family: Garamond, "Times New Roman",
serif;
This paragraph uses the above style.
} CSS
19
Colour and Background properties
• Property : Value
– color : colorname or hexadecimal number
– background-color : colorname or hexadecimal
– background-image : URL
– Example : background-image:url("index.png");
– background-repeat : The background-repeat property
determines how a specified background image is repeated.
The repeat-x value will repeat the image horizontally
while the repeat-y value will repeat the image vertically.
– background-repeat : repeat-x, repeat-y, no-repeat, repeat
Colour and Background properties
• background-attachment : The background-attachment property
determines if a specified background image will scroll with the
content or be fixed with regard to the canvas. For example, the
following specifies a fixed background image:
• Example :
• body{ background-image: url(“candybar.gif”);
• background-attachment: fixed }
• background-attachment : fixed, scroll
• background-position :
– Horizontal keywords (left, center, right)
– Vertical keywords (top, center, bottom)
Text formatting properties
• Property : Value
– word-spacing : The word-spacing property defines an additional
amount of space between words. The value must be in the
length format; negative values are permitted.
– word-spacing : 0.4cm|mm|in
– letter-spacing : The letter-spacing property defines an additional
amount of space between characters. The value must be in the
length format; negative values are permitted. A setting of 0 will
prevent justification.
– Letter-spacing : 0.4cm|mm|in
– text-decoration : none, underline, overline, line-through
Text formatting properties
• text-transform : capitalize, uppercase, lowercase,
none
• text-align : left, right, center, justify

• text-indent : The text-indent property can be applied to block-


level elements (P, H1, etc.) to define the amount of indentation that
the first line of the element should receive.

• text-indent : <length> or <percentage>

• Example : P { text-indent: 5cm }


Box Properties
• All HTML elements can be considered as boxes.
• In CSS, the "box model" is design and layout: margins, borders, padding,
content.
• margin-top : numerical value
• Initial value : 0
• margin-right : numerical value
• Initial value : 0
• margin-bottom : numerical value
• Initial value : 0
• margin-left : numerical value
• Initial value : 0
• margin : All margins
Box Properties
• Padding-top : The padding-top property describes how
much space to put between the top border and the content
of the selector.
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-top: 100px;
}
</style>
</head>
<body>
<h1>The padding-top Property</h1>
<p class="ex1">A paragraph with a 25 pixels top padding.</p>
</body>
</html>
Box Properties
• padding-bottom : The padding-top property describes how much
space to put between the bottom border and the content of the
selector.

• padding-left : The padding-top property describes how much space


to put between the left border and the content of the selector.

• padding-right : The padding-top property describes how much space


to put between the right border and the content of the selector.

• padding : The padding property describes how much space to put


between the all the borders to the content of the selector.
Box properties
• border-color : The border-color property sets the color of
an element's border.
– Border-color : colorname or hexadecimal number.
• border-style : The border-style property sets the style
of an element's border.
– border-style : none | dotted | dashed | solid | double |
groove | ridge | inset | outset.
• border-top-style : value
• border-bottom-style : value
Border Styles

p.dotted {border-style: dotted;}


p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed
solid double;}
Border Width and color
Border - Shorthand Property

•To shorten the code, it is also possible to specify all the


individual border properties in one property.
•The border property is a shorthand property for the following
individual border properties:
•border-width
•border-style (required)
•border-color
Left, right and round borders
In a box:
• Margins are always transparent.
• Borders come in various styles.
• Background settings:
– the area just inside the borders
– includes both the padding and content areas.

32
Examples
img { border-style: ridge;
border-width: 20px;
border-color:red green
blue purple}

h1 {background-color:
#CC66FF;
width: 50%; H1,50% ,purple
padding: 20px} background 33
CSS comments /*…*/

The // single-line comment style is NOT supported in CSS


<!-- ... --> HTML comment style is also NOT supported in
CSS

/* This is a comment.
It can span many lines in the CSS file. */

p {
color: red; background-color: aqua;
}
CSS
34

You might also like