J IEz Hi RAuc 3

CSS – cascading style sheet.
CSS is a rule-based language.
What is CSS ?
CSS is a language for specifying how
documents are presented to users — how
they are styled, laid out, etc.
For example, you can decide to have the
main heading on your page to be shown as
large red text.
Why CSS
CSS describes how
HTML elements are to Allows you to create
CSS is responsible for
be displayed on great-looking
styling of the website.
screen, paper, or in websites.
other media.
HTML ONLY
HTML and CSS
3 ways of Inserting a stylesheet
External Internal
Inline styles
stylesheet stylesheet
Inline styles
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
The following example sets the text colour of the <h1> element to red.
Internal Stylesheet
• An internal stylesheet resides within an HTML document.
• An internal CSS is used to define a style for a single HTML

page.
• An internal CSS is defined in the <head> section of an HTML

page, within a <style> element.
External Stylesheet
An external stylesheet contains CSS in a separate file with a .css extension.
The style sheet can be applied to any number of HTML files.
When you make a change to an external style sheet, all the pages that reference it are automatically updated as well.
• The CSS file, “styles.css” is linked to this HTML file.

Anatomy of CSS
Selector
It defines the element to be styled.
Declaration
The declaration block contains one or more declarations separated by semicolons.
It specifies which of the element's properties you want to style.
Properties
These are ways in which you can style an HTML element. In this example, color is a property of <p>
elements.
Property Value
This chooses one out of many possible appearances for a given property
Basic CSS
rules
In HTML colours are specified with
predefined color names, or with RGB value
using a decimal , HEX value
When styling your websites you’ll use CSS to

Colours change colour of various elements. For
example text colour, background colour,
border colour and many more.
There are three main RGB

ways in representing real HTML
world colours in css Plain names
Color Theory
• We can use different intensities of red(R), green(G) and blue(B) to make any color in the world.
• Maximum value of each of the colors RGB is 255, minimum value is 0.

• Below are some of the common colour names and codes, you
can use the colour names for these colours.
• Few of the are:
Plain names • red

• bue
• green
• black
CSS Syntax • white
h1{
color:red
};
• RED, GREEN and BLUE are the three main colours supported in
every browser.
• An RGB colour value is specified with : rgb (red, green, blue).
RGB • Each parameter (red, green, and blue) defines the intensity of
the color as an integer between 0 and 255.
CSS Syntax • This means that there are 256 x 256 x 256 = 16777216 possible
colours
rgb(255,120,3);
• Hexadecimal color values are also supported in all browsers.
• A hexadecimal color is specified with: #RRGGBB.
Hexadecimal • Where RR (red), GG (green) and BB (blue) are hexadecimal values

between 00 and ff (same as decimal 0-255).
Colours
• To display black, set all color parameters to 00, like this: #000000.
• To display white, set all color parameters to ff, like this: #ffffff.
Background Colour
The background-color CSS property sets the background color of an element.
The background-color property is specified as a single <color> value.
CSS Syntax
background-color : red;
Font size
• The font-size CSS property sets the
size of the font.
• The font-size property is specified in
one of the following ways:
• By using pixels(px)
• By relative values (perc, em, CSS Syntax
rem)
font-size : 15px;
Font Family
The font-family property specifies the font of an element.
The font-family property can hold several font names as a “fallback” system. If the browser does not support the
first font, it tries the next font.
There are two types of font-family names :
1. family-name – The name of font-family. Example - “times” , “courier”, ”arial” etc . .
2. generic-family – The name of generic-family. Example - “serif” , “sans-serif” , “cursive” etc ..
CSS Syntax
h1{
color:red
};
Font Weight
• The font-weight property sets how thick or thin characters in text should be displayed.
• The weights available depend on the font family that is currently set.
font-weight: normal; font-weight: normal; font-weight: normal; font-weight: normal;

• The text-decoration property specifies the decoration added to
the text, and is a shorthand property for:
• text-decoration-line
Text Decoration • text-decoration-color
• text-decoration-style
• text-decoration-thickness
text-decoration-line
Sets the kind of decoration used, such as underline or line-through.
text-decoration-color
Sets the color of the decoration.
Text Decoration text-decoration-style

Sets the style of the line used for the decoration, such as solid, wavy,
or dashed.
text-decoration-thickness
Sets the thickness of the line used for the decoration.
Text Align
The text-align property specifies the horizontal alignment of text in an element.
text-align: start; text-align: end; text-align: center; text-align: justify;

Selectors
• The element selector selects HTML elements based on the element name.
h1 { p{
text-align: center; text-align: center;
color: yellow; color: red;
} }
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}
Block and
Inline
Elements
A block-level
element always
takes up the full
width available.
It stretches
from left to
right as far as
possible.
Block Level
Elements A block-level
element always
starts on a new
line.
Examples for <p>

block-level
elements: <h1> - <h6>
<div>
<ul>
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.
Inline Elements • Examples for inline elements:
• <span>
• <a>
• <img>
Display Property
• The display CSS property sets whether an element is treated as a block or inline element.
CSS Box
Model
Height & Width
• The CSS height and width properties are used to set the height and width of an element.
CSS Syntax
div{
width: 400px;
height: 200px;
background-color: red;
}
• IMPORTANT – If the height and width is not defined, the element will get it’s height and width by default.
border-style
Border
• The border property sets an element’s border.
• It sets the values of border-width, border-style, and border-color. border-width border-color

• The border-style property specifies what kind of border to display.
• Some commonly used border styles are :
• solid
• dotted
• dashed
• groove
• The border-width property specifies the width of four borders. It can be in px, pt, cm, in, etc
Border Radius
• The border-radius property defines the radius of the element’s corners.
first value applies to top-left corner, second value applies to top-right corner, third first value applies to top-left corner, second value applies to top-right and
value applies to bottom-right corner, and fourth value applies to bottom-left corner bottom-left corners, and third value applies to bottom-right corner
first value applies to top-left and bottom-right corners, and the second value applies
to top-right and bottom-left corners the value applies to all four corners, which are rounded equally
Selectors 2
ID Selectors
• The HTML id attribute is used to specify a unique id for an HTML element.
• You cannot have more than one element with the same id in an HTML document.
• The id attribute is used to point to a specific style declaration in a style sheet.
• We use “ # ” followed by the id name to access it in the style sheet
HTML CSS
Class Selectors
• The HTML class attribute is used to specify a class for an HTML element.
• Multiple HTML elements can share the same class.
• We use “ . ” followed by the class name to access it in the style sheet
CSS
HTML
Box Model
Content
The content of the box where the text and images appear.
Padding
Clears and area around context. 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

Padding
• Padding is used to create space around an element's content, inside of any defined borders.
Top has a padding of 10px Top and bottom has a padding of 20px
Right has a padding of 20px Right and left have a padding of 100px
Bottom has a padding of 30px
Left has a padding of 40px
Top has a padding of 10px

Right and left has a padding of 50px All sides have a padding of 20px
Bottom has a padding od 20px
Margin
• Margins are used to create space around
elements, outside of any defined borders
• CSS has properties for specifying the margin for

each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
Content Box
• Content-box is the default value of the size-boxing property.
• It works similar to what we have seen in the without box-sizing section.
If you define the width of as 200px and then add 20px

padding and 10px border to it, the finally rendered width
will be greater than 200px
Border Box
• The border-box value will include everything, content, padding, and border, within the height and width
specified.
If you set the width to be 200px, the finally rendered element will
not exceed 200px width and include the padding, border, and
content within it.
Inline Block
• It’s essentially the same thing as inline, except that you can set height and width values.
Positioning
• The position property specifies the type of positioning method used for an element
• There are five different position values:
• static
• relative
• fixed
• absolute
Static Positioning
• HTML elements are positioned static by default.
• Static positioned elements are not affected by the top, bottom, left, and right properties.
Relative Positioning
• An element with position: relative; is positioned relative to its normal position.
• Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted
away from its normal position.
On this instance when left : 30px is applied

with position relative, the element will move
30px to the right from it’s original position.
Absolute Positioning
• Absolute positioning is just like relative positioning, but the offset is relative to the entire
browser window instead of the original position of the element.
On this instance when right : 20px is applied with

position absolute, the element will be placed 20px
away from right relative to the entire browser.
Z-index
• The z-index property specifies the stack order of an element.
• z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position:
sticky) and flex items (elements that are direct children of display:flex elements).
Fixed Positioning
• Fixed positioning has a lot in common with absolute positioning.
• Which means it always stays in the same place even if the page is scrolled.
On this instance when right : 20px is applied with position absolute, the
element will be placed 20px away from right relative to the entire
browser.
But it’ll always stay in the same place even if the page is scrolled.
CSS Flexbox
CSS Flexbox
• CSS flexbox is a system of CSS rules that can be used to easily layout html elements.
• We can create a flex layout by adding “display:flex” CSS rule to a div container.
CSS Syntax
.container{
display: flex;
}
CSS Flexbox
• There are two main ways we can manipulate content with flexbox.
1. Adding Flex rules to a flex container.

2. Adding Flex rules to flex items(children of the flex container)
• Flex rules added to a flex container can define the layout of the flex items.
Parts of a flex layout
• There are two main axes in a flex container.
1. Main axis – Horizontal axis

2. Cross axis – Vertical axis
• The height and the width of a flex container by default is defined by the height and the width of the largest flex
item. The are known as Main size for width and Cross size for height.
Flex-direction
• Flex-direction can be used to specify the direction of adding new items.
• Default is row(left to right)
CSS Syntax
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
• column(top to bottom)
Flex-wrap
CSS Syntax
.container {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}
• wrap-reverse: flex items will wrap onto

multiple lines from bottom to top.
• wrap: flex items will wrap onto multiple

lines, from top to bottom.
Justify-content
CSS Syntax
.container {
display: flex
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Justify-content
• The display CSS property sets whether an element is treated as a block or inline element.
Justify-content
• flex-start (default): items are packed toward the start of the flex-direction.
• flex-end: items are packed toward the end of the flex-direction.
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them. Note that visually the
spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of
space against the container edge, but two units of space between the next item because that next item has
its own spacing that applies.
• space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is
equal.
Align-items
CSS Syntax
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
Align-items
Align-items
• stretch (default): stretch to fill the container (still respect min-width/max-width).
• flex-start: items are placed at the start of the cross axis.
• flex-end / end / self-end: items are placed at the end of the cross axis.
• center: items are centered along the line
• baseline: items are aligned such as their baselines align

max-width
• The max-width property defines the maximum width of an element.
• If the content is larger than the maximum width, it will automatically change the height of the element.
• If the content is smaller than the maximum width, the max-width property has no effect.
• This prevents the value of the width property from becoming larger than max-width. The value of the max-
width property overrides the width property.
min-width
• The min-width property defines the minimum width of an element.
• If the content is smaller than the minimum width, the minimum width will be applied.
• If the content is larger than the minimum width, the min-width property has no effect.
• This prevents the value of the width property from becoming smaller than min-width.
CSS Grid
CSS Grid
• CSS grid is a modern layout system in CSS that we can use to align UI elements using grid structures.
• Grid rules can be added to a parent container to control how the children of that container is positioned.
CSS Syntax
.container{
display: flex;
}
Parts of a grid layout
• There are two main axes in a grid container.
1. Main axis – Horizontal axis

2. Cross axis – Vertical axis
Grid Container
• The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example
container is the grid container.
Grid Item
• The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-
item isn’t.
Defining Grids
• Defines the element as a grid container and establishes a new grid formatting context for its contents
• Added to the container.
CSS Syntax
.container {
display: grid;
}
grid-template-columns
• Defines the columns in a grid container
CSS Syntax
.container {
grid-template-columns: 1fr 1fr;
}
grid-template-rows
• Defines the rows in a grid container
CSS Syntax
.container {
grid-template-rows: 1fr 1fr;
}

J IEz Hi RAuc 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

J IEz Hi RAuc 3

Uploaded by

Copyright:

Available Formats

CSS – cascading style sheet.

CSS is a rule-based language.

• An inline CSS uses the style attribute of an HTML element.

• An internal CSS is used to define a style for a single HTML

• An internal CSS is defined in the <head> section of an HTML

The style sheet can be applied to any number of HTML files.

• The CSS file, “styles.css” is linked to this HTML file.

When styling your websites you’ll use CSS to

There are three main RGB

• Maximum value of each of the colors RGB is 255, minimum value is 0.

• Few of the are:

Plain names • red

• A hexadecimal color is specified with: #RRGGBB.

Hexadecimal • Where RR (red), GG (green) and BB (blue) are hexadecimal values

The background-color property is specified as a single <color> value.

There are two types of font-family names :

1. family-name – The name of font-family. Example - “times” , “courier”, ”arial” etc . .

2. generic-family – The name of generic-family. Example - “serif” , “sans-serif” , “cursive” etc ..

font-weight: normal; font-weight: normal; font-weight: normal; font-weight: normal;

Text Decoration • text-decoration-color

Text Decoration text-decoration-style

text-align: start; text-align: end; text-align: center; text-align: justify;

• It will be better to group the selectors, to minimize the code.

• To group selectors, separate each selector with a comma.

Examples for <p>

• An inline element only takes up as much width as necessary.

Inline Elements • Examples for inline elements:

• It sets the values of border-width, border-style, and border-color. border-width border-color

• Some commonly used border styles are :

• The id attribute is used to point to a specific style declaration in a style sheet.

• We use “ # ” followed by the id name to access it in the style sheet

• Multiple HTML elements can share the same class.

• We use “ . ” followed by the class name to access it in the style sheet

Clears and area around context. The padding is transparent

A border that goes around the padding and content

Clears an area outside the border. The margin is transparent

Top has a padding of 10px

• CSS has properties for specifying the margin for

• It works similar to what we have seen in the without box-sizing section.

If you define the width of as 200px and then add 20px

• There are five different position values:

On this instance when left : 30px is applied

On this instance when right : 20px is applied with

1. Adding Flex rules to a flex container.

• There are two main axes in a flex container.

1. Main axis – Horizontal axis

• wrap-reverse: flex items will wrap onto

• wrap: flex items will wrap onto multiple

• flex-end: items are packed toward the end of the flex-direction.

• center: items are centered along the line

• center: items are centered along the line

• baseline: items are aligned such as their baselines align

• There are two main axes in a grid container.

1. Main axis – Horizontal axis

You might also like