Introduction to CSS

What is Css?
• CSS stands for Cascading style sheets. It describes to the user how to
display HTML elements on the screen in a proper format. CSS is the
language that is used to style HTML documents. In simple words,
cascading style sheets are a language used to simplify the process of
making a webpage.
• With the help of CSS, we can control the colour of text and style of
fonts, and we can control the spacing between the paragraph and
many more things.
Syntax of Css
• h1{color: blue ; font-size:50px}

• 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 semicolon, and
declaration blocks are surrounded by curly braces.
Types of CSS
• Inline CSS : Inline CSS involves applying styles directly to individual HTML
elements using the style attribute. This method allows for specific styling of
elements within the HTML document
<p style =“color:blue”>
• Internal CSS: Internal CSS is defined within the HTML document’s <style>
element. It applies styles to specified HTML elements, The CSS rule set should be
within the HTML file in the head section.
<style>
.main{color: blue} </style>
• External CSS : External CSS contains separate CSS files that contain only style
properties with the help of tag attributes (For example class, id, heading, … etc).
CSS property is written in a separate file with a .css extension and should be
linked to the HTML document using a link tag.
<link rel = “stylesheet” href =“style.css”
CSS Selectors
1.CSS Element Selector : The element selector selects the HTML element
by name.
2.CSS Id Selector : The id selector selects the id attribute of an HTML
element to select a specific element. It is written with the hash
character (#), followed by the id of the element.
3.CSS Class Selector : The class selector selects HTML elements with a
specific class attribute. It is used with a period character . (full stop
symbol) followed by the class name.
4.CSS Universal Selector : The universal selector is used as a wildcard
character. It selects all the elements on the pages.
• CSS Group Selector : The grouping selector is used to select all the
elements with the same style definitions. Grouping selector is used to
minimize the code. Commas are used to separate each selector in
grouping.
Text Properties
• Text-align : left/right/center
• Text- decoration : underline/overline/line-through
• Font-weight : normal/bold/bolder/lighter
• Font-weight : 100-900
• Font-family : arial
• Text-transform : uppercase/lowercase/capitalize/none
Display Properties
• The Display property is used to specify how an element is shown on a
web page.
display : inline/block/inline-block/none
Inline : takes only the space required by the element(no width and
height).
Block : takes full space available in width.
Inline-block : similar to inline but we can set width and height.
None : to remove element from document flow.
Position Properties
• CSS Position Property sets how an element is positioned in an
document.
Position : static/relative/absolute/fixed/sticky
1. Static: default position(top,right,bottom,left) properties has no
effect.
2. Relative : element is relative to itself. Top,right, bottom,left and z-
index will work.
3. Absolute: positioned relative to its closest positioned ancestor.
4. Fixed: positioned relative to browser .
5. Sticky: positioned based on user scroll position.
CSS Borders Styles
• Css border-style property specifies what kind of border to display.

1. Dotted : defines the dotted border

2. Dashed : defines the dashed border
3. Solid : defines the solid border
4. Double : defines the double border
5. Groove: defines the 3D groove border
6. Ridge : defines the 3D ridge border
7. Inset : defines the 3D inset border
8. Outset : defines the 3D outset border
9. None : defines no border
10. border-shorthand
p{
border: 5px solid red;
CSS Margin
• CSS margin properties are used to create space around elements,
outside of any defined borders.
margin-top
margin-right
margin-bottom
margin-left
• Margin shorthand :
margin: 25px 50px 75px 100px;
CSS Padding
• CSS Padding properties are used to generate space around an
element's content, inside of any defined borders.
padding-top
padding-right
padding-bottom
padding-left
• padding shorthand :
padding: 25px 50px 75px 100px;
Box Model
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: content, padding, borders and margins. The image
below illustrates the box model:
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
p{
width:50px;
height : 50px;
padding: 5px;
margin: 0
}
 Grid in CSS
• The CSS Grid Layout Module offers a
grid-based layout system, with rows and
columns, making it easier to design web
pages without having to use floats and
positioning.
grid-template-rows : 50px 100px
grid-template-columns : 90px 50px 150px
grid-template-columns : 1fr 1fr 2fr
Flexbox
In CSS, we use Flexbox, a layout model that offers us a variety of ways to arrange
the element and helps us align the element in CSS. With Flexbox's help, we can
design responsive and dynamic webpage or user interface layouts.

CSS FLEX CONTAINER

• Flex-direction
• Flex-wrap
• Flex-flow
• Justify-content
• Align-items
• Align-content
The flex-direction Property
• The flex-direction property defines in which direction the container wants to
stack the flex items.
1. Column: stacks the flex items vertically (from top to bottom)
2. column-reverse: stacks the flex items vertically (but from bottom to top)
3. Row: stacks the flex items horizontally (from left to right)
4. Row-reverse: stacks the flex items horizontally (but from right to left)

The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.
5. Wrap: specifies that the flex items will wrap if necessary
6. Nowrap: specifies that the flex items will not wrap (this is default)
7. Wrap-reverse: specifies that the flexible items will wrap if necessary, in reverse
order
The flex-flow Property
• The flex-flow property is a shorthand property for setting both the
flex-direction and flex-wrap properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}

The justify-content Property

The justify-content property is used to align the flex items
1. Center: aligns the flex items at the center of the container
2. Flex-start: aligns the flex items at the beginning of the container (this is default)
3. Flex-end: aligns the flex items at the end of the container
4. Space-around: displays the flex items with space before, between, and after the
lines
5. Space-between: displays the flex items with space between the lines
The align-items Property
• The align-items property is used to align the flex items
1. Center: aligns the flex items in the middle of the container
2. flex-start: aligns the flex items at the top of the container
3. Flex-end: aligns the flex items at the bottom of the container
4. Stretch: stretches the flex items to fill the container (this is default)
5. Baseline: aligns the flex items such as their baselines aligns

The align-content Property

The align-content property is used to align the flex lines.
6. Space-between: displays the flex lines with equal space between them
7. Space-around: displays the flex lines with space before, between, and after them
8. Stretch: stretches the flex lines to take up the remaining space (this is default)
9. Center: displays the flex lines in the middle of the container
10. Flex-start: displays the flex lines at the start of the container
11. Flex-end: displays the flex lines at the end of the container
CSS Flex Items
The flex item properties are:
1. Order: specifies the order of the flex items ( <div style="order: 3">1</div>)
2. Flex-grow: specifies how much a flex item will grow relative to the rest of the
flex items.( <div style="flex-grow: 1">1</div>)
3. Flex-shrink: specifies how much a flex item will shrink relative to the rest of the
flex items.( <div style="flex-shrink: 0">3</div>)
4. Flex-basis: specifies the initial length of a flex item.( <div style="flex-basis:
200px">3</div>)
5. Flex: The Flex property is a shorthand property for the flex-grow, flex-shrink,
Flex-basis properties.( <div style="flex: 0 0 200px">3</div>)
6. Align-self: specifies the alignment for the selected item inside the flexible
container.( <div style="align-self: center">3</div>)