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


Related Posts:

  • Delicate CSS #Day-004 CSS...We all know a bit of CSS I mean what is it,why it is used..right?But how many of us know what CSS stands for? Cascading Style Sheet it is! No idea why it is named like that. Anyway, now I can sense how much stylish web… Read More
  • Introducing Networking! - Computer Science Day 003 The Day 3 began with Computer Networking.Well, A computer Networking is a group of computer systems and other computing devices interconnected through communication channels.Why interconnected? Yes,the answer is simple to s… Read More
  • Playing with CSS Day -008 The previous day I gave words to come back the next day with more interesting things. So, here we go. Well, what CSS can do to beautify a webpage/site? The answer is simple "what can't?" Today I have learned to give some lif… Read More
  • Going back...Day -006 We may stumble and fall but shall rise again.And at the 5th day of the quest I stumbled! The very next day I am up again with more hopes;a whole new robust me.After a devastating exam stepping back to Day01 and Day02 to secu… Read More
  • A week of joyride.. Day 007 Achievement Unlocked-A week of computer science!Like the previous day I  ain't going to recall the studied topics and write the same things.Now I would like to share my experience gained throughout the week.First of all… Read More

0 comments:

Post a Comment