CSS Basic Tutorial

CSS Box Model

CSS3Basic Tutorial

CSS Reference Manual

CSS @rule(RULES)

CSS Basics

CSS files are simply plain text files saved with the .css extension.

CSS Introduction

In this tutorial, you will learn how easy it is to add style and formatting information to web pages using CSS. But before you start, make sure you have some knowledge of HTML usage.

If you are just entering the field of web development, pleaseStart learning from here»

Without further ado, let's start using the Cascading Style Sheets (CSS).

Include CSS in the HTML document

CSS can be attached as a separate document, or embedded in the HTML document itself. There are three ways to include CSS in an HTML document:

inline styles -usingstyleattributes in the HTML start tag.
Embedded styles -using<style>elements in the document header.
External stylesheets -using<link>element points to an external CSS file.

In this tutorial, we will introduce all three methods of inserting CSS one by one.

Note:inline styles have the highest priority, while external style sheets have the lowest priority. This means that if inEmbeddedstylesheet andExternal stylesheetsstyles are specified for the element, thenEmbeddedStylesheet conflicting style rules will override external style sheets.

inline styles

Inline styles are used to apply a unique style rule to an element by directly placing CSS rules in the start tag. You can usestyleproperty attaches it to an element.

isstyleThe properties include a series of CSS properties and value pairs. Each"property: value"between the;）separated, just like you would write an embedded stylesheet or an external stylesheet. But it must all be on one line, that is, there is no line break after the semicolon, as shown below:

Example

<h1　style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

Test to see‹/›

Using inline styles is generally considered bad practice. Since style rules are directly embedded within HTML tags, it causes the presentation to mix with the document content. This makes the code difficult to maintain and negates the purpose of using CSS.

Note:to set inline stylespseudo-elementsandpseudo-classesStyles have become impossible. Therefore, it should be avoided to use style attributes in the code. UseExternal stylesheetsare the preferred method for adding styles to an HTML document.

Embedded stylesheets

Embedded or internal stylesheets only affect the document they are embedded in.

Embedded stylesheets in<head>use within the<style>elements definition. You can<style>Define any number of elements in an HTML document, but they must appear within<head>and</head>between tags. Let's look at an example:

Example

<!DOCTYPE html><html lang="en"><head>
　　　　<title>My HTML Document</title>
　　　　<style>
　　　　　　　　body { background-color: YellowGreen; }
　　　　　　　　p { color: #fff; }
　　　　</style></head><body>
　　　　<h1>This is a heading</h1>
　　　　<p>This is a paragraph of text.</p></body></html>

Test to see‹/›

Tip:of theand thetype5is the standard stylesheet language and the default stylesheet language, so you can ignore this setting. This attribute (i.e.) defines the language of the stylesheet. This attribute is purely informative. Since CSS is an HTML<style><link>type="text/css"

External stylesheets

External stylesheets are ideal when styles are applied to many pages on a website.

External stylesheets store all style rules in a separate document, which you can link from any HTML file on the website. External stylesheets are the most flexible because with an external stylesheet, you only need to change one file to change the appearance of the entire website.

You can attach an external stylesheet in two ways- LinkandImport.

Linking external stylesheets

Before linking, we need to create a stylesheet. Let's open your favorite code editor and create a new file. Now, type the following CSS code into this file and save it as 'style.css'.

body {
　　　　background: lightyellow;
　　　　font:　18px Arial, sans-serif;}h1　}
　　　　color: orange;}

can be used<link>tag links an external stylesheet to the HTML document. The<link>tag to enter the internal<head>section, you can see in the following example:

Example

<!DOCTYPE html><html lang="en"><head>
　　　　<title>My HTML Document</title>
　　　　<link rel="stylesheet" href="css/style.css"></head><body>
　　　　<h1>This is a heading</h1>
　　　　<p>This is a paragraph of text.</p></body></html>

Test to see‹/›

Tip:Among these three methods, using an external stylesheet is the best way to define styles and apply them to an HTML document. It is clear from the external stylesheet that the affected HTML files have the least changes to the markup.

Import External Stylesheet

is@importis another method to load an external stylesheet. The@importstatement indicates that the browser loads an external stylesheet and uses its styles.

You can use it in two ways. The simplest is within the document's title. Note that other CSS rules may still be included in<style>within an element. Here is an example:

Example

<style>
　　　　@import url("css/style.css);
　　　　p {
　　　　　　　　color: blue;
　　　　　　　　font-size:　16px;
　　　　}
　　</style>

Test to see‹/›

Similarly, you can use@importRules to import stylesheets from another stylesheet.

Example

@import url("css/layout.css");
@import url("css/color.css);body {
　　　　color: blue;
　　　　font-size:　14px;}

Test to see‹/›

Note:All@importAll rules must appear at the beginning of the stylesheet. Any style rules defined in the stylesheet itself will override conflicting rules in imported stylesheets. However, due to performance issues, it is not recommended to import stylesheets into another stylesheet.

CSS Syntax CSS Introduction