Style HTML with CSS
CSS stands for Cascading Style Sheets , which describes how HTML elements display on screen, paper and other media. CSS can control the layout of multiple websites at once.
CSS is added to HTML elements in three ways:
- Inline - uses style properties (Style) in HTML elements
- Internal - use elements
Title
Network administrator.
External CSS
External CSS (external CSS) defines styles for multiple HTML pages with an external file (stylesheet). This way, you can change the look of the whole website, just a single CSS file.
To use external CSS, just link a reference to the file in the section
of the HTML page.
OCTYPE html>
Title
Network administrator.
This stylesheet can be written on any text editor. The file must not contain any HTML code and must be saved with the .css extension. This is an example of a section in this CSS file.
bod
y {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Font
color
in CSS determines the text color.font-family
determines the font used.font-size
specifies thefont-size
used.
OCTYPE html>
Post title
Network administrator.
CSS Border
border
defines the border around the HTML element.p
{
border: 1px solid powderblue;
}
CSS Padding
padding
defines the space between text and border.p
{
border: 1px solid powderblue;
padding: 30px;
}
CSS Margin
margin
determines the margin, ie the space outside the border.p {
border: 1px solid powderblue;
margin: 50px;
}
Id attribute
The
id
attribute is used to specify a specific style for a particular element.Network administration is a technology website
Then specify the style for this element with
id
#p01 {
color: blue;
}
Note : The
id
of an element must be unique within a page.Class properties
When you need to define a certain style for a particular type of element, use the
class.
attributeclass.
I differences.
then define the style for the element with its own class.
p.error {
color: red;
}
External reference
External stylesheet can be referenced by the HTML file by the URL or the path to the current web page. The following example uses the full path to a stylesheet.
href="https://www.quantrimang.com/html/styles.css">
The following example leads to a stylesheet located in an HTML folder on the current web page.
The following example leads to a stylesheet located in the same directory in the current page.
Last lesson: Colors in HTML
The following article: Links in HTML
You should read it
May be interested
- Paths in HTMLyou can find links (links) throughout the web. link allows clicking to switch to another page.
- Image img in HTMLwhen you visit the website, you will often see images of all sizes and positions on the page. images in html web pages will help to enrich the content as well as increase the aesthetics of the page.
- Table in HTMLwhat does it take to create a table in html? is it complicated? want to add color to the table border, how to add the background color to the text in the table? in this article tipsmake.com will answer those questions and guide you to basic operations with tables on html, in addition to adding alternate color schemes for rows in the html table. invite you to follow along.
- List in HTMLthis tutorial explains how to create lists in html.