Login Required

Adding Styles Using CSS

Dear Sciaku Learner you are not logged in or not enrolled in this course.

Please Click on login or enroll now button.

Enroll now

If you have any query feel free to chat us!

Happy Coding! Happy Learning!

Lecture 36:- Adding Styles Using CSS

  1. CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a HTML document. CSS can be used to control the layout, font, color, and other visual aspects of a web page.

    CSS can be added to a HTML document in three ways:

    1. Inline Styles: Inline styles are added directly to HTML elements using the style attribute. For example:

    cssCopy code

    <p style="color: blue;">This is a blue paragraph.</p>

    1. Internal Styles: Internal styles are defined within the <head> section of a HTML document using the <style> tag. For example:

    phpCopy code

    <head>  <style>    p {      color: blue;    }  </style> </head> <body>  <p>This is a blue paragraph.</p> </body>

    1. External Styles: External styles are stored in a separate .css file and are linked to the HTML document using the <link> tag. For example:

    phpCopy code

    <head>  <link rel="stylesheet" type="text/css" href="style.css"> </head> <body>  <p class="blue">This is a blue paragraph.</p> </body>

    The content of style.css file:

    cssCopy code

    .blue {  color: blue; }

    In CSS, styles are applied to HTML elements using selectors. Selectors can be based on the element type (e.g. p), class (e.g. .blue), or ID (e.g. #red). For example:

    cssCopy code

    p {  color: blue; } .blue {  color: blue; } #red {  color: red; }

    CSS can also be used to control the layout of a web page using the display, float, position, and flex properties. For example:

    cssCopy code

    header {  background-color: lightgray;  display: flex;  justify-content: space-between;  align-items: center;  padding: 20px; } main {  display: flex;  justify-content: center; } aside {  width: 200px;  background-color: lightgray;  padding: 20px; } footer {  background-color: lightgray;  text-align: center;  padding: 20px; }

5 Intro To CSS
🎬 10 videos

Course Certificate

Complete 100% to unlock your certificate

Sponsored

Course Discussion

2 Comments

@niteshguptav63
niteshguptav63 Nov 17, 2024 at 8:09 AM

I am not able to access videos from second class and further. I have already completed first class

@niteshguptav63
niteshguptav63 Nov 16, 2024 at 5:26 AM

When will I get my course?

@admin79
admin79 Nov 17, 2024 at 7:59 AM

Now, Your query was resolved.

Frequently Asked Questions About Sciaku Courses & Services

Quick answers to common questions about our courses, quizzes, and learning platform

Didn't find what you're looking for?

help_center Contact Support