How to add CSS to a web page

How to add CSS to a web page

CSS (Cascading Style Sheets) is an incredibly powerful language and diverse in its application. As a starting point for the absolute beginner, this tutorial will explain how to add CSS to a web page using a variety of methods.

CSS Application

There are 3 main ways in which you can add CSS to a page:

1. In-line CSS Style

CSS is written in to the HTML code at the point where you want it to be applied.

Example:

<span style="color:red">This text is red</span>

Result: This text is red

By using the attribute ‘style’, you can place any type of CSS code to control the text, images, URL links, etc with the confines of the enclosing tag – in this case a ‘<span></span>’. You could also apply it to other HTML tags:

<b style="color:red">Red and bold</b>
<i style="margin:10px">CSS Margins</i>
<h2 style="font-weight: normal">Non-bold header</h2>

Although this is a straight forward method, it is not recommended as it is messy and not as easy to manage in-line styles.

2. Internal CSS Style

An Internal CSS style is when you have your CSS at the top of your code, usually inside the ‘<head></head>’ area, and within <style></style> tags. This will cause any reference to that style to conform to it throughout the page. Try the following:

<head>
 <style type="text/css" media="screen">
 h2 { font-weight: normal }
 p { color:red }
 </style>
</head>

<body>
 <h2>This header is not bold</h2>
 <p>This paragraph is red</p>
 <h2>This also is not bold</h2>
 <p>Yep, you've guessed it, this paragraph is also red!</p>
</body>

3. External CSS Style

Internal CSS is good for introducing styling that is particular to that page, but external CSS allows even greater control. External CSS is place within a separate file and called upon to style any number of pages. This simply means that make a change to (for example) the font type can be applied across an entire website, by changing a single reference in the external CSS file.

Try this: Using your source editor, create a new page and call it something like ‘my-style.css’. Within your new css file, add the following:

p {color:blue}
 b {color:red; text-decoration: underline}

Now create an HTML document – call it whatever you like, but add this to the top of it, preferably within the <head></head> section:

<head>
 <style src="my-style.css" type="text/css" media="screen"></style>
 </head>
<body>
<p>This paragraph of text is coloured blue. And any <b>bold</b> text is both <b>red and underlined</b>.</p>
</body>

When testing the HTML file within your browser, you should see something like the following:

This paragraph of text is coloured blue. And any bold text is both red and underlined.

For more CSS examples, visit http://www.w3schools.com/css/.

Leave a Reply

Your email address will not be published. Required fields are marked *