HTML CSS

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.

What do we mean by 'cascading'?

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.

Example: Cascading or Inheritance
<!DOCTYPE html>
<html>
<head>
<title>CSS Cascading Example</title> </head>
<body style="color:red;">

<h1>Heading Color is Inherited From Body</h1>
<p>The font color of the paragrah is set to red. Though we have not given specific style to p tag. It is inheriting style from the body tag.</p>
<p style="color:blue;">The font color of this paragraph is not red. Its color is blue because it has own styles that override the inherited ones.</p>

</body>
</html>

CSS can be used in an HTML document in the following three ways:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS

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 style 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 style attribute.

Example
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>

<h1 style="color:magenta;">Inline CSS Example</h1>
<p style="color:blue; font-size:14px;">The font color of the paragrah is blue and the size is 14px. This style for the paragraph is set with the style attribute. This is an example of inline CSS.</p>

</body>
</html>

Internal CSS

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.

Example
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>

<style>
body {background-color: #e9e4e6;}
h1{color: magenta;}
p{color: blue;}
</style>

</head>
<body>

<h1>Internal CSS Example</h1>
<p>The font color of the paragrah is blue. The styling is set with internal CSS using style element.</p>

</body>
</html>

External CSS

In external CSS we use a separate file with the extension <.css> 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.

HTML Document
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>External CSS Example</h1>
<p>The font color of the paragrah is blue. The styling is done with external CSS file mystyle.css.</p>

</body>
</html>

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 head section.

Let's see the content of the mystyle.css file.

mystyle.css
body {
background-color: #e9e4e6;
}
h1 {
color: blue;
}
p {
color: red;
}

Any text editor can be used to create a CSS file.

The only requirement is that you save it with the .css extension.

This way a single file can be used to define the look and feel of the entire website.

Linking The Stylesheet

The location of the CSS file can be provided with the full URL or with a relative path in the href attribute of link tag.

Below is an example of when we specify the stylesheet (mystyle.css) location with the full URL.

<link rel="stylesheet" href="https://resultuniversity.com/html/mystyle.css">

When the stylesheet (mystyle.css) is located in the html folder of the current website.

<link rel="stylesheet" href="/html/mystyle.css">

When the stylesheet (mystyle.css) is located in the same folder as the current page.

<link rel="stylesheet" href="mystyle.css">

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.

Change Font, Size and Color

As we discussed in the previous chapters, we can specify a font using the CSS font-family property. One can alter the text size by the CSS font-size property and the text color can be changed using the CSS color property.

Example
<!DOCTYPE html>
<html>
<head>
<title>Change Font, Size and Color Example</title>
<style>
body {background-color: #e9e4e6;}
h1 {font-family:Verdana; font-size:16px; color: magenta;}
p {font-family:Verdana; font-size:14px; color: blue;}
</style>
</head>
<body>

<h1>Change Font, Size and Color Example</h1>
<p>This is a paragraph whose font has been set to Verdana. The size of the font is 14px and color is blue. Here we have used internal CSS.</p>

</body>
</html>

CSS Border

When we need to add a border around an HTML element, we use the CSS border property.

Example
<!DOCTYPE html>
<html>
<head>
<title>Add Border Example</title>
<style>
h1 {border: 2px solid blue;}
p {border: 4px solid red;}
</style>
</head>
<body>

<h1>This heading has a border around it</h1>
<p>The paragraph has 4px border around it in red color.</p>

</body>
</html>

CSS Padding and Margin

When we need to add some space outside the border of an element, we use the CSS margin property and when we need some space inside the border i.e. the space between the text and the border we use the CSS padding property.

The following example shows both margin and padding properties.

Example
<!DOCTYPE html>
<html>
<head>
<title>Add Border Example</title>
<style>
h1 {
border: 4px solid red;
padding: 20px;
}
p {border: 4px solid blue;
margin: 40px;
}
</style>
</head>
<body>

<h1>This heading has 20px padding</h1>
<p>This paragraph has 40px margin.</p>

</body>
</html>

What did we learn in this chapter?

  • CSS defines a layout for the web page.
  • There are three ways to define CSS i.e. through inline, internal or external.
  • Inline CSS uses the style attribute of an element for styling.
  • For styling an element through internal CSS, use HTML <style> element in the <head> section.
  • The styling through an external stylesheet is achieved by linking it in the <head> section. We use <link> element to add CSS file in the document.
  • The CSS font-family property is used to set the fonts of texts.
  • The CSS color property is used to set the font color of the texts.
  • The CSS font-size property specifies the size of the font.
  • The CSS border property is used to make a border around an element.
  • Both CSS margin and padding properties are used for spacing around the border. Margin defines space outside the border while padding defines space inside the border.


Browsers Support

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.


  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.