Styling HTML with CSS
Internal Styling (Internal CSS)
External Styling (External CSS)
CSS Fonts
The CSS Box Model
The id Attribute.
The class Attribute
Chapter Summary
CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files
Inline Styling (Inline CSS)Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files
Inline styling is used to apply a unique style to a single HTML element:
Inline styling uses the style attribute.
This example changes the text color of the <h1> element to blue:
Inline styling uses the style attribute.
This example changes the text color of the <h1> element to blue:
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal styling is used to define a style for one HTML page.
Internal styling is defined in the <head> section of an HTML page, within a <style> element:
Internal styling is defined in the <head> section of an HTML page, within a <style> element:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet is used to define the style for many 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:
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:
<!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>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.
Here is how the "styles.css" looks:
Here is how the "styles.css" looks:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}
The CSS color property defines the text color to be used for the HTML element.
The CSS font-family property defines the font to be used for the HTML element.
The CSS font-size property defines the text size to be used for the HTML element.
The CSS font-family property defines the font to be used for the HTML element.
The CSS font-size property defines the text size to be used for the HTML element.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Every HTML element has a box around it, even if you cannot see it.
The CSS border property defines a visible border around an HTML element:
The CSS border property defines a visible border around an HTML element:
p {
border: 1px solid black;
}
border: 1px solid black;
}
The CSS padding property defines a padding (space) inside the border:
p {
border: 1px solid black;
padding: 10px;
}
border: 1px solid black;
padding: 10px;
}
The CSS margin property defines a margin (space) outside the border:
p {
border: 1px solid black;
padding: 10px;
margin: 30px;
}
border: 1px solid black;
padding: 10px;
margin: 30px;
}
All the examples above use CSS to style HTML elements in a general way.
To define a special style for one special element, first add an id attribute to the element:
To define a special style for one special element, first add an id attribute to the element:
<p id="p01">I am different</p>
then define a different style for the (identified) element:
p#p01 {
color: blue;
}
color: blue;
}
To define a style for a special type (class) of elements, add a class attribute to the element:
<p class="error">I am different</p>
Now you can define a different style for all elements with the specified class:
p.error {
color: red;
}
color: red;
}
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 visible element borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
HTML Style TagsUse 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 visible element borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource
<link> Defines a link between a document and an external resource
Posts
0 comments:
Post a Comment