Styling HTML with CSS
CSS denotes Cascading Style Sheets.
CSS is used to describe how HTML elements are displayed on screen, paper, or in other media.
CSS is very beneficial and saves a lot of work. It is used to control the layout of multiple web pages all at once.
CSS is added to HTML elements in 3 ways:
The most commonly used method to add CSS, is to keep and maintain the styles in a separate CSS files. However, here we will be using inline and internal styling, as it is easier for demonstration purpose, and it will be easier for you to try it yourself.
Tip: You will learning more about CSS in our CSS Tutorial.
Inline CSS
An inline CSS is mainly used for applying a unique style to a single HTML element.
An inline CSS makes use of the style attribute of an HTML element.
This example given below sets the text color of the <h1> element to blue:
Internal CSS
An internal CSS is mainly used for defining a style for a single HTML page.
An internal CSS is mentioned in the <head> section of an HTML page, within a <style> element:
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>
Try it Yourself
External CSS
An external style sheet is maily used for defining the style for many HTML pages.
using an external style sheet, the entire web site's look can be changed by changing just one file!
Inorder to use an external style sheet, add a link to it in the
section of the 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>
Try it Yourself
An external style sheet can be written using any text editor. The file should not contain any HTML code, and it should be saved with a .css extension.
Here is an example to show how the "styles.css" looks:
Example
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS color property is used to define the text color which needs to be used.
The CSS font-family property is used to define the font which needs to be used.
The CSS font-size property is used to defin the text size which needs to be used.
Example
<!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>
Try it Yourself
CSS Border
The CSS border property is used to define /a border around an HTML element:
CSS Padding
The CSS padding property is used to define the padding (space) that is present between the text and the border:
CSS Margin
The CSS margin property is used to define the margin (space)present outside the border:
The id Attribute
It is used to define a specific style for one particular special element, and also add an id attribute to the same element:
Example
<p id="p01">I am different</p>
then defining a elements style with the specific id:
Example
#p01 {
color: blue;
}
Note: The element id should be unique for a page, so the id selector is used for selecting one unique element!
The class Attribute
Used for defining a style for a special type of elements, and also add a class attribute to the element:
Example
<p class="error">I am different</p>
then defining a elements style with a specific class:
Example
p.error {
color: red;
}
Chapter Summary
HTML Link Tags