Intro to CSS | General Styling

Learning Intro to CSS | General Styling. Drop your notes and dobuts

1 Like

@sridhanushmedisetty9 Welcome :heart:

2 Likes

@lakshmidurgakuncha nice try. But not exactly what is asked. Try it again.

1 Like

Something Like this one. Happy Coding :keyboard:

1 Like

2 Likes

What we learnt in 08-05-2023 class

1 ] Information of Head tag :
In the Head tag we having the metadata of some external and internal files and in the

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  • In above code 1st meta tag contains compatibility to run on old systems like Internet Explorer.

  • In above code 2nd meta tag showing capability to adjust width and height according to the device. and its initial scale is 1.

  • In the above code 3rd metadata contains external CSS file link.

2] CSS Selectors

  • CSS selectors are used to “find” (or select) the HTML elements you want to style.

  • we can select elements based on name, id, class.
    3] Border :

  • we learnt about border, How to add border in CSS and play with some examples, and playing with Hover effect. border ex. border: 1px solid #fff;
    Margin :

  • margin property are use to create extra space around the content or element.

  • we having properties to setting the margin for each side of an element ( top, right, botoom, and left).

margin-top
margin-right
margin-bottom
margin-left

Padding :

  • padding is used to create space around an element’s content, inside of any defined borders.
  • we having properties to setting the padding for each side of an element ( top, right, bottom, and left).
margin-top
margin-right
margin-bottom
margin-left

@harshitrajlnctcse

1 Like

Today’s notes 08/05/2023
CSS
Introduction

What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Example
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

A CSS rule consists of a selector and a declaration block.

CSS Syntax

A CSS rule consists of a selector and a declaration block.
Syntax:
h1 {
color:black; font-size: 10px;
}
Here:
h1 is Selector.
color:black and font-size are declaration.
color is property and black is value in the declaration.
font is property and size is value in the delcaration.

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example
In this example all

elements will be center-aligned, with a red text color:

p {
color: red;
text-align: center;
}

Example Explained
p is a selector in CSS (it points to the HTML element you want to style:

).
color is a property, and red is the property value
text-align is a property, and center is the property value.

Selectors
CSS selectors are used to “find” (or select) the HTML elements you want to style.

The CSS element Selector
The element selector selects HTML elements based on the element name.

Example

Here, all

elements on the page will be center-aligned, with a red text color:

p {
text-align: center;
color: red;
}

The CSS 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.

Example
The CSS rule below will be applied to the HTML element with id=“para1”:

#para1 {
text-align: center;
color: red;
}
Note: An id name cannot start with a number!

The CSS class Selector
The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class=“center” will be red and center-aligned:

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

Example:

In this example only

elements with class=“center” will be red and center-aligned:

p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.

Example:

In this example the

element will be styled according to class=“center” and to class=“large”:

This paragraph refers to two classes.

Note: A class name cannot start with a number!

The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:

  • {
    text-align: center;
    color: blue;
    }
    The CSS Grouping Selector
    The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example
In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

How To Add CSS:

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

Three Ways to Insert CSS
There are three ways of inserting a style sheet:

External CSS
Internal CSS
Inline CSS
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 element, inside the head section.

Example

External styles are defined within the element, inside the section of an HTML page:

This is a heading

This is a paragraph.

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the “mystyle.css” file looks:

“mystyle.css”
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

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 element, inside the head section.

Example

Internal styles are defined within the element, inside the section of an HTML page:

body { background-color: linen; }

h1 {
color: maroon;
margin-left: 40px;
}

This is a heading

This is a paragraph.

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
Inline styles are defined within the “style” attribute of the relevant element:

This is a heading

This is a paragraph.

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

Assume that an external style sheet has the following style for the

element:

h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the

element:

h1 {
color: orange;
}

Example
If the internal style is defined after the link to the external style sheet, the

elements will be “orange”:

h1 { color: orange; }

Example
However, if the internal style is defined before the link to the external style sheet, the

elements will be “navy”:

h1 { color: orange; }

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

CSS Comments
CSS comments are not displayed in the browser, but they can help document your source code.

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 element, and starts with /* and ends with */:

Example
/* This is a single-line comment */
p {
color: red;
}
You can add comments wherever you want in the code:

Example
p {
color: red; /* Set text color to red */
}
Comments can also span multiple lines:

Example
/* This is
a multi-line
comment */

p {
color: red;
}

HTML and CSS Comments

In the following example, we use a combination of HTML and CSS comments:

Example

p { color: red; /* Set text color to red */ }

My Heading

Hello World!

This paragraph is styled with CSS.

CSS comments are not shown in the output.

CSS Colors
Colors are specified using predefined color names, or RGB values.

CSS Background Color

You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum...

CSS Text Color
You can set the color of text:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum...

Ut wisi enim...

CSS Border Color
You can set the color of borders:

Hello World
Hello World
Hello World

Example

Hello World

Hello World

Hello World

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”:

rgb(255, 99, 71)
#ff6347

Example

...

...

The CSS background properties are used to add background effects for elements.

CSS background-color
The background-color property specifies the background color of an element.

Example
The background color of a page is set like this:

body {
background-color: lightblue;
}
With CSS, a color is most often specified by:

a valid color name - like “red”
a HEX value - like “#ff0000
an RGB value - like “rgb(255,0,0)”
Look at CSS Color Values for a complete list of possible color values.

Other Elements
You can set the background color for any HTML elements:

Example
Here, the

,

, and

elements will have different background colors:

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element’s border.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

CSS Border Style
The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example
Demonstration of the different border styles:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

CODE:

p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

The border-style Property

This property specifies what kind of border to display:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

CSS 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:

Example
Demonstration of the different border widths:

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

CODE:

p.one { border-style: solid; border-width: 5px; }

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

p.five {
border-style: double;
border-width: 15px;
}

p.six {
border-style: double;
border-width: thick;
}

The border-width Property

This property specifies the width of the four borders:

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

Note: The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.

Specific Side Widths
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):

Example
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

CODE:

p.one { border-style: solid; border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */ }

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

The border-width Property

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):

Some text.

Some text.

Some text.

CSS Border Color
The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like “red”
HEX - specify a HEX value, like “#ff0000
RGB - specify a RGB value, like “rgb(255,0,0)”
HSL - specify a HSL value, like “hsl(0, 100%, 50%)”
transparent
Note: If border-color is not set, it inherits the color of the element.

Example

Demonstration of the different border colors:

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
CODE:

p.one { border-style: solid; border-color: red; }

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}

The border-color Property

This property specifies the color of the four borders:

A solid red border

A solid green border

A dotted blue border

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Specific Side Colors

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

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

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:

auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.

Example

Set different margins for all four sides of a

element:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

CODE:

div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue; }

Using individual margin properties

This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.

Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

margin-top
margin-right
margin-bottom
margin-left
So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
Example
Use the margin shorthand property with four values:

p {
margin: 25px 50px 75px 100px;
}
CODE:

div { border: 1px solid black; margin: 25px 50px 75px 100px; background-color: lightblue; }

The margin shorthand property - 4 values

This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.

If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px

Example
Use the margin shorthand property with three values:

p {
margin: 25px 50px 75px;
}
CODE:

div { border: 1px solid black; margin: 25px 50px 75px; background-color: lightblue; }

The margin shorthand property - 3 values

This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.

If the margin property has two values:

margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px

Example
Use the margin shorthand property with two values:

p {
margin: 25px 50px;
}

CODE:

div { border: 1px solid black; margin: 25px 50px; background-color: lightblue; }

The margin shorthand property - 2 values

This div element has a top and bottom margin of 25px, and a right and left margin of 50px.

If the margin property has one value:

margin: 25px;
all four margins are 25px
Example
Use the margin shorthand property with one value:

p {
margin: 25px;
}

CODE:

div { border: 1px solid black; margin: 25px; background-color: lightblue; }

The margin shorthand property - 1 value

This div element has a top, bottom, left, and right margin of 25px.

The auto Value
You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

Example
Use margin: auto:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

CODE:

div { width: 300px; margin: auto; border: 1px solid red; }

Use of margin: auto

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

This div will be horizontally centered because it has margin: auto;

The inherit Value
This example lets the left margin of the

element be inherited from the parent element (

):

Example

Use of the inherit value:

div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}

CODE:

div { border: 1px solid red; margin-left: 100px; }

p.ex1 {
margin-left: inherit;
}

Use of the inherit value

Let the left margin be inherited from the parent element:

This paragraph has an inherited left margin (from the div element).

All CSS Margin Properties

margin :A shorthand property for setting all the margin properties in one declaration
margin-bottom:Sets the bottom margin of an element
margin-left:Sets the left margin of an element
margin-right:Sets the right margin of an element
margin-top:Sets the top margin of an element

CSS Padding
Padding is used to create space around an element’s content, inside of any defined borders.
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).

Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.

Example
Set different padding for all four sides of a

element:

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CODE:

div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; }

Using individual padding properties

This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.

CSS Box Model
All HTML elements can be considered as boxes.

The CSS Box Model
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:

Explanation of the different parts:

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
The box model allows us to add a border around elements, and to define space between elements.

Example

Demonstration of the box model:

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

CODE:

div { background-color: lightgrey; width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }

Demonstrating the Box Model

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

This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

source code - https://codepen.io/patilsagar99047/pen/WNazpzy

@harshitrajlnctcse

1 Like

@pathakdivya93 @patilsagar99047 @lakshmidurgakuncha Very Good :clap:

1 Like

@mspkrish47 Best Design :heart_decoration:

1 Like