CSS is an acronym for cascading style sheets.
It provides a layout for web pages. It can alter the default view of an element on a web page.
HTML defines the structure of the web page, and CSS defines the layout of the page.
With the layout, we mean the way different HTML elements are styled and set out on a page. It decides how a page will look on the browser screen. CSS can style the font, colour, and background of an element. Depending on the device's screen size, the CSS can position elements at the desired location on the web page.
The CSS can set the layout of multiple pages all at once.
In CSS, the style given to a parent element automatically applies to all its children elements. Hence the term 'cascading' is used for CSS.
For example, if we set the font color of the body element to red, then all headings and paragraphs inside the body will inherit the same font color, i.e. red.
Now in such cases, if we don't want to inherit the style of the parent element then we will have to exclusively specify the styles for the child element.
To understand the concept, let's see the example.
CSS can be used in an HTML document in the following three ways:
In an HTML document, we can apply a particular style to a single element. That means we can have an exclusive style for an individual element. Such styling is achieved using the
attribute of that element and the styling method is called inline CSS.Let's take an example of inline CSS where we will set a paragraph text color to green and the background color of the heading to red using the
attribute.Internal CSS is defined using the <style> element in the <head> section of the page.
It is a way of styling a single HTML document.
Styles of all the elements are specified within the opening <style> and closing </style> tags.
The following example uses internal CSS to set the heading text to red color and the paragraph text to green color.
In external CSS we use a separate file with the extension
to define all the styling.The link of the file (style sheet) is specified in the <head> section of the page.
The href attribute of <link> element provides the URL of the style sheet. Let's see an example.
View the result of the above HTML codes. You notice that the text of the heading is in blue and the text of the paragraph is in red.
The file that sets these colors is 'mystyle.css' and is linked in the
section.Let's see the content of the
file.Any text editor can be used to create a CSS file.
The only requirement is that you save it with the
extension.This way a single file can be used to define the look and feel of the entire website.
The location of the CSS file can be provided with the full URL or with a relative path in the link tag.
attribute ofBelow is an example of when we specify the stylesheet (
) location with the full URL.When the stylesheet (
) is located in the folder of the current website.When the stylesheet (
) is located in the same folder as the current page.Styling HTML documents with external CSS have more advantage than other ways. Because by editing a single file, we can alter the look of the entire website.
But for convenience, while explaining our codes, we will use internal CSS throughout the HTML tutorial.
Let's take few examples to explain above discussed concepts.
As we discussed in the previous chapters, we can specify a font using the CSS
property. One can alter the text size by the CSS property and the text color can be changed using the CSS property.When we need to add a border around an HTML element, we use the CSS
property.When we need to add some space outside the border of an element, we use the CSS
property and when we need some space inside the border i.e. the space between the text and the border we use the CSS property.The following example shows both margin and padding properties.
Tags | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
<link> | Yes | Yes | Yes | Yes | Yes |
<style> | Yes | Yes | Yes | Yes | Yes |
To deep dive into the concept, we have created a dedicated tutorial for HTML CSS. You can start learning CSS after you complete your HTML tutorial.
1. HTML Tutorial |
2. Introduction to HTML |
3. Basic HTML Page |
4. HTML Editors |
5. Web Browser |
6. HTML History |
7. Basic HTML Tags |
8. HTML Elements |
9. HTML Attributes |
10. HTML Headings |
11. HTML Paragraphs |
12. HTML Text Formatting |
13. HTML Styles |
14. HTML Comment |
15. HTML Quotation |
16. HTML Colors |
17. HTML RGB Colors |
18. HTML HEX Colors |
19. HTML HSL Color |
20. HTML CSS |
21. HTML Links |
22. HTML Link Colors |
23. Link within Page |
24. HTML Images |
25. HTML Background Image |
26. HTML Image Map |
27. HTML Picture Element |
28. HTML Favicon |
29. HTML Table |
30. HTML Table Border |
31. HTML Table Size |