CSS
FROM SCRATCH TO ADVANCE
VEI TECHNOLOGIES
Guided by: Dr.B.Ezhilavan
Author:S.Janani
Chennai
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.
· The style definitions are normally saved in external .css files.
HOW TO USE..
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 style sheet
● Internal style sheet
● Inline style
EXTERNAL STYLE SHEET
· With an external style sheet, you can change the look of
an entire website by changing just one file!
· Each page must include a reference to the external style
sheet file inside the <link> element.
· The <link> element goes inside the <head> section:
Save the external file as filename.css
<link rel="stylesheet" type="text/css" href="mystyle.css">
INTERNAL STYLE
· An internal style sheet may be used if one single page has a unique style.
· Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
INLINE STYLE
· 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.
CSS SYNTAX AND SELECTORS
CSS SELECTORS
ELEMENT SELECTOR
p{
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a
specific element.
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
Note: An id name cannot start with a number!
The class Selector
The class selector selects elements with a specific class attribute.
.center {
text-align: center;
color: red;
}
<h1 class="center">Red and center-aligned heading</h1>
Note: An CLASS name cannot start with a number!
Grouping Selectors
If you have elements with the same style definitions,
h1, h2, 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
CSS Comments
A CSS comment starts with /* and ends with */. Comments can
also span multiple lines:
/* This is a single-line comment */
/* This is
a multi-line
comment */
CSS TEXT
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
● a color name - like "red"
● a HEX value - like "#ff0000"
● an RGB value - like "rgb(255,0,0)"
body {
color: blue;
}
Text Alignment
The text-align property is used to set the horizontal
alignment of a text.
● text-align: left;: Aligns the text to the left edge of the container.
● text-align: right;: Aligns the text to the right edge of the container.
● text-align: center;: Centers the text horizontally within the container.
● text-align: justify;: Stretches the text so that each line is flush with both
the left and right edges of the container, creating a justified alignment.
TEXT DECORATION
The text-decoration property is used to set or remove decorations from text.
TEXT TRANSFORMATION
The text-transform property is used to specify uppercase and lowercase letters in a
text.
TEXT DIRECTION
The direction property is used to change the text direction of an element
TEXT INDENTATION
The text-indent property is used to specify the indentation of the first line of a
text
TEXT SHADOW
The text-shadow property adds shadow to text.
CSS FONT
FONT FAMILY
In CSS, there are two types of font family names:
● generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
● font family - a specific font family (like "Times New Roman" or "Arial")
FONT STYLE
FONT WEIGHT
FONT VARIANT
FONT SIZE
CSS COLORS
Colors in CSS are most often specified by:
● a valid color name - like "red"
● an RGB value - like "rgb(255, 0, 0)"
● a HEX value - like "#ff0000"
COLOR PICKER.COM
COOLORS.CO
COLORKIT.CO
COLORIN.CO
CSS BACKGROUND
The CSS background properties are used to define the background
effects for elements.
CSS background properties:
● background-color
● background-image
● background-repeat
● background-attachment
● background-position
Background Color
· The background-color property specifies the background color of
an element.
CSS BORDER
Border Style
The border-style property specifies what kind of border to
display.
The border-style property can have from one to four values (for
the top border, right border, bottom border, and the left border).
● 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
BORDER SINGLE SIDE
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
BORDER SHORTHAND
The border property is a shorthand property for the following individual
border properties:
● border-width
● border-style (required)
● border-color border: 5px solid red;
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
● 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.
CSS OUTLINE
❏ The CSS outline properties specify the style, color, and width
of an outline.
❏ An outline is a line that is drawn around elements (outside the
borders) to make the element "stand out".
❏ However, the outline property is different from the border property
- The outline is NOT a part of an element's dimensions; the
element's total width and height is not affected by the width of the
outline.
❏ It doesn't affect the position or size of the element itself.
CSS TABLE
CSS FORM
SPECIFICITY
Specificity in CSS is a set of rules that determines which styles are
applied to an element when there are conflicting CSS rules. It's like a
scoring system where different types of selectors are given different
weights, and the one with the highest score gets applied.
!important rule
The !important rule in CSS is used to add more importance to a
property/value than normal.
In fact, if you use the !important rule, it will override ALL previous
styling rules for that specific property on that element!
@import
The @import rule in CSS is used to import one CSS file into another.
main.css
@import url('reset.css');
body {
font-family: Arial, sans-serif;
}
reset.css
*{
margin: 0;
padding: 0;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Z-INDEX
The z-index property in CSS controls the stacking order of positioned
elements (those with a position value other than static). Elements
with a higher z-index value appear in front of those with a lower
value.
Short Definition:
● z-index: Determines the stack order of elements that overlap.
Higher values are closer to the front.
CSS FLEX
CSS GRID
CSS Grid is a powerful layout system that allows
you to create complex web designs with ease.
It provides a way to design web pages using a
grid-based approach, where you can define rows and
columns to place your content.
