What is CSS?
CSS is an acronym for "Cascading Style Sheet" - it is a simple design language intended for styling web pages. CSS handles the look and feel part of web pages.
Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices, and screen sizes as well as a variety of other effects.
Here is an example that shows the effects of CSS on an Html document.
Below you see how an Html document looks before CSS has been applied,
And here you see how it looks after applying CSS.
CSS Syntax:
CSS uses style rules that are interpreted by the browser and then applied to the corresponding elements in the document.
A CSS Style rule is made up of three parts:
Selector - this is an HTML tag on which a style will be applied.
Property - it is a type of attribute in the HTML tag.
Value - this refers to what is assigned to a property.
You can put CSS Style Rule Syntax as follows:
selector { property: value }
How We Apply CSS in Html Documents.
We can apply CSS in three different ways into an HTML document;
- Inline style:
In this method, CSS styles are included in the Html tag using the style attribute.
It can be done like shown in the below example;
<p style = “color : red”>Some Text </p>
Using inline CSS on an Html document is not considered best – practice as Html documents should be presentation free and thus inline styles should be avoided where possible.
- Internal style:
Internal styles are embedded in the head section of the Html document, and styles are applied to the whole page.
Inside the head element, the styles tag surrounds all of the styles for the page.
Below is an example of internal styles;
<!DOCTYPE html>
<html>
<head>
<title>Internal Css</title>
<style>
P {
Color: red;
Font-size: 20px;
}
</style>
</head>
<body
</body>
</html>
In the above example, the color will be applied to the paragraph's and font size of 20 pixels.
- External style:
In external styles, a separate CSS file is created that contains all the styles that will be used in the whole, multi-site page.
External stylesheets are linked together with the Html document in the head section of the Html document.
An external CSS file is created like shown below;
p {
color: red;
}
a {
color: blue;
}
If the file is saved in the same directory as the Html page, it can then be linked to the Html as shown below;
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="filename.css">
...
CONCLUSION.
CSS is one of the main building blocks of the web today. This article is an overview of CSS, what CSS is, what CSS does, and its basic syntax.
Latest comments (0)