We have to Discuss the CSS and the fundamentals of Cascading Style Sheets, As a junior web designer or web developer. you need to understand the styling of a web page or website.
Now, let's ask about the meaning of CSS?? CSS stands for Cascading Style Sheets CSS is the language we use to style a Web page. CSS describes how HTML elements are to be displayed on the screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once
Why do we use CSS CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.
Understanding How Html works with CSS Having discussed the code of Html there are ways for you to link your Html and CSS together that will show the styling of your codes
Inline CSS *Internal CSS
External CSS
*Inline CSS:- The Inline CSS Is used within the Html code, An example will be written below
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Internal CSS:- Internal CSS may be used if one single HTML page has a unique style. The internal style is defined inside the element, inside the head section. let's write some code and see but before that let us see<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><!DOCTYPE html> <html> <body> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } < /style> < /body> < /html> </code></pre></div> <p></p> <p>External CSS:- THe External CSS is with the <link> element inside the <head> section of the Html<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> </code></pre></div> <p></p> <p>Then, the CSS will be in the next file that is been open in your IDE i.e VS code (Visual Studio Code)<br> body {<br> background-color: lightblue;<br> }</p> <p>h1 {<br> color: navy;<br> margin-left: 20px;<br> }</p> <p>Thanks for reading and I will love you to share with friends and developers that need help with this!!! </p>
Latest comments (0)