Wednesday, April 15, 2015

More styling... Day -009

 I had literally no idea why my friend suggested me to write a blog. As the days are surpassing I am turning into a better writer (not really) also as a faster typist, not blazing fast but notable indeed. And when you are going to deal with codes you will need faster fingers. Thanks to my friend for the sublime suggestion. :)
 

Hello sweets, tardy hello but let's move on quick!

Standing on the 9th day I would say things are getting tougher and more challenging. No fun without challenging stuffs, right? Farewell; if your answer is no. So, what was so challenging on day 9? What are the things that were assimilated? Let's dive in...Things that I have covered includes

1.Styling using classes.
2.ID's
3.Child Selectors.
4.Pseudo Elements.
5.Few new "Table" elements tags.

1.Styling Using Classes

What if you want to have a section of text with a red font and another with a green font, but do not want to use up all the tags you have for a section of text? Well, using a class allows you to change the style of something without using tags multiple times.Example of a "Class" 



http://www.referencedesigner.com/tutorials/css/images/css_class.png

**Note: Never use parenthesis "." in html!

2.ID's
 The id uses the id attribute of an HTML element to select a specific element.The id must be unique else duplicate ID tags will cause your page to fail validation. In CSS you have to use hashtag (#) to specify an ID.For ex
CSS:

<style type="text/css">
 #blueberry {
                     border: 2px solid blue;}
</style> 

HTML:

<div id="blueberry"> Blueberry Juice is my favorite juice </div>


Note: Never use hashtags in HTML

3.Child Selectors: 

Child selector means relating parent and child.Not father-son relationship lol! Well, in technical terms (in HTML) relationship between one element and another element is called child selectors.For example. <head> is an element and <style> element is written in <head> element so, element <head> is the parent of <style> hence <style> is the child. And with the help of child selectors we can stylize all the information under an element.For example 

<style type="text/css">

p > a {
          color:red;
          font-size:20px; }

</style>

">" sign actually refers to relationships.Here we want to style child "a" (links) from the the parent "p" tag

4.Pseudo elements:

A pseudo-element is used to style specified parts of an element.For example a letter of a word/paragraph.
<style type="text/css">
p:first-letter {
                     font-weight:bold;
                     font-size:30px;
                     color:blue; }
</style>

All the first letter of paragraphs will be changed!

5.Few new table tags: The new tags that I have learned today includes

"Rowspan": It spans the rows works like colspan but this time ROWS.
"thead" :The heading of the table rests on thead
"tbody" : The body of the table sits on tbody and
"tfoot": Footer sits on tfoot. 

As simple as they sounds.
So, that was all for today. Tomorrow we will meet again. And hell yeah keep practicing!!!


0 comments:

Post a Comment