Hey, welcome to my blog, this is my Day 9 of 100 Days Web Development Challenge. I started this challenge for myself on 6th October 2023, Friday. My aim for this challenge is to learn the fundamentals of web development i.e. HTML, CSS and JavaScript. I had planned to give 7 to 8 days for learning HTML and guess what, I did it. I learnt the basics of html like: headings, lists, internal and external linking, tables, forms, navigation bar, formatting tags, and adding images. And my journey of learning html is completed. But It's not like I have mastered the language and I know all the topics of html, I'll learn new topics if required in the future. Now, I'm good to move forward.
From today I have started learning Cascading Style Sheets (CSS). Learning CSS is the next step for learning web development. I have discussed below about my todays learning.
Topics:
What is CSS?
- CSS stands for Cascading Style Sheets.
- It is a styling language that works upon the html document.
- It is used to give style to html pages to make them more presentable, means it handles how the website looks.
- CSS defines how a html document is rendered on the browser screen.
- You can give style to html elements with html attributes but CSS has a wider range of styling attributes than html.
- A CSS code can be as small as working on a single html element to defining the appearance of a whole website.
- CSS is fun and easier to use.
- With CSS, we can control the color of texts, the style of fonts, the spacing between paragraphs, what background image or color is used.
Why to use CSS?
- CSS saves time:
- You can write CSS and then reuse same sheet in multiple HTML pages.
- You can define a style for each HTML element and apply it to as many web pages as you want.
- Pages load faster:
- If you are using CSS, you do not need to write HTML tag attributes every time.
- Just write one CSS rule of a tag and apply to all the occurrences of that tag.
- So less code means faster download times.
- Easy maintenance:
- To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
- Superior styles to HTML:
- CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes.
- Multiple Device Compatibility:
- Style sheets allow content to be optimized for more than one type of device.
- By using the same HTML document, different versions of a website can be presented for handheld devices such as mobiles and tablets or for printing.
- Global web standards:
- Now HTML attributes are being deprecated and it is being recommended to use CSS.
- So it's a good idea to start using CSS in all the HTML pages to make them compatible to all browsers.
How to use CSS?
- Inline Style Sheet:
- It is used when we want to apply styling to a single element for a single time.
- The style is given by adding the "style" attribute inside the opening HTML element to which we want to apply the style.
- Always write the inline style in "key:value;" pair followed by a semicolon inside double quotes.
- The inline style sheet has the most importance of all 3 ways.
- For example: changing the color of a paragraph to red:
- Internal Style Sheet:
- It is used when we want to apply style to one single HTML document of a website.
- It is defined inside the <head> element of that web page with <style> tag.
- We write the CSS code inside the <style> element.
- For example:
- External Style Sheet:
- An external style sheet is ideal when the style is applied to many pages of a website.
- With an external style sheet, you can change the look of an entire website by changing one file.
- Each page must link to the style sheet using the <link> tag.
- The <link> tag must be added in the <head> element.
- Inside the <link> tag, the location of the CSS file must be given and the file must have the ".css" extension.
- For example:
<head> <link rel="stylesheet" href="file.css"> <title>External CSS</title></head>
You can check my all the blogs of this challenge below.
All links:
- An external style sheet is ideal when the style is applied to many pages of a website.
- With an external style sheet, you can change the look of an entire website by changing one file.
- Each page must link to the style sheet using the <link> tag.
- The <link> tag must be added in the <head> element.
- Inside the <link> tag, the location of the CSS file must be given and the file must have the ".css" extension.
- For example:
Comments
Post a Comment
If you have any doubts, Please let me know.