How to Style Webpages Using CSS

How to Style Webpages Using CSS

CSS (Cascading Style Sheet) is is a language used by web designers to style the pages of a website. One style sheet can be used to style multiple pages across a whole website. If necessary, you can use more than one style sheet for a website.

Types of CSS Styles

There are 3 different ways to style your webpages using CSS. Which type you use will depend on what you want to achieve. You can style one tag in a document. You can style a whole page, or you can style your entire website.

Internal Style Sheet

An internal style sheet is placed in the head section of a page. Only that page will be affected by the style.

External Style Sheet

An external style sheet is used when you want to style many pages across one website with the same style. An external style sheet is created as a separate file with a .css extension.

If you are using an external style sheet you have to link your external style sheet to your HTML page. The link needs to be placed in the "head" area of your HTML page.

Your link should look something like this:

<link href="style.css" rel="stylesheet" type="text/css"/>

Inline Style

Inline styles are used to style individual tags within a document.

Priority of Stylesheets

Style Sheets have a priority sequence. Top priority is given to inline styles. Second is internal styles, and third priority is given to external style sheets. If no style is applied then your browsers default style will be used.

If you try to use an external style sheet to style an element that has already been styled using an internal style sheet, nothing will happen. That is because the internal style sheet has priority over the external style sheet.

Follow Produce Your First Website on Pinterest.

Produce Your First Website

If you found this helpful please share.