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.
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:
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:
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 thesection of the HTML page:
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:
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.
The CSS border property is used to define /a border around an HTML element:
The CSS padding property is used to define the padding (space) that is present between the text and the border:
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:
then defining a elements style with the specific id:
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:
then defining a elements style with a specific class:
HTML Link Tags