Scribd
Upload
39 views

CSS For 3rd CSE JNTUH R18

1. HTML (Hypertext Markup Language) is the code that defines the structure and layout of a web page. CSS (Cascading Style Sheets) is used to design and style HTML elements, allowing control over things like colors, fonts, layout, and more. 2. There are three ways to apply CSS to HTML: inline CSS uses style attributes within elements, internal CSS defines styles between <style> tags in the HTML head, and external CSS links to a separate .css file. 3. Inline CSS allows quick testing but can bloat page loads, internal CSS avoids separate files but increases page size, and external CSS in a linked .css file is most efficient and reliable for production

Uploaded by

kranthikumarimmadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

CSS For 3rd CSE JNTUH R18

1. HTML (Hypertext Markup Language) is the code that defines the structure and layout of a web page. CSS (Cascading Style Sheets) is used to design and style HTML elements, allowing control over things like colors, fonts, layout, and more. 2. There are three ways to apply CSS to HTML: inline CSS uses style attributes within elements, internal CSS defines styles between <style> tags in the HTML head, and external CSS links to a separate .css file. 3. Inline CSS allows quick testing but can bloat page loads, internal CSS avoids separate files but increases page size, and external CSS in a linked .css file is most efficient and reliable for production

Uploaded by

kranthikumarimmadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML CSS

Introduction
HTML Stands for Hypertext Markup Language. We also call it the backbone of the internet. It is one of
the markup languages which is used to create web pages and applications. One of the most essential
and powerful features of HTML is its CSS. We can design our HTML page with the help of CSS.

What is CSS?
CSS stands for Cascading Style Sheets. It is used to design the layout of the webpage. CSS helps the
developer to save a lot of work. With the help of CSS, we can control the background images or
background colors to be used, the spacing between elements, different displays for different devices
and screen sizes, color, font, how elements are positioned and laid out, and many more.

Here the word "Cascading" means if we apply some style to the parent element, then a similar style is
automatically applied to the child elements.

Using CSS
We can apply the CSS property to our HTML page in 3 ways. These ways are as follows.

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

Inline CSS
We can implement the CSS property by writing the CSS code in a particular line. This can be done with
the help of inline CSS. In inline CSS, we can use style attributes to implement the CSS property.

Example:

1. <DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Document</title>
5.
6. </head>
7. <body>
8. <h2 style="color:blue;">WELCOME TO JAVATPOINT</h2>
9. <p style="color:red;">A red paragraph.</p>
10. </body>
11. </html>
Output:

Explanation:

The above code is an example of the implementation of inline CSS. In the code, we have implemented
some CSS properties inside the tag with the help of the style attribute.

Advantages of Inline CSS

There are some advantages of using inline CSS. These are as follows.

1. We can insert CSS properties to an HTML page very quickly and easily. So this method is very
useful for testing the webpages and performing the quick fix operation to the web pages.
2. There is no need to upload an extra file for CSS as like external CSS.

Disadvantages of Inline CSS

There are also some disadvantages to using inline CSS. These are as follows.

1. If we implement inline CSS in multiple tags, it can take lots of time to load the page and make
our web page slow.

Internal CSS
Internal CSS is used to implement the CSS property in a single HTML page. We can write the internal
CSS within the head tag of the HTML page. We have to write the code inside the <style> tag.

With the help of the below process, we can implement the internal CSS in HTML code.

Step 1: First, we have to open our HTML page; then, we have to search for the <head> opening tag.

Step 2: We have to write the below code inside the <head> tag.

<style type= "text/css">

Step 3: We have to write the required CSS code inside the <style> tag. The example is as below.

1. body {
2. background-color: blue;
3. }
4. h1 {
5. color: red;
6. padding: 60px;
7. }

Step 4: Then we have to close the style tag.

1. </style>

Example 2:

1. <DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Document</title>
5. <style>
6. body {background-color: powderblue;}
7. h2 {color: blue;}
8. p {color: red;}
9. </style>
10.
11. </head>
12. <body>
13. <h2>WELCOME TO JAVATPOINT</h2>
14. <p>A red paragraph.</p>
15.
16. </body>
17. </html>

Output:
Explanation:

In the above, we implement the CSS property inside the style tag. Inside the style tag, we have defined
different styles for different elements by targeting the tag name.

Advantages of Internal CSS

There are some advantages of using internal CSS in our HTML code. These are as follows.

1. We can use the selector like CLASS selector in internal CSS. The implementation of CLASS or ID
selector is as follows.

1. class {
2. property1 : value1;
3. property2 : value2;
4. property3 : value3;
5. }

2. In internal CSS, we don't have to upload extra files. Because in internal CSS, we write all the code in a
single code.

Disadvantages of Internal CSS

There are some disadvantages to using internal CSS in our HTML code. These are as follows.

1. If we add the CSS code with our HTML code, then it will increase the page size and loading time
of the webpage.

External CSS
With the help of external CSS, we have to write another file where we have to write the CSS code with
the help of any text editor, and then we have to link that file to the HTML code with the help of syntax.

This method is a more efficient and reliable method that is followed by all the developers. When we
want to change the design of the webpage, then we have to just go to the. CSS file, and then we have to
modify that file according to our needs.

With the help of the below steps, we can implement the external CSS in our HTML code.

Step 1: First, we have to create a file and name that file with the help of a .css extension with the help of
any text editor. The example is as below.

Step 2: Then we have to go to the <head> tag in the HTML file; then, we have to create a reference
path to that CSS file after the <title> tag.

<link rel="stylesheet" type="text/css" href="style.css" />

HTML code

1. <DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Document</title>
5. <link rel="stylesheet" href="./style.css">
6. </head>
7. <body>
8. <h2>WELCOME TO JAVATPOINT</h2>
9. <p>A red paragraph.</p>
10.
11. </body>
12. </html>

CSS code

1. body {
2. background-color: powderblue;
3. }
4. h2 {
5. color: blue;
6. }
7. p{
8. color: red;
9. }

Output:
Explanation:

In the above code, we have to create two files. One is for HTML, and another is for CSS. Then we have to
link those files with the help of the link attribute inside the <head> tag.

You might also like