Skip to main content

9/100: Getting Started with CSS(Cascading Style Sheets).

 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?

  1. 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.

  2. 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.

  3. Easy maintenance:
    • To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

  4. 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.

  5. 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.

  6. 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?

CSS can be used in a HTML document in 3 ways:

  1. 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:
<p style="color: red;">This is my first web page.</p>
  1. 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:
<head>
    <title>Internal CSS</title>
    <style type="text/css">
        h1{
            color: yellow;
        }
        p{
            color: red;
        }
    </style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first web page.</p>
</body>

  1. 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:



Labels:
Location: United States

Comments

Post a Comment

If you have any doubts, Please let me know.