Website Hosting for Just 20 ForumCoin ~ Advertise on ForumCoin
ForumCoin is an online community where you earn ForumCoin for making posts and for referring other members. You can use the ForumCoin virtual currency to buy and sell goods and services and to exchange for traditional currencies. Find out more!
Get paid up to 150 ForumCoin to submit your article.

Web Development Introduction: CSS

Postby FuZyOn » 08 Dec 2016, 15:36

Continuing this article, we're about to embark on a journey to learn more about CSS and its values. HTML and CSS go hand-in-hand and together they power all of the world's websites. I'm going to give you a brief preview and some historics...

CSS stands for Cascading Style Sheets and is a style sheet language used for the presentation of a document written in markup language. You can add style conditions in HTML directly, but that's why CSS was invented: to enable the separation of document content from document presentation including fonts, alignment, colors etc.
With this separation addition the content becomes much more accessible, provides better flexibility and it can allow multiple HTML files to share the same CSS document.

!PROTIP: If you're looking for CSS basics and documentation don't hesitate to visit the official W3 page.

In the last article we've looked at a basic HTML page...

Image


... that turned out like this...

Image


Now. Let's style it a little bit, shall we?... (before writing CSS, make sure you add a link to your stylesheet in the HTML page's head, like this)

Image


This is the structure of a CSS file, pretty straight-forward in my opinion. Notice that there are styles for every element in the document, I'm going to give you a run down of those but first, the finished product:

Image


color: red is the way you can change color of TEXT in CSS. This piece of code will turn h1's color red.

text-transform: uppercase is an unusual style but extremely useful. Noticed how in the first document the text looked normal? This line will make every "p" element uppercase.

font-size: 24px does exactly what you would expect: changes the text size of a tag. You can also modify a header's size despite its initial, standard condition but it's a pretty rare occasion.

font-style: italic might be pretty hard to understand if you're not familiar with typography. "Italic" means slanted text and font-style helps slant the selected element's text.

Now, these are some basic styles. CSS is much more complex than HTML and fitting everything together will be the hardest challenge you'll face. For now, just start off slow and mess around with styles, that's how I began my journey: curiosity.

Notice how we have two different p elements? Well, if you want to add different styles for both of them you're going to need class/id selectors, but that's another lesson in itself. For now, if you're interested read more here.

That's about it for this brief introduction to CSS. This is a really small fraction of what's ahead of you, but I hope I sparked your curiosity a bit. If you have any questions or anything looked confusing, don't hesitate to leave a reply below.
  • 0

User avatar
FuZyOn
 
Posts: 992
Reputation: 67
ForumCoin: 164

Re: Web Development Introduction: CSS

Postby darkthorn » 08 Dec 2016, 16:48

I am trying to learn CSS e PHP because I would like to do some work at home related with web design. CSS seems easy to learn. I have to learn both because I run a shop in Prestashop and sometimes I need to fix some stuff in the code, like I need to create a landing page with an content warning and I have no idea how to do so.

Do you know any other good site to learn these languages?
Any other computer language you suggest for web design?
  • 0

User avatar
darkthorn
 
Posts: 3,255
Referrals: 1
Reputation: 467
ForumCoin: 342

Re: Web Development Introduction: CSS

Postby FuZyOn » 09 Dec 2016, 15:59

darkthorn wrote:I am trying to learn CSS e PHP because I would like to do some work at home related with web design. CSS seems easy to learn. I have to learn both because I run a shop in Prestashop and sometimes I need to fix some stuff in the code, like I need to create a landing page with an content warning and I have no idea how to do so.

Do you know any other good site to learn these languages?
Any other computer language you suggest for web design?


For web design learn HTML, CSS and Javascript, they're the core. As for the sites, I personally search for courses on Udemy or Coursera.
  • 0

User avatar
FuZyOn
 
Posts: 992
Reputation: 67
ForumCoin: 164



Your Ad Here.

Return to Articles & Tutorials



Who is online

Users browsing this forum: No registered users and 1 guest

cron
Reputation System ©'