Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
150 views

HTML Styles - CSS: Ms. Kristeen P. Ong

CSS (Cascading Style Sheets) is used to style and lay out HTML documents. There are three ways to add CSS - inline using the style attribute, internally using the <style> tag, and externally using a <link> tag to a .css file. CSS controls things like text colors, fonts, sizes, borders, padding, and margins to control the appearance and layout of HTML elements. CSS selectors like id and class are used to target specific elements for styling.

Uploaded by

Kristopher Ong
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
150 views

HTML Styles - CSS: Ms. Kristeen P. Ong

CSS (Cascading Style Sheets) is used to style and lay out HTML documents. There are three ways to add CSS - inline using the style attribute, internally using the <style> tag, and externally using a <link> tag to a .css file. CSS controls things like text colors, fonts, sizes, borders, padding, and margins to control the appearance and layout of HTML elements. CSS selectors like id and class are used to target specific elements for styling.

Uploaded by

Kristopher Ong
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

HTML STYLES - CSS

MS. KRISTEEN P. ONG


STYLING HTML WITH CSS
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
• CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file

• The most common way to add CSS, is to keep the styles in separate CSS files.
However, here we will use inline and internal styling
INLINE CSS
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• This example sets the text color of the <h1> element to blue:

<h1 style="color:blue;">This is a Blue Heading</h1>


INTERNAL CSS
•An internal CSS is used to define a style for a
single HTML page.
•An internal CSS is defined in the <head>
section of an HTML page, within a <style>
element
INTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
EXTERNAL CSS
• An external style sheet is used to define the style for
many HTML pages.
• With an external style sheet, you can change the look
of an entire web site, by changing one file!
• To use an external style sheet, add a link to it in the
<head> section of the HTML page
EXTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
EXTERNAL CSS
• An external style sheet can be written in any text editor. The
file must not contain any HTML code, and must be saved with
a .css extension.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS FONTS
• The CSS color property defines the text color to be
used.
• The CSS font-family property defines the font to be
used.
• The CSS font-size property defines the text size to be
used.
CSS FONTS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
CSS FONTS
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS BORDER
• The CSS border defines a border around an HTML
element:

p{
border: 1px solid powderblue;
}
CSS PADDING
• The CSS padding defines a padding(space) between
a text and a border:

p{
border: 1px solid powderblue;
padding: 30px;
}
CSS MARGIN
• The CSS margin defines a space outside the border:
p{
border: 1px solid powderblue;
padding: 30px;
margin: 50px;
}
THE ID ATTRIBUTE
define a specific style for one special
element, add an id attribute to the
element:

<p id="p01">I am different</p>


THE ID ATTRIBUTE
The id of an element should be
unique within a page, so the id
selector is used to select one unique
element!
THE ID ATTRIBUTE
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
THE CLASS ATTRIBUTE
To define a style for special types of
elements, add a class attribute to the
element:

<p class="error">I am different</p>


EXTERNAL REFERENCES
External style sheets can be referenced
with a full URL or with a path relative
to the current web page.

<link rel="stylesheet"
href="https://www.w3schools.com/html
/styles.css">
EXTERNAL REFERENCES
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://www.w3schools.com/html/styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CHAPTER SUMMARY
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link>
elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the borer

You might also like