Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download Introduction to CSS
Transcript
Introduction
To CSS
History of CSS
► CSS
was proposed in 1994 as a web styling
language. To helps solve some of the
problems HTML 4.
► There were other styling languages
proposed at this time, such as Style Sheets
for HTML and JSSS but CSS won.
► CSS2 became the recommendation in 1998
by W3C
► CSS3 was started in 1998 but it has never
been completed. Some parts are still being
developed and some components work on
some browsers.
What is CSS?
• CSS stands for Cascading Style Sheets
• Styles - define how to display HTML elements
• Styles are normally stored in Style Sheets
Definition:
Cascading Style Sheets (CSS) – is a rule based language
that applies styling to your HTML elements. You write
CSS rules in elements, and modify properties of those
elements such as color, background color, width, border
thickness, font size, etc.
Examples of CSS
►
►
►
►
►
►
►
►
►
►
Example 1: http://www.csszengarden.com/
Example 2: http://w3schools.com/css/demo_default.htm
If you notice each time we click on a different CSS style sheet on the
two pages above the look and feel of each page changes dramatically
but the content stays the same.
HTML did not offer us this option.
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML
3.2 specification, it started a nightmare for web developers.
Development of large web sites, where fonts and color information
were added to every single page, became a long and expensive
process.
To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
HTML Formatting Review
► What
are the starting tags in HTML?
► What are the ending tags in HTML?
► How do you save in a Notepad document so it
becomes a web page?
► What is the tag for creating paragraphs in HTML?
► What is the tag for creating heading tags in
HTML?
► What are the tags we use to format font: family,
color, size, alignment in HTML?
Syntax oF CSS
The CSS syntax is made up of 5 parts:
selector
property/value
declaration
declaration block
curly braces
We will explore each part in the next slides.
Selector
Definition: identifies the HTML elements that
the rule will be applied to, identified by the
actual element name, e.g. <body>, or by other
means such as class attribute values.
Example:
*The selector is normally the HTML element you want to style
Property & Value
Definition: The property is the style attribute
you want to change. Each property has a value.
*Properties are separated from their respective values by colons :
*Pairs are separated from each other by semicolons ;
Declaration
Definition: Each CSS line that includes property
and value
*Each declaration consists of a property and a value.
Declaration Block
Definition: multiple declaration lines including the
curly braces
Curly Braces
Definition: the curly braces contain the
properties of the element you want to
manipulate, and the values that you want to
change them to. The curly braces plus their
content is called a declaration block.
Example:
Let’s Create Our First CSS Page
►
►
Open Notepad
Type the following Code
<html>
<head>
<style type="text/css">
p {color:red; text-align:center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
►
Save Your File as css-myfirstpage.html into a new folder called CSS
Class and id Selectors
In addition to setting a style for a HTML element, CSS allows
you to specify your own selectors called "id" and "class".
id - The id selector is used to specify a style for a single, unique
element.
The id selector uses the id attribute of the HTML element,
and is defined with a "#".
The style rule below will be applied to the element with
id="para1":
#para1 {text-align:center;color:red;}
Class and id Selectors
Class - The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is most
often used on several elements.
This allows you to set a particular style for any HTML
elements with the same class.
The class selector uses the HTML class attribute, and is
defined with a "."
In the example below, all HTML elements with class="center"
will be center-aligned:
.center {text-align:center;}
Class and id Selectors
In the image below what is the h1 selector an
ID or a Class?
#
.
Let’s Create A CSS Page that uses “id”
►
►
Open Notepad
Type the following Code
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
►
Save Your File as css-id.html into a your folder called CSS.
Let’s Create A CSS Page that uses “class”
►
►
Open Notepad
Type the following Code
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
►
Save Your File as css-class.html into a your folder called CSS.
Comments
►
Comments are used to explain your code, and may help you when you edit
the source code at a later date. Comments are ignored by browsers.
You add comments by enclosing them in
/* and */
►
►
Comments can span several lines, and the browser will ignore these lines.
►
Example:
/* This is a basic comment it will not appear on the page*/
/* starts the comment
*/ is the end of the comment
►
/*This is a comment*/
p{ text-align:center; color:black; font-family:arial;}
Let’s Add A Comment
►
►
Open Your CSS-ID example in Notepad
Type the following Code right above the style you had written previously.
<html>
<head>
/*This is an example of how to use ID in a CSS web page*/
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
►
Save Your File as css-comment.html into a your folder called CSS.
How CSS is Applied to A Web Page
► CSS
is applied to a web page using three
different methods:
Inline style
Internal style sheet
External style sheet
How CSS is Applied to A Web Page
► Inline
CSS
► Applies styles directly to the elements by
adding declarations into the style
► For Example:
<p style=“color: red;”> This is a simple
paragraph and the inline style makes it
red.</p>
How CSS is Applied to A Web Page
► Internal
Style Sheet
Applies styles to HTML by placing the CSS rules inside the tag
<style> inside the document tag <head>.
► For Example:
<head>
<title>my page</title>
<style type=“text/css”>
p{color:red}</style>
</head>
<body>
<p>this is a simple paragraph
</p>
</body>
►
How CSS is Applied to A Web Page
► External
CSS
Applies styles as a separate file with a .css extension. The file is
then referenced from inside the <head> element by a link to the
file.
► For Example:
<head>
<title>my external style sheet page</title>
<link rel=“style sheet” type=“text/css” href=“my-externalstylesheet.css”>
<body>
<p>this is a simple paragraph</p>
</body>
► You can create an external style sheet in your text editor.
►
How CSS is Applied to A Web Page
►
►
What style sheet is best?
Web developers rarely use inline CSS. Since they prefer
to not mix content with presentation. And it is not
efficient since you have to declare the style individually
for every component.
►
Internal and External style sheets are more popular
because you can style multiple elements with one rule.
►
External style sheets are best because they allow you to
save all the style information on a separate file from the
content. You can then modify a style for a site and it will
update all of the pages in a site.
CSS Background
CSS properties used for background effects
► background-color
► background-image
CSS Text
► background-repeat
► background-attachment
► background-position
CSS Text
h1 {
}
color: #00ff00;
text-align: right;
text-decoration: overline;
text-transform: uppercase;
text-indent: 50px;
CSS Text
color Sets the color of text
► direction Specifies the text direction/writing direction
► letter-spacing Increases or decreases the space between characters in
a text
► line-height Sets the line height
► text-align Specifies the horizontal alignment of text
► text-decoration Specifies the decoration added to text
► text-indent Specifies the indentation of the first line in a text-block
► text-shadow Specifies the shadow effect added to text
► text-transform Controls the capitalization of text
► unicode-bidi Used together with the direction property to set or return
whether the text should be overridden to support multiple languages
in the same document vertical-align Sets the vertical alignment of an
element white-space Specifies how white-space inside an element is
handled word-spacing Increases or decreases the space between
words in a text
►
CSS Font
► font
Sets all the font properties in one
declaration
► font-family Specifies the font family for text
► font-size Specifies the font size of text
► font-style Specifies the font style for text
► font-variant Specifies whether or not a text
should be displayed in a small-caps font
► font-weight Specifies the weight of a font
CSS Lists
► list-style
Sets all the properties for a list in
one declaration
► list-style-image Specifies an image as the
list-item marker
► list-style-position Specifies if the list-item
markers should appear inside or outside the
content flow
► list-style-type Specifies the type of list-item
marker
CSS list-style-type Property
disc
Default value. The marker is a filled
circle
armenian
The marker is traditional Armenian
numbering
circle
The marker is a circle
cjkideographic
The marker is plain ideographic
numbers
decimal
The marker is a number
decimalleadingzero
The marker is a number with
leading zeros (01, 02, 03, etc.)
georgian
The marker is traditional Georgian
numbering
CSS list-style-type Property
hebrew
The marker is traditional Hebrew numbering
hiragana
The marker is traditional Hiragana numbering
hiragana-iroha
The marker is traditional Hiragana iroha numbering
katakana
The marker is traditional Katakana numbering
katakana-iroha
The marker is traditional Katakana iroha numbering
lower-alpha
The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek
The marker is lower-greek
lower-latin
The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman
The marker is lower-roman (i, ii, iii, iv, v, etc.)
none
No marker is shown
square
The marker is a square
upper-alpha
The marker is upper-alpha (A, B, C, D, E, etc.)
CSS Border Properties
border
Sets all the border properties in one
declaration
border-bottom
Sets all the bottom border properties
in one declaration
border-bottom-color
Sets the color of the bottom border
border-bottom-style
Sets the style of the bottom border
border-bottom-width
Sets the width of the bottom border
border-color
Sets the color of the four borders
border-left
Sets all the left border properties in
one declaration
border-left-color
Sets the color of the left border
border-left-style
Sets the style of the left border
border-left-width
Sets the width of the left border
CSS Border Properties
border-right
Sets all the right border properties in
one declaration
border-right-color
Sets the color of the right border
border-right-style
Sets the style of the right border
border-right-width
Sets the width of the right border
border-style
Sets the style of the four borders
border-top
Sets all the top border properties in
one declaration
border-top-color
Sets the color of the top border
border-top-style
Sets the style of the top border
border-top-width
Sets the width of the top border
border-width
Sets the width of the four borders
CSS Border Style
none
Default value. Specifies no border
hidden
The same as "none", except in border conflict resolution for table elements
dotted
Specifies a dotted border
dashed
Specifies a dashed border
solid
Specifies a solid border
double
Specifies a double border
groove
Specifies a 3D grooved border. The effect depends on the border-color
value
ridge
Specifies a 3D ridged border. The effect depends on the border-color value
inset
Specifies a 3D inset border. The effect depends on the border-color value
outset
Specifies a 3D outset border. The effect depends on the border-color value
initial
Sets this property to its default value. Read about initial
inherit
Inherits this property from its parent element. Read about inherit
CSS Margin
The CSS margin properties define the space around
elements.
► Margin
A shorthand property for setting the
margin properties in one declaration
► margin-bottom Sets the bottom margin of an
element
► margin-left Sets the left margin of an element
► margin-right Sets the right margin of an element
► margin-top Sets the top margin of an element
CSS Padding
The CSS padding properties define the space between the
element border and the element content.
► padding-bottom
Sets the bottom padding of an
element
► padding-left Sets the left padding of an element
► padding-right Sets the right padding of an
element
► padding-top Sets the top padding of an element
CSS Layout – The position Property
► The
position property specifies the type of
positioning method used for an element
(static, relative, fixed or absolute).
