My Third week at Jadu Jobs

It was very wonderful experience of successfully completing 3 weeks at Jadu Full Stack Web Development Fellowship and now I’m able to implement CSS on HTML pages to increase the beauty of webpage.

Technical Portion

In this section, I will share my experience of learning CSS essentials and intermediate level of CSS with you.

Photo by Pankaj Patel on Unsplash

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is designed to enable the separation of presentation and content, including layout, colors and fonts.

CSS — The Essentials

In this week, I have learned how can we link style sheet to HTML page and what are the ways of linking CSS and what is the better way in my point of view.

There are three ways of linking CSS to HTML.

  1. Inline CSS

Inline styles look and operate much like CSS, with a few differences. Inline styles directly affect the tag they are written in, without the use of selectors.

2. External CSS

External CSS contains separate CSS file which contains only style property with the help of tag attributes. CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.

3. Internal CSS

An internal stylesheet holds CSS rules for the page in the head section of the HTML file.

CSS — The Intermediate

This section contains Id selector, class selector, attribute selector and box model of CSS.

  1. Id selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

2. Class Selector

class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.

3. Attribute Selector

The CSS Attribute Selector is used to select an element with some specific attribute or attribute value. It is an excellent way to style the HTML elements by grouping them based on some specific attributes and the attribute selector will select those elements with similar attributes

4. Box model in CSS

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model

  • Content — The content of the box, where text and images appear
  • Padding — Clears an area around the content. The padding is transparent
  • Border — A border that goes around the padding and content
  • Margin — Clears an area outside the border. The margin is transparent

Fellow at Jadu Full Stack Development Program