HOW DO WEBSITES LOOKS SO GOOD?

12 min readNov 19, 2020

Everyday we view many websites and pages.
Have you ever thought how come they look so good and attractive or how the images are appeared, text are colored and styled???
I will show a short description about them!!!

CASCADING STYLE SHEET

Css stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on page on other media. It can control the layout of multiple web pages all at once.
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Example:

Explanation:
Here we did the styling using css colors. We have given some css properties to the page.

For detailed reference:
Refer: https://www.w3schools.com/css/css_syntax.asp

CSS Syntax

A css rule set consists of a selector and declaration block:

Example:

Explanation:
p is a selector in CSS (it points to the HTML element you want to style: <p>).
Color is a property, and red is the property value.
Text-align is a property, and center is the property value.

For detailed reference:
Refer:https://www.w3schools.com/css/css_syntax.asp

Three Ways To Insert Css

There are three ways to insert a style sheet:
a. Inline Css
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
Example:

Explanation:
Here we have done inline styling and we have applied a unique style to the elements <p> and <h1>.

b. Internal Css
An internal style sheet may be used if one single HTML page has a unique style .The internal style is defined inside the <style> element, inside the head section.
Example:

Explanation:
Here we have defined the styling properties inside the <style> element.

c. External Css
With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
Example:

Explanation:
Here we have included a reference to the external style sheet inside the <link> element, inside the head section.

For detailed description:
Refer: https://www.w3schools.com/css/css_howto.asp

Css Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers. A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
Example:

Example explained:
Here we can see that the css comment is placed inside the <style> element and it starts with /* and ends with */.

For detailed description:
Refer:https://www.w3schools.com/css/css_comments.asp

Css Color

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Example: Tomato, Orange, Violet, etc.
Css color values
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
Same as color name “Tomato”:

By using these colors and color values we can set background color, text color, border color, etc.
Example:

Here we have used different color codes like rgb(red ,green, blue), hex(hexa decimal color), hsl (hue ,saturation ,lightness), rgba(red, green, blue, alpha), hsla(hue, saturation, lightness, alpha) for coloring .The value of rgb varies from 0–256 for each color and value for alpha varies from 0–1.

For detailed reference:
Refer:https://www.w3schools.com/css/css_colors.asp

Css Background

The CSS background properties are used to define the background effects for elements.
Here, are some CSS background properties:
a. Css Background-color
The background-color property specifies the background color of an element.
Example:

Example explained:
Here, we have given a background-color to the body inside the <style> element.

b. Css Background-image
The background-image property specifies an image to use as the background of an element.

Example:

Explanation:
Here, you can see that we have used a background-image for the body inside the <style> element.

c. Css Background-repeat
The background-image property repeats an image both horizontally and vertically.
Example:

Explanation:
Here, you can see that we have introduced a background-image and we had given it a horizontal repeat.
d. Css Background-attachment:
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).
Example:

Explanation:
Here, we have introduced a background-image and we have fixed the background-image property.
e. Background-Shorthand Property:
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

Example:

Example explained:
Here, we have introduced all the background properties in one single background property.

For detailed reference:
Refer:https://www.w3schools.com/css/css_background.asp

Css Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.
Here, are some css border properties:

a. Border Style: The border-style property specifies what kind of border to display.
b. Border width: The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
c. Border color: The border-color property is used to set the color of the four borders.
d. Css border shorthand property: To shorten the code, it is also possible to specify all the individual border properties in one property. The border property is a shorthand property for the individual border properties.
Example:

Explanation:
Here, we have used different border properties in there respective classes.

For detailed reference:
Refer:https://www.w3schools.com/css/css_border.asp

Css Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
Example:

Explanation:
Here, you can see that we have given specific margins to each side of the element.

For detailed reference:
Refer:https://www.w3schools.com/css/css_margin.asp

Css Padding

The CSS padding properties are used to generate space around an element’s content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
Example:

Explanation:
Here, we have given padding to the particular element.

For detailed reference:
Refer:https://www.w3schools.com/css/css_padding.asp

Css Height & Width

The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.
Example:

Explanation:
Here, we have given specific height and width to the <div> element.

For detailed reference:
Refer:https://www.w3schools.com/css/css_dimension.asp

Css Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
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:

Example:

Explanation:
Here we have introduced a css box model where we given a particular background-color, width, border, padding, margin to the <div> element.

For detailed reference:
Refer: https://www.w3schools.com/css/css_boxmodel.asp

Css Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.
Example:

Explanation:
Here, we have given different outline properties to the <p> element.

For detailed reference:
Refer:https://www.w3schools.com/css/css_outline.asp

Css Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.
Here, are some css font properties:
a. Font Family: The font family of a text is set with the font-family property.
b. Font Style: The font-style property is mostly used to specify italic text.
c. Font Size: The font-size property sets the size of the text.
Being able to manage the text size is important in web design.
Always use the proper HTML tags, like <h1> — <h6> for headings and <p> for paragraphs. The font-size value can be an absolute, or relative size.
d. Font Shorthand Property: To shorten the code, it is also possible to specify all the individual font properties in one property.

Example:

Explanation:
Here, we have used different css font properties with there respective classes.

For detailed description:
Refer:https://www.w3schools.com/css/css_font.asp

Css Links

With CSS, links can be styled in different ways.
Example:

Explanation:
Here, we have styled a link by giving it a color.

For detailed reference:
Refer:https://www.w3schools.com/css/css_link.asp

Css Lists

a. Set different list item markers for ordered lists.
b. Set different list item markers for unordered lists.
c. Set an image as the list item marker.
d. Add background colors to lists and list items.
Example:

Explanation:
Here, we have added an image as list item maker using the list style image property.

For more detailed reference:
Refer:https://www.w3schools.com/css/css_list.asp

Css Tables

The look of an HTML table can be greatly improved with CSS .
We can do it by using the following css properties:

a. Table Borders
To specify table borders in CSS, use the border property.
Example:

Explanation:
Here, we have given the border to the <table>, <th>, <td> elements using the border style.

b. Table Size
The size of a table are defined by the width and height properties.
Example:

Explanation:
We have given the size to the table by giving height and width property to <table> and <th> elements.

For detailed reference:
Refer:https://www.w3schools.com/css/css_table.asp

Css Units

CSS has several different units for expressing a length.
Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
Example:

Explanation:
Here, we have used css units for expressing length for the <h1> and <p> elements.
For detailed reference:
Refer: https://www.w3schools.com/css/css_units.asp

Css Display
The display property specifies if/how an element is displayed.

Example:

Explanation:
Here, we have given the display property as none that means hidden class elements would not be visible.

For detailed reference:
Refer:https://www.w3schools.com/css/css_display_visibility.asp

Css Max-width

Using max-width will improve the browser’s handling of small windows. This is important when making a site usable on small devices.
Example:

Explanation:
Here, we have set the width and max width for the different <div> elements .

For detailed reference:
Refer:https://www.w3schools.com/css/css_max-width.asp

Css Position property

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
Example:

Explanation:
Here, we have given different positions like static, relative, absolute, fixed to the different <div> element.

For detailed reference:
Refer:https://www.w3schools.com/css/css_positioning.asp

Css Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
We can use different owrflow properties like- visible, hidden, scroll, auto.
Example:

Explanation:
Here, we have used different owerflow properties like hidden and visible for the <div> and <p> elements.

For detailed reference:
Refer:https://www.w3schools.com/css/css_overflow.asp

Css Float

The CSS float property specifies how an element should float.

Example:

Explanation:
Here, we have used the float property right for the image inside the <style> section.

For detailed description:
Refer:https://www.w3schools.com/css/css_float.asp

Css Selectors

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
a. Descendant selector (space)- The descendant selector matches all elements that are descendants of a specified element.
b. Child selector (>)-The child selector selects all elements that are the children of a specified element.
c. Adjacent sibling selector (+)-The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
d. General sibling selector (~)-The general sibling selector selects all elements that are siblings of a specified element.
Example:

Explanation:
It is an example of the descendent selector and it matches all the descendants of the specified <div> elements.

For detailed reference:
Refer:https://www.w3schools.com/css/css_combinators.asp

Css Pseudo classes

A pseudo-class is used to define a special state of an element.
For example, it can be used to:
a. Style an element when a user mouse over it.
b. Style visited and unvisited links differently.
c. Style an element when it gets focus.

Syntax:
The syntax for pseudo class:
selector:pseudo-class {
property: value;
}
Example:

Explanation:
Here, we have used pseudo classes to style an element.
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

For detailed reference:
Refer: https://www.w3schools.com/css/css_pseudo_classes.asp

Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
a. Style the first letter, or line, of an element.
b. Insert content before, or after, the content of an element.
Syntax:
selector::pseudo-element {
property: value;
}
Example:

Explanation:
Here, we have used pseudo elements to style the first letter and first line by using it’s specific syntax.

For detailed reference:
Refer:https://www.w3schools.com/css/css_pseudo_elements.asp

Opacity

The opacity property specifies the opacity/transparency of an element.
The opacity property can take a value from 0.0–1.0. The lower value, the more transparent: