HTML) Exploring Font Styles and Effects in CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font style</title>
</head>
<style>
*{font-size: 1em;}
#id1, #id2, #id3, #id4, #id5{
font-size: 16px;
border: dotted silver;
}
#id1{
font-family:arial;
font-size:small;
text-decoration: overline;
}
#id2{
font-family: "돋움";
font-size: large;
text-align: center;
text-decoration:line-through;
}
#id3{
font-size:200%;
font-style:oblique;
text-align:right;
text-decoration: underline;
}
#id4{
font-family: "times new roman";
font-size:2em;
font-weight: bold;
}
#id5{
font-family: "없는 글씨체",serif;
font-size:100%;
font-weight:lighter;
}
#id6{
vertical-align:top;
letter-spacing: -2pt;
word-spacing: 3pt;
}
#id7{
text-align: justify;
letter-spacing: 4pt;
word-spacing: 6pt;
line-height: 200%;
}
#id8{
vertical-align: top;
letter-spacing:-4pt;
word-spacing:3pt;
line-height: 16px;
}
#id9{
vertical-align: text-bottom;
letter-spacing: -4pt;
word-spacing: 3pt;
line-height: 300%;
}
h1{
font-size:32px;
text-shadow: 2px 6px 7px red;
}
h2{
font-size:2em;
background-color: #800080;
color:black;
display:inline;
text-shadow: 2px 2px 10px white, 2px -2px 10px silver, -2px 2px 10px silver, -2px -2px 10px silver;
}
</style>
<body>
<p id="id1">style 1</p>
<p id="id2">style 2</p>
<p id="id3">style 3</p>
<p id="id4">style 4</p>
<p id="id5">style 5</p>
<table border="1">
<tr>
<td><p id="id6">style 6 style style style style style style</p></td>
<td><p id="id7">style 7 style style style style style style</p></td>
</tr>
<tr>
<td><p id="id8">style 8 style style style style style style</p></td>
<td><p id="id9">style 9 style style style style style style</p></td>
</tr>
</table>
<h1>h1 Shadow effect</h1>
<h2>h2 Shadow effect</h2>
</body>
</html>#### CSS Style Rules Explained:
- `*{font-size: 1em;}`: Sets the default font size for all elements in the document to 1em.
- `#id1, #id2, #id3, #id4, #id5{font-size: 16px; border: dotted silver;}`: Applies a common style to elements with IDs `id1` to `id5`, setting their font size to 16px and giving them a dotted silver border.
##### Individual Element Styles:
- `#id1`: Uses Arial font, small font size, and an overline text decoration.
- `#id2`: Specifies "돋움" (Dotum) font, large font size, center text alignment, and a line-through decoration.
- `#id3`: Sets font size to 200%, uses an oblique font style, aligns text to the right, and underlines the text.
- `#id4`: Uses Times New Roman font, doubles the element's font size (2em), and applies bold font weight.
- `#id5`: Attempts to use a non-existent font, falling back to the generic serif font family, sets font size to 100%, and applies a lighter font weight.
##### Text Spacing and Alignment:
- `#id6`: Aligns text to the top, tightens letter spacing, and increases word spacing.
- `#id7`: Justifies text alignment, expands letter and word spacing, and doubles line height.
- `#id8`: Aligns text to the top, reduces letter spacing, adjusts word spacing, and sets a specific line height.
- `#id9`: Aligns text to the bottom of the line, tightens letter spacing, adjusts word spacing, and significantly increases line height.
##### Heading Styles with Shadow Effects:
- `h1`: Sets a large font size and applies a red shadow effect.
- `h2`: Doubles the element's font size, sets a purple background with black text, displays inline, and applies a multi-directional shadow effect in white and silver.
#### HTML Structure:
The body of the document contains paragraphs (`<p>`) with various stylings indicated by their IDs, demonstrating the effects of the CSS properties defined in the style section. It also includes a table to showcase styles in a tabulated context, and headings (`<h1>`, `<h2>`) to display shadow effects.
This document serves as a showcase for a wide range of CSS properties that affect font styling, text decoration, alignment, spacing, and shadows, illustrating the versatility of CSS for web design and typography.