Scribd
Upload
28 views19 pages

Css Note

CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules consist of selectors and declarations, where selectors target HTML elements and declarations define styles. There are three main ways to add CSS - inline styles within HTML, internal style sheets within <style> tags, and external style sheets linked via <link> tags. CSS properties control various aspects of elements like fonts, text, background colors, margins and borders. Comments in CSS use /* */ syntax.

Uploaded by

Tsering Youdon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
28 views19 pages

Css Note

CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules consist of selectors and declarations, where selectors target HTML elements and declarations define styles. There are three main ways to add CSS - inline styles within HTML, internal style sheets within <style> tags, and external style sheets linked via <link> tags. CSS properties control various aspects of elements like fonts, text, background colors, margins and borders. Comments in CSS use /* */ syntax.

Uploaded by

Tsering Youdon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 19

1 CSS (Cascading Style sheet)

2
3
What is CSS?
4

 A Cascading Style Sheet is a file with a


list of formatting instructions.
 Add style to your HTML.

 Can completely control how your


webpages look without changing your
HTML.
 Extension is .css.
Benefits of CSS
5

 Pages download faster, sometimes by as much as


50%.
 Developers have to type less code, and the web
pages are shorter and neater.
 Easy maintenance − To make a global change,
simply change the style, and all elements in all the
web pages will be updated automatically.
How to write style rules
6
 Two parts: (1) selector and (2) declaration.
1. Selector: The HTML element you want to add style
to.
<p> <h1> <table> etc.
2. Declaration: The statement of style for that element.
Made up of property and value.
 Selector {declaration;}
 Declaration = {property: value;}
Basic CSS rule syntax
7

p {
font-family: sans-serif;
color: red;
} CSS
 A CSS file consists of one or more rules
 Each rule starts with a selector
Three ways of adding Style sheets to a web page

1. Inline styles:
 Styles are embedded right within the html code

they affect.
<p style="font-family: Lucida-Handwriting; color: red;">
This is a paragraph</p>

HTML

This is a paragraph

output
2. Internal style sheets: <style>
9

 Styles are placed within the header information of the web


page and then affect all corresponding tags on the page.

<head>
<style type="text/css">
p { font-family:sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
3. External/Attaching a CSS file <link>
10
 Styles are coded in a separate document, which is then
referenced/linked from within the header of the actual web
page.
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML

<link href="style.css" type="text/css" rel="stylesheet" />


<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
 A page can link to multiple style sheet files
 In case of a conflict (two sheets define a style for the same HTML
element), the latter sheet's properties will be used
1. CSS properties for colors
11

p {
color: red;
background-color: yellow;
}
CSS

<p> This paragraph uses the style above </p>


HTML

This paragraph uses the style above


output

PROPERTY DESCRIPTION
color color of the element's text
color that will appear behind the
background-color
element
Grouping styles
12

p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS

This paragraph uses the above style.


This h2 uses the above styles.
output

 A style can select multiple elements separated by commas


 The individual elements can also have their own styles
2. CSS properties for Background
13

Body 
{
Background-image
background-image: url (“tashi.jpg”);
}
CSS

PROPERTY DESCRIPTION
background-image To insert an image in a webpage
Background-color To apply background color to HTML element.
To repeat the background image, value can be as below
repeat-x (repeated horizontally)
Background-repeat repeat-y (repeated vertically)
repeat (repeated horizontally and vertically)
no-repeat (image is not repeated at all)
Background shorthand for all the background properties
{background-color background-image background-repeat;}
e.g. Body { background: green url(baby.jpg) no-repeat; }
3. CSS properties for fonts
14

PROPERT
DESCRIPTION
Y
font-family which font will be used
how large the letters will be drawn ( Specify in px(pixel),
font-size
pt(Point-size, %(percentage), em)
font-style used to enable/disable italic style. Value(normal/italic)
It specifies the boldness or heaviness for a font.
font-weight
Value (Normal /bold/bolder/lighter/100-900)
 h1 {
font-family: Algerian; Verdana; font-sze:20px; font-style: italic;
font- weight: bold;
 }
4.CSS properties for text
15

property description
alignment of text within its element.
text-align
VALUE (left/right/center/justify)
text-decoration to add effects to text. VALUE(underline/overline/line-through)

word-spacing,
gaps between the various portions of the text
letter-spacing
text-indent blank space before the first letter of each paragraph
control appearance of text in different cases.
Text-transform
VALUE(capitalize/uppercase/lowercase/none)

 P{ text-align: center;
text-decoration: overline;
text-transform: capitalize;
}
5. CSS properties for Margins and padding

16

 Margin (distance from each side to the


neighboring element)
Body { margin-top: 100px;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 70px
}
Padding
17

 Padding (defines the inner distance between the


border and the content of the element.)
h1 { padding-top: 20px;
Padding-right: 30px;
Padding-bottom: 30px;
Padding-left: 20px;
}
5. CSS properties for border

18

PROPERTY VALUE
Border-width thin/medium/thick e.g. h1 { border-width: thick ;}
Border-color Color name e.g. h3{border-color: green;}
Border-style dotted/ dashed /solid / double /groove/ ridge / inset / outset
e.g. h2{border-style: double;}

Difference between a static and dynamic website


Static website: Content of the website does not change, it
remain same for every viewer of the site.
Dynamic website: Information contains are changes
depending on the viewer of the site.
CSS comments /*…*/
19

/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

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

You might also like