CSS Basics: A Quick Start Guide
Since we mainly develop backend programs, we only need to understand the basic concepts and usage of CSS.
Import Methods
CSS can be imported in three ways:
- Inline styles
- Internal style sheets
- External style sheeets
1. Inline Styles
Inline styles use the style attribute within the HTML tag itself. The attribute value is a set of CSS property-value pairs. This method is rarely used.
<div style="color: red;">Hello CSS</div>
2. Internal Styles
First, define a custom tag, for example <test>:
<test>Hello World</test>
Then, define the CSS rules inside a <style> tag in the document's <head>:
<style>
test {
color: red;
}
</style>
3. External Styles
Use the <link> tag to reference an external CSS file. Create a .css file (e.g., test.css) and link it in the <head> section of your HTML.
Attribute in <link> |
Description |
|---|---|
href |
Specifies the path to the CSS file |
rel |
Set to "stylesheet" to indicate a style sheet |
type |
Set to "text/css" to indicate the content type |
Example:
<link rel="stylesheet" type="text/css" href="test.css">
CSS Selectors
CSS selectors are used to select the HTML elements you want to style. They determine which elements the defined style rules apply to. There are various types of selectors, including those based on element type, class, ID, and attributes.
1. Element Selector
Selects elements based on the HTML element type. For example, the p selector selects all <p> elements.
2. Class Selector
Selects elements based on their class attribute. Class selectors start with a dot (.). For example, .myClass {} selects all elements with class="myClass".
3. ID Selector
Selects an element based on its id attribute. ID selectors start with a hash (#). Each ID should be unique within an HTML document. For example, #uniqueElement {} selects the element with id="uniqueElement".
4. Attribute Selector
Selects elements based on an attribute or attribute value. For example, input[type="text"] selects all <input> elements with type="text".
Further Reference
For detailed CSS properties, please refer to the official W3Schools website.
