(Section 1 Section 2 Section 3 Section 4 Section 5 Session 8 Session 9)
Styles
What are styles in HTML?
The HTML style
attribute is used to add styles to an element, such as color, font, size,
and more.
What is the style element in XHTML?
The style
element allows an author to put style sheet rules in the head of the
document. XHTML permits any number of style elements in the head section of a
document. The syntax of style data depends on the style sheet language. Rules
for style rule precedence and inheritance depend on the style sheet language.
HTML Styles - CSS
XHTML primarily
utilizes Cascading Style Sheets (CSS)
for styling, offering flexible and powerful methods to control the
presentation of documents.
CSS is used to style HTML.
It determines how the HTML elements appear on the screen, paper, or
in other media. CSS saves a lot of work. It can
control the layout of several pages all at once.
You can add CSS to HTML elements in 3 ways:
·
Inline, where
the style attributes is used in HTML elements.
·
Internal, where the <style> element
is used in the <head> section.
·
External, where an external CSS file
is used.
Three main approaches exist for applying styles in
XHTML:
Inline Styles: An inline CSS is used to apply a unique style to
a single HTML element. Styles are applied directly to individual
XHTML elements using the style attribute.
While convenient for
quick, localized styling, this method is generally discouraged for larger
projects as it mixes content and presentation, making maintenance more complex.
Example
<p
style="color:red;">The paragraph is red.</p>
<p
style="color:red; font-weight:bold;">This text is red and
bold.</p>
Embedded (Internal) Style Sheets: An internal
CSS is used to define a style for a single HTML page. Styles are defined directly within the XHTML document, inside
a <style> element placed within
the <head> section. This is suitable for styles specific
to a single document.
Example
1 <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>
2 <head>
<style
type="text/css">
p {
color: blue;
font-size: 14px;
}
</style>
</head>
External Style Sheets: This is
the recommended and most common method. Styles are defined in a separate.
css file and linked to the XHTML document using
the <link> element within the <head> section. This approach promotes
separation of concerns, reusability across multiple pages, and easier maintenance.
The
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.
Example
1<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
2 <head>
<link
rel="stylesheet" type="text/css"
href="styles.css" />
</head>
Here is
what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS color property
describes the color of the text content.
The CSS
font-family property defines the font of the text content.
The CSS
font-size property defines the text size.
No comments:
Post a Comment