Technology. Education. Art (TEA) TEAlearn.org

Home > Courses > Styling (Beautify) Website > Introduction to CSS

Introduction to CSS

Subject: Styling (Beautify) Website

One of the key principles of web development is the separation of content (HTML) and presentation (CSS). HTML defines the structure and content of a web page, while CSS is responsible for its visual style.

Selectors and Declarations: CSS uses selectors to target HTML elements and declarations to define the styles for those elements. A declaration consists of a property (e.g., color, font-size) and a value (e.g., blue, 16px).

CSS Syntax: A basic CSS rule looks like this:


selector {
    property: value;
}

h1 {
    color: green;
}

Internal, External, and Inline CSS: There are three ways to apply CSS to a web page:

1. Internal CSS:You can include CSS rules inside an HTML <style> element within the of an HTML document.

2. External CSS: CSS can be placed in a separate .css file and linked to the HTML document using the <link> element.

3. Inline CSS: You can also apply CSS styles directly to individual HTML elements using the style attribute.

Internal CSS
An internal CSS is used to define a style for a single HTML page and it is defined withing the <style> element in the <head> section of the HTML page e.g about.html

In this example we sets the body backgroud for the page Azure all the <h1> elements on the page to green and the text color of all the <p> elements to MediumSeaGreen.


<html>
<head>
<title>About CSS</title>
<style>
body {background-color: Azure;}
h1   {color: green;}
p    {color: MediumSeaGreen;}
</style>
</head>
<body>
<h1>About CSS</h1>
<p>Cascading Style Sheets (CSS) is a styling language used to control the presentation and layout of web pages.</p>
</body>
</html>

External CSS
Here the CSS is placed in a separate .css file and linked to the HTML document using the element. The reason for this is to use same style for many HTML pages.

To use an external style sheet we:
1. create a CSS file call style.css for example
2. add the CSS code to it


body {background-color: Azure;}
h1   {color: green;}
p    {color: MediumSeaGreen;}
{/coe}
3. add a link to the head section of each HTML page that need to use the style e.g 
&lt;link rel="stylesheet" href="style.css"&gt;
<pre><xmp>
<html>
<head>
<title>About CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>About CSS Page 2</h1>
<p>Cascading Style Sheets (CSS) is a styling language used to control the presentation and layout of web pages.</p>
</body>
</html>

Inline CSS
This option allows you apply a unique style directly to individual HTML element or elements by using the style attribute of an HTML element.


<body>
<h1>About CSS Page 2</h1>
<p style="color:blue;">Cascading Style Sheets (CSS)</p> 
<p> is a styling language used to control the presentation and layout of web pages.</p>
</body>

In the example here, I have decided to change the first paragraph <p>...</p> to blue, overriding the general MediumSeaGreen that is applicable to all paragraph.

By: Benjamin Onuorah

Introduction to CSS

Comments

Login to comment or ask question on this topic