Introduction to Basic CSS Styling
CSS is used to style and beautify HTML elements.
CSS Application Methods
There are three common ways to apply CSS styles:
- Inline styles written directly on HTML tags
- Internal styles defined in a
<style>tag inside the<head>section - External styles written in separate CSS files
1. Inline Styles
Add styles directly via the style attribute on the target element:
<div style="color: aqua;">hello world</div>
2. Internal Style Tag
Define all styles in a dedicated <style> tag in the document head:
<head>
<title>Hello</title>
<style>
.text-purple {
color: blueviolet;
}
</style>
</head>
<body>
<div class="text-purple">hi color</div>
</body>
3. External CSS File
This method will not be covered in this introductory guide.
CSS Selectors
Selectors are used to target the elements you want to style. Common selector types include:
- ID selector
- Class selector
- Element selector
Example of basic selectors:
<head>
<title>Style Demo</title>
<style>
.text-red {
color: red;
}
#text-gold {
color: gold;
}
li {
color: pink;
}
</style>
</head>
<body>
<div class="text-red">CCTV</div>
<div id="text-gold">China Gold</div>
<ul>
<li>Great Wall Motor</li>
<li>Geely Auto</li>
<li>Changan Automobile</li>
</ul>
</body>
Attribute Selector
Target elements based on their attribute values:
<head>
<title>Hello</title>
<style>
input[type='password'] {
border: 1px solid gold;
}
.custom-text[custom-attr="123"] {
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<div class="custom-text" custom-attr="123">hello</div>
<div>world</div>
</body>
Descendant & Direct Child Selector
Target elements nested inside a parent element:
<head>
<title>Hello</title>
<style>
.nav-container li {
color: pink;
}
.nav-container a {
color: blue;
}
.nav-container > a {
color: green;
}
</style>
</head>
<body>
<div class="nav-container">
<a>Baidu</a>
<div>
<a>Google</a>
</div>
<ul>
<li>Facebook</li>
<li>Telegram</li>
</ul>
</div>
</body>
The
>symbol means only direct child elements of the parent will be matched.
Height and Width
You can set custom dimensions for elements:
<head>
<title>Hello</title>
<style>
.small-box {
width: 100px;
height: 10px;
}
</style>
</head>
<body>
<div class="small-box">
world
</div>
</body>
Key notes for dimensions:
- Width supports percentage values, but height does not work with percentages by default
- Custom dimensions take effect on block-level elements by default
- Custom dimensions do not take effect on inline elements by default
You can modify element behavior with the display proeprty:
<head>
<title>Hello</title>
<style>
.inline-block-box {
display: inline-block;
width: 100px;
height: 90px;
border: solid blue;
}
</style>
</head>
<body>
<span class="inline-block-box">
world
</span>
<span> !!</span>
</body>
inline-blocklets inline elements like<span>accept custom height/width while staying in line with adjacent content.
<head>
<title>Hello</title>
<style>
.inline-div {
display: inline;
width: 100px;
height: 90px;
border: solid blue;
}
</style>
</head>
<body>
<div class="inline-div">
world
</div>
<span> !!</span>
</body>
inlinemakes block elements behave like inline elements, whiledisplay: blockmakes inline elements behave like block elements.
Content Alignment
- Horizontal alignment for text/inline content:
text-align: center; - Vertical alignment for single-line text: set
line-heightequal to the container height.
Float Layout
Float is used to push elements to the left or right of their container:
<head>
<title>Hello</title>
</head>
<body>
<span>Left</span>
<span style="float: right;">Right</span>
</body>
Even block-level <div> elements change their layout behavior when floated:
<head>
<title>Hello</title>
<style>
.float-card {
float: left;
width: 90px;
height: 90px;
border: 1px solid goldenrod;
}
</style>
</head>
<body>
<div class="float-card"></div>
<div class="float-card"></div>
<div class="float-card"></div>
</body>
Floated elements are removed from the normal document flow, and will not automatically expand the height of their parent container.
