CSS, or cascading style sheets, is an acronym.
A lot of work is saved via CSS. It can manage the design of several web pages simultaneously.
A web page’s layout can be formatted using Cascading Style Sheets (CSS).
The color, font, size, spacing between items, positioning of elements, background images or background colors, different displays for various devices and screen sizes, and much more may all be controlled with CSS.
Cascading refers to the idea that any style applied to a parent element will also be applied to all of the child elements included within the parent. Therefore, unless you indicate otherwise, if you set the color of the body text to “blue,” all headings, paragraphs, and other text elements within the body will likewise have that color!
There are three techniques to include CSS in HTML documents:
- Utilizing the style attribute inside HTML elements, or inline
- Internally, using the <style> element in the <head> section.
- External by linking to an external CSS file using the <link> element.
Keeping the styles in separate CSS files is the most typical method of including CSS. However, since using inline and internal styles makes it simpler to illustrate and easier for you to try it yourself, we’ll do so in this lesson.
Inline CSS in HTML
To apply a particular style to a single HTML element, use an inline CSS.
The style attribute of an HTML element is used by inline CSS.
The example below changes the text color of the <h1> element to yellow and the <p> element to blue:
Internal CSS in HTML
A style for a single HTML page is established using an internal CSS.
A <style> element in the <head> section of an HTML page contains the definition of an internal CSS.
The example below changes the text color of EVERY <h1> element (on that page) to Yellow and EVERY <p> element (on that page) to green. In addition, a “skyblue” backdrop color will be used to display the page:
External CSS in HTML
Many HTML pages require an external style sheet to specify their look.
For each HTML page that uses an external style sheet, include a link to it in the <head> section:
Any text editor can be used to create the external style sheet. The file must be saved with a.css extension and cannot contain any HTML code.
The “styles.css” file appears as follows:
Tip: By modifying only one file in an external style sheet, you can alter the appearance of a complete website!
CSS Colors, Fonts and Sizes in HTML
Here, we’ll show you a few frequently used CSS properties. Later on, you will discover more about them.
The text color to be used is specified by the CSS color attribute.
The typeface to be used is specified using the CSS font-family attribute.
The text size to be utilized is specified by the CSS font-size attribute.
Use of the CSS properties for font-family, color, and size:
CSS Border in HTML
An HTML element’s border can be defined using the CSS border attribute.
The borders of almost all HTML components can be set.