कौन कहता है कि आसमां में सुराख नहीं हो सकता,
एक पत्थर तो तबियत से उछालो यारों...!
यदि मन में चाह हो, कुछ कर दिखाने का जज्बा हो,
तो इन्सान कर ही दिखाता है |
So, friends, let’s start the journey “Exploring the World of Web” in a new way. This is the first meetup co-presented by the GDG Patna and Khabai Tech in the special month, “February”. I think you all are thinking, why I am saying February , a special month. Because this is the leap year, February has 29 days , and this First Meetup was held on the last day of February, that is, on 29th Feb 2020.
Hey there, this is Bikki , a Full Stack Developer and Speaker of this event. I think all of you heard about the public speaker. What is it? What is the role of public Speaker?
Literally friends, this was my first meetup as a speaker. As a developer I have participated in many sessions, events and Meetups. I had no experience in public speaking or giving a presentation. I know people gain this skill in their school life , but I never participated in any speech competition, annual event in my school life. It was really a challenge for me to present, in front of a lot of people. So I was very nervous. There were two more speakers rather than me. They were also nervous because it was also their first meetup.
“Being nervous is not bad, it just means something important is happening.”
And the time had come, to begin the event. It was a good thing that my presentation was the last one. But were in the last, so what happened, the presentation was there. As my presentation time approached, I became more nervous, my body began to shake.
Wait wait !! don’t panic ‘मुझे कोई बीमारी नही है , but जब भी मैं nervous होता हु मेरा बॉडी शेक करने लगता है | And guys ‘वो घरी आ गयी जिसका मुझे था इंतज़ार’, it means time of my presentation. And then, Host Tanvi invited me to the stage. And believe me guys, as soon as I went on stage to start my presentation , I forgot everything which means everything that I have to present. My heart-beat started beating , then I took a deep breath and started my presentation . And, as I started presenting, my fear disappeared slowly .
“You can speak well if your tongue can deliver the message of your heart.”
The topic of my presentation was CSS. So guys, I know that you all are thinking about CSS, what is it? How and where to use it? Therefore, here I would like to describe the overview of this topic.
So, Let’s Start,
The full form of CSS is “Cascading Style Sheet”. It is a style sheet language that tells a browser, how to present an HTML document , or any other markup language .
A CSS document is built on a hierarchy, which is what “cascading” refers to. I'll explain this cascading at last.
Now the term is, What is Style Sheet?
A style sheet is a template of font and layout settings to apply a standardized look and feel to HTML documents.
In short, we can say CSS is a means of stylizing HTML content. "If HTML content alone is a freshly-built house, the CSS is the furnishings, decor, amenities and everything else extra that turns it into a home."
Like everything it also has its Syntax
The selector is the element’s tag name you’re applying styling to: h1, p, img, a (hyperlinks) are all examples of elements you can format.
A declaration is the style parameter you set. If you’re telling <h2> tags to render in the color blue, that is a declaration.
Property and value go hand in hand. The property is what type of style you’re declaring: font-family, font-size, color, line-height, etc.
The value is the specific styling, so for font-family: Helvetica;, the value is Helvetica. For font-size: 20px; the value is 20px.
Basically, the property is on the left side of the declaration’s : and the value is on the right. When you have several declarations, separate them with a ‘;’ .
Now, the next term is Where does CSS live in an HTML document?
So, there are three ways to incorporate CSS in an HTML page and that is:
Let’s study the overview
1) External CSS → In this CSS, you have to create two separate files named HTML and CSS. And you have to link the css file with the html file. And It’s very simple to link a style sheet within an HTML document. You’ll need the <link> tag, which is self-closing.
And your css link look like this
2) Internal CSS → If you don’t want to make a new stylesheet then simply nest the <style> tag inside the <head> tag, so that <style> is a child of <head> , like so:
3) Inline CSS → Inline styles allow you to stylize a specific element in an HTML document, so they do look a little different from internal styles (but not by much). Instead of nesting a tag within a tag, you directly apply inline styles to an open tag using the style attribute.
So, this was the overview of the three ways:
And now we will discuss the most important term of CSS and that is the “class” and “id”.
So, you can select an HTML element by tag, but that’s not all. Since HTML tags can include attributes, there’s one attribute in particular you can also use to select HTML elements. This is called the class attribute.
Think of a class attribute like an anchor or jump link on a web page. A jump link is a hyperlink that takes you to another spot on the same page using a matching keyword or phrase. That’s similar to how the class attribute works. You assign the tag’s class attribute a value, usually a descriptor, like this:
h2 is the tag where we added a class attribute and gave it a value of "purple". Now, we need to anchor .purple to the style sheet. We do this the same way we did with element tags, only to indicate that this is a class attribute we’re selecting, it needs to have a period before it:
The class attribute value is "purple" and .purple is the CSS selector. The CSS selector and the class attribute value must match.
You can add style to a single element block with an id attribute, which works very similarly to the class attribute. This comes in handy when only a single content block in an email needs a particular styling. The only difference when using an id attribute instead of a class is that the id selector on the style sheet needs a # before it.
Say we have this line of code:
The id selector on the style sheet will be set up like this:
So, guys this was the overview of my topic CSS.
And finally I would like to thank all the attendees for listening and making my presentation successful.