DEV Community

Bala Murugan
Bala Murugan

Posted on

Learning HTML & CSS Portfolio Header Part

*Portfolio Webpage *

  This HTML page is a basic portfolio website structure.

 A portfolio website is used to show your personal details, skills, and projects in one place.
Enter fullscreen mode Exit fullscreen mode

This page uses HTML for structure and CSS for styling.

<!DOCTYPE html>







portFolio

<br>
*{<br>
padding: 0;<br>
margin: 0<br>
}<br>
h1 {<br>
text-align: center;<br>
color: white;<br>
margin: 0 0 10px 0;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> nav{ 
    text-align: center;
  }
  header{
    background-color: black;
    padding: 20px;

  }
  a{
    color: white;
    text-decoration: none;
    margin-right: 10px;
  }
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</code></pre></div>
<p></head></p>

<p><body><br>
<header><br>
<h1>BalaMurugan</h1><br>
<nav> <br>
<a href="">About Me</a><br>
<a href="">Projects</a><br>
<a href="">contact</a><br>
<a href="">Login page</a><br>
</nav><br>
</header></p>
<div class="highlight"><pre class="highlight plaintext"><code>&lt;section class="about"&gt;

&lt;/section&gt;
&lt;section class="project"&gt;

&lt;/section&gt;
&lt;section class="contact"&gt;

&lt;/section&gt;

&lt;footer&gt;

&lt;/footer&gt;
</code></pre></div>
<p></body></p>

<p></html></p>

<p>*<em>HTML Structure</em></p>
<div class="highlight"><pre class="highlight plaintext"><code> HTML is used to create the structure of the webpage.

The page starts with &lt;!DOCTYPE html&gt; which tells the browser that this is an HTML5 document.

The &lt;html&gt; tag wraps the entire page. Inside it, there are two main parts

          &amp;lt;head&amp;gt; and &amp;lt;body&amp;gt;.
Enter fullscreen mode Exit fullscreen mode

</code></pre></div>
<p><strong>Head Section</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code> &lt;head&gt; ---&gt; The section contains important information about the page.
</code></pre></div>
<p><meta charset="UTF-8"> <br>
Allows the page to support all characters.</p>

<p><meta name="viewport"><br>
makes the page responsive on mobile devices.</p>

<p><title><br>
sets the page title shown in the browser tab as portFolio.</p>

<p><style> </p>
<div class="highlight"><pre class="highlight plaintext"><code> contains internal CSS used to design the page.
</code></pre></div>
<p><strong>What is href ?</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code>href means Hypertext Reference.

It tells the browser where the link should go when the user clicks it.
</code></pre></div>
<p><strong>Syntax</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code> &lt;a href="link"&gt;Link Text&lt;/a&gt;
</code></pre></div>
<p><a> → Anchor tag</p>

<p>href → Destination address</p>

<p>Link Text → Text shown on the webpage </p>
<div class="highlight"><pre class="highlight plaintext"><code> Css overveiw
</code></pre></div>
<p>1*<em>.Inline Css:</em>*</p>
<div class="highlight"><pre class="highlight plaintext"><code> Inline CSS is a way to apply CSS styles directly inside an HTML tag.

The style is written using the style attribute.

Inline CSS affects only one element and is used for quick styling.
</code></pre></div>
<p>syntax :<br>
<p style="color: red;">This is a red paragraph</p></p>

<p>Example:</p>

<p><p> → HTML tag</p>

<p>style → attribute used for CSS</p>

<p>color → CSS property</p>

<p>red → value</p>

<p>Internal CSS</p>
<div class="highlight"><pre class="highlight plaintext"><code> Internal CSS is used to style a webpage by writing CSS code inside the &lt;style&gt; tag, which is placed inside the &lt;head&gt; section of an HTML file.

 Internal CSS is useful when you want to apply styles to one single webpage.
Enter fullscreen mode Exit fullscreen mode

</code></pre></div>
<p><strong>Internal CSS Syntax</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code>selector {
property: value;
</code></pre></div>
<p>}</p>

<p>Internal css with example class </p>

<p>CSS Styling</p>
<div class="highlight"><pre class="highlight plaintext"><code> CSS is used to make the page look good.
</code></pre></div>
<ul>
<li>{ padding: 0; margin: 0; }
removes default spacing from all elements.</li>
</ul>

<p><h1></p>
<div class="highlight"><pre class="highlight plaintext"><code>Is centered, colored white, and given some bottom margin.
</code></pre></div>
<p>header has a black background and padding to create space.</p>

<p><nav></p>
<div class="highlight"><pre class="highlight plaintext"><code> A ligns links to the center.

a styles the links with white color, no underline, and spacing between them.
</code></pre></div>

Top comments (0)