Styling webpage using CSS in Angular 4

Posted by

Styling webpage using CSS in Angular 4

https://youtu.be/8uJPAWGQJrU

CSS, which stand for Casecadding Stylesheet is a style sheet language used for describing the presentation of a document, which is written in a mark-up language. Moreover, you can use it in multiple ways like an inline stylesheet, internal stylesheet, and external stylesheet.

In Angular 4, you can give style to your webpage by adding some CSS to it. But the question is how to add it to your Angular document. Here I have an Answer.

Let’s consider the Angular Directory first:

First-angular-app
  .idea
  e2e
  node_modules
    src
      app
        app.component.css
        app.component.html
        app.component.spec.ts
        app.component.ts
        app.module.ts
    assets
    environments

Here in the above directory structure, you will see the folder name app.component.css. You can write all your code here in this file. Let’s open the file name app.component.html and write some mark-up tags here:

Styling webpage using CSS in Angular 4
CSS with Angular 4

app.component.html

Let’s take header in your first Angular page and then take a CSS class for it in app.component.css file.

<div class="header-background">
  <p class="font"> Header if the Page </p class="font">
</div>

app.component.css

.header-background{
  Background-color: green;
}

.font{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
  font-size: 30px;
  font-weight: bold;
}

Now take a content <div> for content and describe the presentation in css file.

<div class="content">

<h1 class="header1"> Welcome to our page </h1>

<h3 class="header2"> About Podina Tutorials </h3>

<p class="para">
Podina Tutorials is an online website, where you can learn with your 
own pace anytime Anywhere. We are present on multiple platform to 
serve you. You can visit our website www.podinatutorials.com or by 
visiting our YouTube channel. You can also like our Facebook page.
</p>

</div>

CSS for above file is given below;

.content {
  Background-color: yellow;
}

.header1{
  Color: Red;
  font-size: 30px;
  font-weight: bold;
}
.header3{
  Color: Orange;
  font-family: "Times New Roman”;
  font-style: italic;
}

.para{
  Color: black;
  font-family: "Times New Roman”;
  font-style: italic;
}

Now take a footer <div> tag for footer and describe it in CSS files.

<div class=”footer”>
  <p class=”link”> Copyright @ PodinaTutorials.com 2018 </p>
</div>

CSS file for the above footer is given below:

.footer{
  Background-color: pink;
}

.link{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
}

Now let’s combine all the HTML and CSS file together. The complete code of HTML and CSS file is given below:

Also Read  How to Run First Application in Angular 4

app.component.html

<div class="header-background">
  <p class="font"> Header if the Page </p class="font">
</div>

<div class="content">

<h1 class="header1"> Welcome to our page </h1>

<h3 class="header2"> About Podina Tutorials </h3>

<p class="para">
Podina Tutorials is an online website, where you can learn with your 
own pace anytime Anywhere. We are present on multiple platform to 
serve you. You can visit our website www.podinatutorials.com or by 
visiting our YouTube channel. You can also like our Facebook page.
</p>

</div>

<div class=”footer”>
  <p class=”link”> Copyright @ PodinaTutorials.com 2018 </p>
</div>

app.component.css

.header-background{
  Background-color: green;
}

.font{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
  font-size: 30px;
  font-weight: bold;
}

.content {
  Background-color: yellow;
}

.header1{
  Color: Red;
  font-size: 30px;
  font-weight: bold;
}
.header3{
  Color: Orange;
  font-family: "Times New Roman”;
  font-style: italic;
}

.para{
  Color: black;
  font-family: "Times New Roman”;
  font-style: italic;
}

.footer{
  Background-color: pink;
}

.link{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
}

Conclusion

CSS is an important aspect of any beautiful and successful website. Moreover, CSS is used in most of the designing framework like bootstrap. In Angular 4, you can also take an advantage of CSS. All you need to have is a basic understanding of it. If you don’t know about CSS, then you can look to one of our series HTML5/CSS3 course for Beginner.

Suggested Book

HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days

Welcome to this training for the Kindle edition of “HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 24 Hours”. This book contains the steps, strategies, and information you need to learn HTML5 and CSS3.

Leave a Reply

Your email address will not be published. Required fields are marked *