by 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...
... that turned out like this...
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)
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:
•
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.
Continuing [url=http://forumcoin.com/viewtopic.php?f=67&t=14515]this[/url] 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...
[b]CSS[/b] stands for [b]Cascading Style Sheets[/b] 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.
[b]!PROTIP[/b]: If you're looking for CSS basics and documentation don't hesitate to visit [url=https://www.w3.org/Style/CSS/]the official W3 page.[/url]
In the last article we've looked at a basic HTML page...
[center][img]http://s.hswstatic.com/gif/html5-2.jpg[/img][/center]
... that turned out like this...
[center][img]http://i.imgur.com/cEWwBOq.png[/img][/center]
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 [url=http://www.w3schools.com/css/css_howto.asp]this[/url])
[center][img]http://i.imgur.com/pSioIQF.png[/img][/center]
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:
[center][img]http://i.imgur.com/oMHQnj0.png[/img][/center]
• [b]color: red[/b] is the way you can change color of [u]TEXT[/u] in CSS. This piece of code will turn h1's color red.
• [b]text-transform: uppercase[/b] 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.
• [b]font-size: 24px[/b] 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.
• [b]font-style: italic[/b] might be pretty hard to understand if you're not familiar with typography. "Italic" means slanted text and [b]font-style[/b] 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 [b]p[/b] 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 [url=http://www.w3schools.com/css/css_syntax.asp]here[/url].
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.