HTML Styles –CSS: CSS represents Cascading Style Sheets.
CSS saves a lot of work. It can handle the layout of various pages at the same time.
In this article, you will learn-
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
Cascading Style Sheets (CSS) describe how documents are introduced on screens, in print, or maybe how they are articulated. W3C has effectively promoted the use of style sheets on the Web since the consortium was founded in 1994.
Cascading Style Sheets (CSS) provide simple and effective choices to indicate different attributes for the HTML tags. Using CSS, you can determine various style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).
With CSS, you can handle the color, textual style, the size of text, the spacing between elements, how elements are situated and laid out, what background pictures or background colors are to be used, various showcases for various gadgets and screen sizes, and significantly more!
Tip: The word cascading means that a style applied to a parent element will likewise apply to all children elements inside the parent. Thus, in the event that you set the color of the body text to “blue”, all headings, paragraphs, and other content elements inside the body will likewise get a similar color (unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:
- Inline – by using the
styleattribute inside HTML elements - Internal – by using a
<style>element in the<head>section - External – by using a
<link>element to link to an external CSS file
The most widely recognized approach to add CSS is to keep the styles in outer CSS files. Be that as it may, in this tutorial we will use inline and internal styles since this is simpler to illustrate and simpler for you to attempt it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The accompanying example sets the text color of the <h1> elements to blue, and the text color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p>
Internal CSS
An interior CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> segment of a HTML page, inside a <style> element
The accompanying example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. Moreover, the page will be shown with a “powderblue” background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for some, HTML pages.
To use an outside style sheet, add a link to it in the <head> section of each HTML page:
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
The outside style sheet can be written in any text editor. The file should not contain any HTML code and should be saved with a .css extension.
Here is the thing that the “styles.css” file resembles:
“styles.css”:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tip: With an outer style sheet, you can change the look of a whole site, by transforming one file!
CSS Colors, Fonts and Sizes
Here, we will demonstrate some normally used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the textual style to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can defines a border for nearly all HTML elements.
Example
Use of CSS border property:
p {
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the content and the border.
Example
Use of CSS border and padding properties:
p {
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
p {
border: 2px solid powderblue;
margin: 50px;
}
Link to External CSS
External style sheets can be referred to with a full URL or with a way comparative with the current site page.
Example
This example uses a full URL to link to a style sheet:
<link rel="stylesheet" https://www.worldofitech.com/html/styles.css">
Example
This example links to a style sheet located in the html folder on the current web site:
<link rel="stylesheet" href="/html/styles.css">
Example
This example links to a style sheet located in the same folder as the current page:
<link rel="stylesheet" href="styles.css">
Chapter Summary
- Use the HTML
styleattribute for inline styling - Use the HTML
<style>element to define internal CSS - Use the HTML
<link>element to refer to an external CSS file - Use the HTML
<head>element to store <style> and <link> elements - Use the CSS
colorproperty for text colors - Use the CSS
font-familyproperty for text fonts - Use the CSS
font-sizeproperty for text sizes - Use the CSS
borderproperty for borders - Use the CSS
paddingproperty for space inside the border - Use the CSS
marginproperty for space outside the border
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.
