Scribd
Upload
24 views

Lecture 12 - CSS

CSS (Cascading Style Sheets) allows defining how HTML elements are presented. CSS rules contain selectors that specify elements to style and declarations that set properties and values. Styles can be defined inline, internally in <style> tags, or externally in .css files. Common CSS properties include color, font-size, width, height, margin and padding.

Uploaded by

George Miguel Valenzuela Obusán (Youngblood)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views

Lecture 12 - CSS

CSS (Cascading Style Sheets) allows defining how HTML elements are presented. CSS rules contain selectors that specify elements to style and declarations that set properties and values. Styles can be defined inline, internally in <style> tags, or externally in .css files. Common CSS properties include color, font-size, width, height, margin and padding.

Uploaded by

George Miguel Valenzuela Obusán (Youngblood)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

CSS

(Cascading Styling Sheet)


INTRODUCTION

CSS, or Cascading Styles Sheets, define how to


display HTML. Where as the HTML defines the
content of a document, the style sheet defines the
presentation of that content. CSS was added to
HTML 4.0 and provided a way to separate the
content from the presentation.
CSS SYNTAX
Rules in CSS are made up of two parts, a selector, and one or more
declarations. The following diagram illustrates this syntax:
Property Value Property Value Property Value

H1 { Background:#000000; Font-size:20px; Color:blue; }

Selector Declaration Declaration Declaration


The selector is the HTML element to be styled.

Each declaration is made up of a property and a value. The property is the style


attribute to be changed. The value is what the attribute will be set to. A colon (:) is used to
separate the property and its value.
As illustrated in the diagram, declarations end with the semi-colon (;) and are surrounded
by curly brackets ({ and }).
CSS Selectors
Styles can be applied to specific HTML elements by specifying
the HTML element, then enclosing the styles within curly
brackets. The following example shows a style being applied to
the p element.

p { color:blue; }

In this case, all paragraph elements in the document would have


a text color of blue.

There are many different types of selectors that allow great


flexibility in applying styles to elements.
CSS Class & ID Selectors
In addition to using the HTML element selectors, custom selectors can
also be defined in the form of Class and ID selectors. This allows having the
same HTML element, but styled differently depending on its class or ID. An ID
selector can be used to identify one element, whereas a class selector can be
used to identify more than one element.
In CSS, a class selector is a name preceded by a period (.) and an ID
selector is a name preceded by a pound sign (#).
CSS Comments
In CSS, a comment starts with /* and ends with */. Comments can
span multiple lines, but may not be nested.
The following example shows a single-line and a multi-line comment.

CSS How to Use


There are three basic ways to apply CSS styles to an
HTML document. They are:

 Inline
 Internal
 External
Inline
Inline styles are applied directly to the HTML by using
the style attribute.
The following style sets the text color of the text in this
paragraph to ’blue’.

Use Inline styles sparingly and only when a single


element has a unique style to be applied.
Internal
Internal styles are specified within the <head></head> tags of an
HTML document and apply to the whole document. The following
example would set the text color to blue for all paragraphs in the
document.
The Following is the result of the above
example:

*Use Internal styles when a single


page has a unique style to be applied.
External
External styles are specified in a separate CSS file and
’included’ into HTML documents in which they are to apply.

The following code shows the contents of an example style


sheet, the file URL is: files/css/mystyles.css:
The following HTML code shows how to include the external
style sheet named styles.css into an HTML document. Notice that
the tag is specified within the <head></head> tags.

The Following is the result of the above example:

External style sheets are recommended when the styles are to be applied across
multiple HTML documents. This allows for consistency throughout an entire web site and
any style changes automatically apply to all files that include the style sheet.

*<link href=“main.css" rel="stylesheet" type="text/css" />


CSS Layout and Style
Margin
The margin shorthand property sets all of the margin properties
in one declaration. This property can accept from one to four values.

If all four values are provided, the margins are as specified.

If three values are provided, right and left margin are set as middle value.

If two values are provided, top and bottom margin are set as the first
value, right and left margin are set as second value.

If one value is provided, all four margin values are set the same.
margin-left

The margin-left property sets the left margin of


an element.
CSS Padding

The padding shorthand property sets all of the padding


properties in one declaration. This property can accept from one to
four values.
Example Would Display
padding-top
The padding-top property sets the top padding (space) of an
element.

padding-right
The padding-right property sets the right padding (space) of an
element.

padding-bottom
The padding-bottom property sets the bottom padding (space)
of an element.

padding-left
The padding-left property sets the left padding (space) of an
element.
CSS Height
The height property sets the height of an element. This does
not include padding, borders, or margins.

Example
Would Display
max-height
The max-height property sets the maximum height of an
element. This does not include padding, borders, or margins.

Example Would Display


<html>
<head>
<style>
p{
max-height:100px;
background:yellow;
}
</style>
</head>

<body>

<p>The<br />
maximum<br />
height<br />
of<br />
this<br />
paragraph<br />
is<br />
set<br />
to<br />
50px.</p>

</body>
</html>
min-height
The min-height property sets the minimum height of an element. This does not
include padding, borders, or margins.

Example Would Display

<html>
<head>
<style>
p{
min-height:150px;
background:yellow;
}
</style>
</head>

<body>

<p>The minimum height of this paragraph is


set to 150px.</p>

</body>
</html>
CSS Width
width
The width property sets the width of an element, but does not
include the padding, borders, or margins.

Example Would Display


<html>
<head>
<style>
p{
height:100px;
width:100px;
background:yellow;
}
</style>
</head>
<body>
<p>This paragraph have 100px of height, and
100px of width</p>
</body>
</html>
min-width
The min-width property sets the minimum width of an
element. This does not include padding, borders, or margins.

Example Would Display

<html>
<head>
<title>CSS Tutorial</title>
<style>
p{
min-width:350px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The minimum width of this paragraph is set to 350px.</p>
</body>
</html>
max-width
The max-width property sets the maximum width of an element. This does not
include padding, borders, or margins.
Example Would Display
<html>
<head>
<title>CSS Tutorial</title>
<style>
p{
max-width:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The maximum width of this
paragraph is set to 100px.</p>
</body>
</html>

You might also like