In this tutorial we'll dive into the CSS syntax and uses.

Welcome Back !

Welcome back everybody ! :wave:

 

Look at you ! You just made a webpage ! Congraties ! ^^

 

Now,let's proceed.


Stylizing Webpages (And Why It's That Important)

Now,let's talk about stylizing your webpages.

 

You are looking at an example right now.GDU looks like this because of HTML & CSS.And CSS mainly.If you use Firefox,you can press "F12" on your keyboard and you can see Firebug.Which allows you to see the stylesheets and HTML code of the webpage you're currently viewing.If you go around that code,you'll understand most of it.And now choose "Style Editor" in Firebug.You'll see the CSS files.It looks easy yes ? Think twice ! It's MORE than easy.We'll get into the syntax.


The CSS Syntax

Okay.Now let's dive into the CSS Syntax !

 

CSS generally looks like this :

h1 {
font-family: "Ihr Freund Freundtype";
font-color: #FFFFCC;
}
I'll try and explain everything you see up here.

 

The "h1" refers to the element we want to apply our changes to.If you want to apply your change to the whole webpage you can do this :

html {
background-color: #838B8B;
font-family: "Da Awesome Example 80$ Font";
}
Useful for background colours that apply to the whole page or making the whole page use one font.

 

As you can see,I used colors the partially-complicated way.The HEX values.Well,it's not THAT complicated.You can simply google "Hex Color Picker" and here you go.Click a color,copy & paste the HEX value.And you leaned the oh-not-so-complicated way to color stuff in CSS.Congratzz :D

 

And,one of the most important things in CSS,Mr.Semicolon.This guy is the semi-core of the CSS syntax.It kinda tells CSS "Hey CSS,this command is done !" Then never forget to add a small semicolon after each command you write.Or CSS will get angry and add a big red "X" before your line of code.

 

CSS tends to mark you the lines where the syntax errors are.So just look before the line you wrote correct it then boom.

 

...And,last but not least,don't forget to add Mr.CurlyBrace.This guy is positioned one space away from the element you want to modify,and at the end of each uhhh...."Paragraph" of code.An example to not confuse you guys :

p {
font-family: "FancyType";
background-color: #838B8B;
}
h3 {
background-color: #FFFFCC;
font-size: 12px
}
Mr.CurlyBrace is here to help you.

 

PROTIP : When you write for example

p {
background-color: red
}
Changes are applied to all<p> tag contents on the webpage.We'll learn how to select a specific <p> to apply our changes to.

 

And...Comments.They are ignored by browsers and used only if you want to....write anything misc.

 

EXAMPLE

p:nthchild(2) {
color: red /*Mr.Misc Stuff emerges !*/
}

 


The :nthchild() Selector

Okay.Let's start some fancy element selcetion spree.

 

When you have for example tons of <p> tags and a header like this :

<h1>Mr.Heading</h1>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
And this CSS file :
p:nth-child(2) {
    background: blue;
}

 

P1's background color will be changed from white to blue.Try it with a HTML & CSS compiler and see for yourself.


Different Stylesheet Types & Linking CSS Files to HTML

Now to the last section of our tutorial,Linking you HTML & CSS files to see your CSS changes on your HTML webpage.There are 2 ways to style without linking and one other way is to link a seperate CSS file.

 

Internal Stylesheet

 

Don't want to bother making an external Stylesheet and linking it ? Use and internal stylesheet.Write your CSS between <style></style> Tags and bam.Styl'd like a baws

 

EXAMPLE (Confusion-Proof Tactic)

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS Code Here */
</style>
</head>
<body>
<p>CSS Tut</p>
</body>
</html> 

 

The Basic style Thingy

 

This is the first way I styled with HTML.It's fast,easy,and reliable.

 

EXAMPLE :

<p style="color: red">testtestestest</p>

 

And Last,The Separate File Method

 

Prefeered to write your CSS code separatly and confused how to link files ? Here's how you do it.Remember to put this line of code between the <head></head> tags.

 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 


...And Done

That's all folks ! Hope you enjoyed learning the CSS Syntax.See you soon Web Devs !

 

Thank
You

Share


About the Author

Comments

5,396 Posts
3,746 Points

Marked   said 23rd September 2014

Good job on writing this tutorial.

 

I have general comments which you might find harsh, but I think will benefit you.

 

My first general comment would that everything is explained rather poorly. I know HTML and CSS quite thoroughly and looking through the eyes of a newbie, the target audience, I'm not sure they'd pick up much at all. From what I see you're sort of hoping they'll try it out and see how it works because its so simple, and of course they well, but written tutorials need to precede and supplement that. The biggest example I have of the tutorial is using inline styles on elements. Where's the explanation?

 

I think this tutorial has one fatal flaw which will drive your audience away, and that's not explaining CSS selectors. You can't expect a newbie to run before they walk, right? Your example only shows CSS applied to elements, when nearly all styling is applied through classes. This is an imperative aspect before anyone writes any CSS.

 

Another example is the part on comments. What do you mean its ignored by browsers and only use if I want to? That really could have used an explanation on what a comment is in coding, how it useful, best practices etc. "ignored by browsers" is confusing and probably only understood if you actually understand in the first place.

 

So my general advice for every part of the tutorial is to 1. be both thorough and concise, 2. alter your language and level of explanation for your target audience (who in this case, are total laymen).

79 Posts
395 Points

Ultim1337Gamer  said 25th September 2014

Thanks for the explanation.I'll update it when I have time.

Quick Reply

Guest

Enter a username

Security check: What is 8 plus 2?