• 4
    • 0
    • 0
    • 0
    • 0
    • 0
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.

What is CSS?

CSS stands for Cascading Style Sheets, it will describe how HTML elements are displayed on a web browser, we will be focusing on the web browser side of things but with CSS you can also style how you want a page to look like when you print or if there are other types of media, you may want to display things a different way. HTML is the standard markup language for Web pages and it stands for Hyper Text Markup Language. Bear with me, this will all make sense at the end. The HTML elements are the building blocks of HTML pages and HTML elements are represented by <> tags.

It's these <> tags that the CSS can manipulate to how you want your page to look like, once you have learnt the basics you will be able to learn the more advanced stuff where your only limit will be your imagination.

I'm not a professional but I will show you my way

Now let me make this clear I'm not a teacher or a professional at this so I'm sure there are people out there who probably know way more than I do when it comes to CSS but for what I use it for it works fine for me and I use it on my articles on Dropscribe. I will show you how I do it and how I created my own articles.

"warning: if you are going to use CSS make sure you fill in the title description on Dropscribe or else if someone posts your article on social media it will display parts of the CSS code"

Always fill in the title description

If you don't fill in the title description, you will see the style code appear like this on twitter for example

let us start off by writing something in the main box where we will write our article. I just want to show you what HTML language looks like, I will start off with a title called Cascading Style Sheets and make that my header 1, if you go to the style button on the panel you will be able to select header 1, you can highlight the text or just click your cursor on that specific line. This a Dropscribe standard style for a header 1.

Select Header 1

Then just to make it easy, I'll put a paragraph in like so, if your paragraph has taken on the form of your header 1 tag the just highlight it or click your cursor anywhere in that paragraph and go to the style button on the panel and select normal. This a Dropscribe standard style for a paragraph.

You should have something like this

Now for the great unveiling, if you click on the code view button you will see what HTML code looks like.

This is what the code will look like

If you type all your text in Dropscribe you will have no problems, the code will look like the image above but if you copy and paste your text from another site or programme the code may look like this.

This is what the code will look like if you copy and paste into the editor mode

What has happened here is it has not only copied the text but it has copied the style as well and placed it all in the element tags, nothing wrong with that but might be a headache to make your own style, the other thing is the code can be very repetitive, each time you copy and paste it will just repeat the code on every individual element tag, plus it might add in extra characters that you don't need.

Now when I do my articles I like to write them in my writing programme then I would copy and paste it into dropscribes code view so believe it or not it's quicker for me to write in HTML code if I want to use my own styling but it's up to you what way you want to do things, if you just type in dropscribe you should be fine when doing your custom styling. Once we have got to grips with some styling basics I will show you how I do things.

lets start with the HTML

The majority of HTML element tags have a start tag and an end tag. Lets start off with an element tag which will apply for your heading, there are a few heading tags h1 to h6, the h1 is considered the most important tag, and the h6 is the least important, I normally just use the h1 and h2 tags and on rare occasions an h3 tag. I use the h1 tag as my main title and the h2 as a subtitle which I use if I want to break down my article into different sections or topics.

A h1 tag will have a start tag like this <h1> and its end tag will look like this </h1>.

So your h1 title with its HTML element tags will look like this

<h1>Cascading Style Sheets</h1>

if you wish to use a header 2 or any of the other headers they would look like this.

<h2>Cascading Style Sheets</h2>

<h3>Cascading Style Sheets</h3>

<h4>Cascading Style Sheets</h4>

<h5>Cascading Style Sheets</h5>

<h6>Cascading Style Sheets</h6>

The next HTML element tag will be a paragraph tag, this will also have a start and an end tag, like this

<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>

Each paragraph you have must have a start and end tag.

<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>Let us start off by writing something in the main box where we will write our article.</p>

Ok so now let us do everything in code, go into code view and make a title and a paragraph. I like to space out my tags so it's easy for me to read and follow, this doesn't affect the styling or the document.

This is what the code will look like, nice and clean

If you find that the display of the code view is too small then just click on full screen to expand, you can always click on the button again to go back to normal size. once you have written your code click on code view to go back to normal edit mode and you will see what you have written.

Now, let us look for some fonts that we want to use in our article.

Finding your font

Dropscribe has a few fonts to style your text but we are here to get our own style. The best place for this is Google fonts. look for a font for your heading and another style for your paragraph. You can use one style for both but I normally have separate fonts for my headings and my paragraphs.

Have a good look around on Google fonts and play around with the sizes and the font weights each font has to offer such as bold, thin and so on. Also if you click on see specimen and scroll down you will be able to see what popular pairings go with the font you like, Once you have selected the font you want just click on the plus icon.

Click on see specimen

Popular Pairings with Roboto

Click the plus button when you have found your font

Once you have chosen your font or fonts, there will be a little box at the bottom right saying family selected, if you click on that it will slide open, select customize and it will show you the font weights of the fonts you selected, take note that not all fonts will have much to choose from, select what font weights you will be using, the less you choose the faster the article will load so try to choose only what you are going to use for your article. For the languages sections, I just leave it on Latin. After you have done that select embed, there you will find a link code.

Open the Family Selected panel

Go to customize

Select embed and you will see a link code

Don't close the google fonts page just yet as we will be needing more info from there in our next step but for now copy the link code and paste that at the top of your code above your title tag, you have now set an external link for your fonts so when we make the CSS it will know what font to look for.

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


<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>

Styling your fonts

Next, we will have to create a style sheet, this is the part where the magic happens, this is the part where the CSS will tell the HTML elements how to look. We must create a start and an end tag for the style, which will look like this;

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


<style></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>

All the styling info will be placed in between the start tag and end tag just like how we did on the h1 title and paragraph tags. Let us style the paragraph first with the new font that we chose on Google fonts, the paragraph will be easy to start with as I had issues with the heading title but I have a fix around for that. In between the style tags put in;

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


<style>

p {}

</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>

This will be where you will put all your styling for your paragraph, then we will go back to google fonts and in the box where you got the link for the fonts just copy the CSS rule for the font family and place that in-between the curly brackets like so, obviously your font might be different to what I have chosen.

Copy the font family and paste it into your CSS

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


<style>

p { font-family: 'Roboto', ; }

</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>

You don’t have to have the styling all in liner you can also put things on a separate line so it would be easy for you to read, like so;

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


<style>

p {

font-family: 'Roboto', ;

}

</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>

Now your font might not work straight away, that’s because you will have to add one of the following to your font family, serif, sans-serif, monospace, cursive or fantasy.

<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;

}

</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>

These are know as generic fonts which is a system of fallbacks that CSS provides because not all fonts are available on all computers, the way it works is you list the font that you want first but if it’s not available on that computer then it will select the generic font. The 5 generic fonts would be available on all computers. As far as I know because we are calling an external link from google fonts, the custom font we choose should work but I guess it’s good to always have a fallback font incase of any unexpected issues, but like I said before I ain’t no professional.

Anyway now that we have the font style working with our paragraph we can set a size to the text, since this is CSS you have options from using pixels, Em or a combination of Percents and Em. What’s the difference between using Pixels and Em, using Pixels for your text size gives you full control over the text size, people can still use the zoom tool to resize the entire page, if you use Em this will let the user resize the text in the browser menu. The default text size on a browser is 16px so 1em is equal to 16px, if you put 2.5em that is equivalent to 40px. If you want to use an Em that is equivalent to 18px then the formula will go like this, 18px/16=1.125em, Let us put a size into our CSS for our paragraph.

<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: 1.125em;

}

</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>

If you are using pixels it will look like this, I’ll be using px for the rest of this 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;

}

</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>

Next we will give the text some color. There are a few values that color can be specified by, you can use a color name such as “Red”, “Green” and so on, you can use a Hex value which would look like this “#ffffff” which would be white, you can use an RGB value which would look like this “rgb(255, 0, 0)” which would represent red.

I’m going to share a link with you of a HTML color picker which will help give you Hex values and RGB values, it’s so easy to find the color you want using this.

I’ll use the color black for this example on the paragraph, it will make life easy. If you use a color name it will look 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: black;

}

</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>

If you use RGB it will look 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: rgb(0, 0, 0,);

}

</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>

If you use Hex it will look like this. I’ll be using Hex for the rest of this 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;

}

</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 looks at text alignment next, you have a few options for this but I’ll focus on “Left”, “Right”, “Center” and “Justify”, this is self explanatory really left means your text will be aligned to the left, right it will align to the right and centre means it will centre the text, justify will stretch the lines so that each line has equal width. I normally use left for my titles and justify for my paragraphs but you can choose what you like. Let me set up my text alignment and show you what that would look like.

<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;

}

</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>

Setting up your font weight will display how thin or think your characters will be. If you remember when you went on google fonts you was able to select font weights so if your link to google fonts looks something like this;

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

You will see the name of the font, in this case Roboto followed by the font weights “300”, “400”, “500” and so on, yours might look different depending on what font weights you chose but should have some numbers. If yours has no numbers it means it only has normal size. The numbers are from from 100 to 900, 100 will be the thinnest and 900 would be the thickest, 400 is the same as normal size font and 700 would represent bold, so in CSS your font weight will look 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;

}

</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>

If your link to google fonts looks like this;

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

You will notice that some of the numbers have an “i” in front, “300i”, “400i” and so on, these mean italic so if you want to use that specific font weight in italic style you will need to use the font style;

<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;

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>

Take note that if you do use an italic font style all your paragraphs will be in italic. If you just want one word to be in italic then you will have to use an italic element which looks like this;

<i></i>

So if I wanted “CSS basics” on this paragraph to be italic it would look like this;

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

if you want to use bold as a font weight you can just type in bold or use the numerical weight such as 700 but again it will make all the paragraph bold.

<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: bold;

}

</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>

If you just want a word to be in bold you can use the bold element just like the italic, which will look like this;

<b></b>

So in a paragraph it will look like this;

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


End of Part one

Ok so I’ll wrap this article up here for now and in the next one we will look into how to make your headers work in Dropscribe with CSS because unlike the paragraph there is an element I have to use to make it work for some unknown reason to me but it works, plus I’ll go into how you can give two paragraphs it’s own different styles. Hopefully this has been clear and that you have learnt something at least.

If you want to learn more about CSS I’ll leave you this link to w3schools on CSS, I’ll also leave a link to a list of CSS reference to the different properties so you can play around adding more to your CSS.


Join Dropscribe

Why not join dropscribe, it’s a good way to make money 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 and you decide to use their Dex service you and Me will receive $5 in Drops once you have complete your first Dex cycle, if you want to know more about Dex click here, you will also get 10% off all premium services for life.

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

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