• 1
    • 0
    • 0
    • 0
    • 0
    • 0
In this Article we will be looking at how we can give different paragraphs it’s own different styles and how to make your headers work in Dropscribe with CSS

How to give styles to different paragraphs

So in the last article I was showing how to style your paragraph but what if you wanted to have two paragraphs to have their own styles. Well first let's say you want to have a main style for your general paragraph which we know how to do already, if you want to have a different style for another paragraph you would have to give it a HTML class attribute.

A class attribute is used to define equal styles for elements with the same class name, so for example all paragraph tags with the same class attribute will get the same style. obviously you can use the class attribute with more or less any tag such as H1, which we will come to later on.

Below I will put the CSS we made with the HTML elements from the last article, just to refresh your memory:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">


<style>

p {

font-family: ‘Roboto’, sans-serif;

font-size: 18px;

color: #000000;

text-align: justify;

font-weight: 400;

}

</style>


<h1>Cascading Style Sheets</h1>


<p>This article will show you some CSS basics on how to style your article, I will also put links to sites where you can learn more for free.</p>

Lets put in two more paragraphs;

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">


<style>

p {

font-family: ‘Roboto’, sans-serif;

font-size: 18px;

color: #000000;

text-align: justify;

font-weight: 400;

}

</style>


<h1>Cascading Style Sheets</h1>


<p>This article will show you some CSS basics on how to style your article, I will also put links to sites where you can learn more for free.</p>


<p>CSS stands for Cascading Style Sheets, it will describe how HTML elements are displayed on a web browser.</p>


<p>HTML is the standard markup language for Web pages and it stands for Hyper Text Markup Language.</p>

What we will do is the first and third paragraph will have the general style which we have already but we will give the second paragraph the new style, first we must give the second paragraph the class attribute with it’s own name, you can name it what ever you like and this would look something like this;

class="name"

So let's add that to our HTML element of the 2nd paragraph. I’ve named my class style “para2” but like I said you can name it whatever you want;

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">


<style>

p {

font-family: ‘Roboto’, sans-serif;

font-size: 18px;

color: #000000;

text-align: justify;

font-weight: 400;

}

</style>


<h1>Cascading Style Sheets</h1>


<p>This article will show you some CSS basics on how to style your article, I will also put links to sites where you can learn more for free.</p>


<p class="para2">CSS stands for Cascading Style Sheets, it will describe how HTML elements are displayed on a web browser.</p>


<p>HTML is the standard markup language for Web pages and it stands for Hyper Text Markup Language.</p>

Now that we have added that, we have to create the new style of what we want this paragraph to look like, so in the style part of our code, to select elements with a specific class, we need to write a period character (.) followed by the name of the class, don’t leave a gap between the period and the name, it should looks like this;

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">


<style>

p {

font-family: ‘Roboto’, sans-serif;

font-size: 18px;

color: #000000;

text-align: justify;

font-weight: 400;

}

.para2 {

}

</style>


<h1>Cascading Style Sheets</h1>


<p>This article will show you some CSS basics on how to style your article, I will also put links to sites where you can learn more for free.</p>


<p class="para2">CSS stands for Cascading Style Sheets, it will describe how HTML elements are displayed on a web browser.</p>


<p>HTML is the standard markup language for Web pages and it stands for Hyper Text Markup Language.</p>

Because we have added the class in the paragraph HTML element, what happens is it will use the style from the main style paragraph first, so if you wanted to use the same font family you don’t need to put that into the new style because it will already use that. Let's say we wanted to change the color, make it italic and make the text 30px but we want to keep the rest the same as the original paragraph, then it would look like this for example;

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">


<style>

p {

font-family: ‘Roboto’, sans-serif;

font-size: 18px;

color: #000000;

text-align: justify;

font-weight: 400;

}

.para2 {

font-size: 30px;

color: #808080;

font-style: italic;

}

</style>


<h1>Cascading Style Sheets</h1>


<p>This article will show you some CSS basics on how to style your article, I will also put links to sites where you can learn more for free.</p>


<p class="para2">CSS stands for Cascading Style Sheets, it will describe how HTML elements are displayed on a web browser.</p>


<p>HTML is the standard markup language for Web pages and it stands for Hyper Text Markup Language.</p>

Example of what the paragraph looks like

You can see how the font family and the text align stays the same as the normal paragraph and that it’s only reacted to the added changes you have put in, obviously if you wanted a different font or add or change anything you can just add it in.

Doing the titles in Dropscribe with CSS

Great now that we have seen how to apply class attributes we will be able to use this for our titles. In normal circumstances the title tags would work just like what we did with the main paragraph styling, like this;

<style>

h1 {

font-family: ‘Roboto’, sans-serif;

font-size: 50px;

color: #000000;

text-align: left;

font-weight: bold;

}

</style>


<h1>Cascading Style Sheets</h1>

But for some reason this doesn’t work in Dropscribe, not sure but they must have some sort of stylesheet that overrides the header tags and styles, so the work around for this problem would be to use a class attribute to style the header. You should be able to do this since we have just covered the subject but I will show an example below, I will use “title1” as my class name.

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">


<style>

.title1 {

font-family: ‘Roboto’, sans-serif;

font-size: 50px;

color: #000000;

text-align: left;

font-weight: bold;

}

p {

font-family: ‘Roboto’, sans-serif;

font-size: 18px;

color: #000000;

text-align: justify;

font-weight: 400;

}

.para2 {

font-size: 30px;

color: #808080;

font-style: italic;

}

</style>


<h1 class="title1">Cascading Style Sheets</h1>


<p>This article will show you some CSS basics on how to style your article, I will also put links to sites where you can learn more for free.</p>


<p class="para2">CSS stands for Cascading Style Sheets, it will describe how HTML elements are displayed on a web browser.</p>


<p>HTML is the standard markup language for Web pages and it stands for Hyper Text Markup Language.</p>

Example of what the title looks like

This was one of the ways I could manipulate the heading tags, the h1, h2, h3 and so on, there are other ways but this was one of the most easiest ways of doing it and it works just fine. Using the class attribute is easy and simple, if you want to know more about CSS I’ll leave the link to w3school on CSS which will teach you more about the subject, plus I’ll leave the link again to a list of CCS references to the different properties. Dropscribe most probably will have it’s own CSS for the site which may override certain elements, but there is always a work around to get past that, just like I showed you with the title tag.

End of Part two

I will end it up here with this article but when I get some time in my next article I’ll get into how to make your links on your article change color when you hover over them by using CSS which should be fun. Well I hope you learnt something today with using class attributes and until next time keep buying the dip.


Join Dropscribe

Why not join Dropscribe, it’s a good way to make crypto from people tipping you, not only that but if you write articles on Dropil you can submit them to the earn drops campaign on the Dropil website where you can make more.

It’s free to make an account on Dropil and you will find loads of other great apps that Dropil do.

If you want to use my referral link to join you can but I don’t mind if you do or don’t, just you joining Dropil would be good enough for me but if you want to use it just click here, if you use my Dropil ref link you will get 10% off all premium services for life.

If you like, you can follow me on Twitter too.

Share Social
Reactions
100000
Continue Reading
Comments (0)
If you would like to comment please login or register