Css basic

CSS for Styling HTML
Contents
CS380
1

Cascading Style Sheets (CSS)
 CSS use to describes the appearance, layout,
and presentation of information on a web page
 CSS Advantages:
2
•Separates structure from presentation
•Provides advanced control of presentation
•Easy maintenance of multiple pages
•Faster page loading
•Better accessibility for disabled users
•Easy to learn

Basic CSS rule syntax
 A CSS file consists of one or more rules
 Each rule starts with a selector
 A selector specifies an HTML element(s) and then
applies style properties to them
3
SYNTAX to Write CSS=
selector {
property: value;
...
property: value;
} CSS
Example===
p {
font-family: sans-serif;
color: red;
}

Types of CSS or
Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the
<head> section of the HTML page. There are 3 ways to attach
CSS to a page:
1. External Style Sheet: Best used to control styling on multiple
pages.
<link rel="stylesheet" type="text/css"
media="all" href="css/styles.css" />
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is
used directly within HTML tags.
<p style=“color: red”>Some Text</p>

Types of CSS- External CSS
 A page can link to multiple style sheet file.
 It uses Two fils-1 .CSS and 2. .HTML
5
P{color:red;} style.CSS
<head>
<link href="style.css" rel="stylesheet" /></head>
<body><p>This is External CSS</p>
.HTML
CS380

Internal CSS:
 It apply on Single Page.
 It uses <style> Tag in <head> and </head>.
6
<head>
<style>
p { font-family: arial;
color: red; }
h2 { background-color: yellow; }
</style>
</head> <body><h1>Internal CSS</h1>
<p>This is Internal CSS</p></body>
HTML
CS380

Inline styles: the style attribute
 It apply on single line of HTML code.
 It uses style as attribute.
 Higher precedence than internal or external CSS styles
7
<p style="font-family: chiller; color: red;">
This is a paragraph</p>
HTML
CS380

CSS properties for colors
8
p {
color: red;
background-color: yellow;
}
CSS
CS380
This paragraph uses the style above output
property description
color color of the element's text
background-color
color that will appear behind the
element

CSS comments /*…*/
9
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
 CSS (like HTML) is usually not commented as rigorously
as programming languages such as Java
 The // single-line comment style is NOT supported in
CSS
 The  HTML comment style is also NOT
supported in CSS
CS380

CSS properties for fonts
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
CS380
10
<html>
<head><style>
p {
font-family :chiller;
font-size :20px;
font-style :italic;
font-weight :bold
} </style></head><body>
<p> This text formatted with font properties</p></body></html
Example:

CSS properties for text
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
word-spacing,
letter-spacing
gaps between the various portions
of the text
text-indent
indents the first letter of each
paragraph
CS380
11

Example
CS380
12
<html>
<head><style>
p {
line-height:12px;
Text-align: center;
Text-decoration:Overline;
Text-transform: uppercase;
word-spacing:20px;
letter-spacing:30px;
<p> This text formatted with text properties</p></body></html
Example:

CSS properties for backgrounds
background-color color to fill background
background-image image to place in background
background-position
placement of bg image within
element
background-repeat
whether/how bg image should be
repeated
CS380
13

Example:
CS380
14
<html>
<head><style>
body{
background-color:red;
Background-image:url(image1.jpg);
background-position:right;
Background-repeat:no-repeat;
Background-size: 200px 300px;
<p> This page formatted with background
properties</p></body></html

CSS Box Model Properties:
CS380
15
height To Change height of Section.
width To Change width of Section.
margin
Use to define margin space along
with four side
Padding
Use to define space along with
four side between border and
content.
Border
Use to define border around
content

Example:
CS380
16
<html>
<head><style>
div{
Hight:300px;
Width:300px;
Border: solid 20px red;
Margin-left:50px;
Padding:30px; //apply to for side
<div>
<p> This section formatted with box model
properties</p></div></body></html

Css basic

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Css basic

Similar to Css basic (20)

Recently uploaded

Recently uploaded (20)

Css basic

Editor's Notes