Save This Page in a Folder and Open index.html file consists This Page HTML Code and CSS file in the Editor
Now See the Webpage and Code (HTML and CSS) parallel
CSS is the language we use to style a Web page.
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 Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was
created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single
page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
If you don't know what HTML is, we suggest that you read our HTML Tutorial.
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing just one file!
A CSS rule consists of a selector and a declaration block.
CSS Syntax
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.
Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element) Attribute selectors (select elements based on an attribute or attribute value)
Comments
/* ------------
------------
------------ */
Color Values
Color as Tomato :
rgb(255,99,71)
#ff6347
hsl(9,100%,64%)
Color as Tomato but 50% Transparent : rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
OPACITY :
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:
BACKGROUND COLOR
BACKGROUND COLOR
BACKGROUND COLOR
BACKGROUND COLOR
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.
By default, the background-image property repeats an image both horizontally and vertically.
If the image above is repeated only horizontally (background-repeat: repeat-x;)
To repeat an image vertically, set background-repeat: repeat-y;
ackground-repeat: no-repeat,Showing the background image only once
The background-attachment property specifies whether the background image should scroll or be fixed
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
CSS background-color property
The background-color property specifies the background color of an element.
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Transparency using RGBA
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
CSS Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Note: When using a background image, use an image that does not disturb the text.
This paragraph has an image as the background!
CSS Background Image Repeat
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better
Tip: To repeat an image vertically, set background-repeat: repeat-y;
to repeat an image only once,set background-repeat: no-repeat
CSS background-position
The background-position property is used to specify the position of the background image.
example: background-position: right top;
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 : background-attachment: fixed;
Example : background-attachment: scroll;
CSS Background Shorthand
background: #ffffff url("img_tree.png") no-repeat right top; 222
The background-clip Property
The background-clip property defines how far the background should extend within an element.
The property takes three different values:
border-box - (default) the background is painted to the outside edge of the border
padding-box - the background is painted to the outside edge of the padding
content-box - the background is painted within the content box
background-clip: border-box (this is default):
The background extends behind the border.
background-clip: padding-box:
The background extends to the inside edge of the border.
background-clip: content-box:
The background extends to the edge of the content box.
CSS Gradients
Linear Gradient - Top to Bottom
Linear Gradient - Left to Right
Linear Gradient - Diagonal(top left to bottom right)
repeating-radial-gradient(red, yellow 10%, green 15%);
The CSS background-origin property specifies where the background image is positioned.
The property takes three different values:
border-box - the background image starts from the upper left corner of the border
padding-box - (default) the background image starts from the upper left corner of the padding edge
content-box - the background image starts from the upper left corner of the content
background-origin: content-box, padding-box:
Hello World
The "paper.gif" background image starts from the upper left corner of the padding edge.
The "img_tree.gif" background image starts from the upper left corner of the content.
background-origin: content-box, border-box:
Hello World
The "paper.gif" background image starts from the upper left corner of the border.
The "img_tree.gif" background image starts from the upper left corner of the content.
background-origin: content-box, content-box:
Hello World
Both background images starts from the upper left corner of the content.
The CSS background-size property allows you to specify the size of background images.
The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
background-size: auto (default):
Hello World
The background image is displayed in its original size.
background-size: 300px 100px:
Hello World
Here, the background image is set to 300px wide and 100px high.
background-size :
auto - Default value. The background image is displayed in its original size
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
background-size: cover:
Hello World
The background image is resized to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
background-size: contain:
Hello World
The background image is resized to make sure the image is fully visible.
background-size: contain, cover:
Hello World
Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover".
background-repeat: space
Here, the background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.
By default, the background-image property repeats an image both horizontally and vertically.
Hello World!
background-repeat: round
Here, the background-image is repeated and squished or stretched, to fill the space (no gaps):
Hello World!
Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
Border
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.
BORDER WIDTH
Some Text
Some Text
Normal border
Round border
Rounder border
Roundest border
MARGIN
The CSS margin properties are used to create space around elements, outside of any defined borders.
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
This paragraph has an inherited left margin (from the div element).
This paragraph has an inherited left margin (from the div element).
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.
In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.
Heading 1
Heading 2
This div will be horizontally centered because it has margin: auto;
PADDING
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
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
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.
Padding and element width
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
This div is 300px wide.
The width of this div is 350px, even though it is defined as 300px in the CSS.
To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease.
Padding and element width - with box-sizing
If the padding property has four values:
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
This div is 300px wide.
The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
CSS Height and Width
This div element has a height of 200px and a width of 50%.
This div element has a height of 100px and a width of 500px.
This div element has a height of 100px and a max-width of 500px.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
OutLine
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
An outline is a line drawn outside the element's border.
This element has a 2px black border and a green outline with a width of 10px.
A 4px thick outline
A solid invert outline.
A Think ridge Pink Outline
The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
This paragraph has an outline 15px outside the border edge.
Text Align :
the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight
The text-decoration property is used to set or remove decorations from text.
HEADING
HEADING
This is HEADING text
When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
TEXT DIRECTION :
This is right-to-left text direction.
vertical-align: baseline (default):
An image with a default alignment.
vertical-align: text-top:
An image with a text-top alignment.
vertical-align: text-bottom:
An image with a text-bottom alignment.
vertical-align: sub:
An image with a sub alignment.
vertical-align: sup:
An image with a super alignment.
Text Transform
The text-transform property
is used to specify uppercase
and lowercase letters in a text.
The text-decoration property is used to set or remove decorations from text.
The text-indent property is used to specify the indentation of the first line of a text.(starting point of text)
Text Indent In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
Letter Spacing
This is Heading 1
This is Heading 2
Line Spacing :
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
Word Spacing :
This is heading 1
This is heading 2
White Space :
The white-space property specifies how white-space inside an element is handled.
This example demonstrates how to disable text wrapping inside an element
REMOVE BREAK IN CODE TO SEE
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text.
Text Shadow :
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px)
Then, add a blur effect (5px) to the shadow
Text Shadow Effect!
Text-shadow effect!
In CSS there are five generic font families:
Serif - fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif - fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
Cursive - fonts imitate human handwriting.
Fantasy - fonts are decorative/playful fonts
The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma.
Examples of Serif
Times New Roman
Georgia
Garamond
Examples of Sans-serif
Arial
Verdana
Helvetica
Tahoma
Trebuchet MS
Examples of Monospace
Courier New
Lucida Console
Monaco
Examples of Cursive
Brush Script MT
Lucida Handwriting
Examples of Fantasy
Copperlate
Papyrus
Web safe fonts are fonts that are universally installed across all browsers and devices.
The following list are the best web safe fonts for HTML and CSS:
Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
Font Style :
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning"
This is a paragraph in normal style.
This is a paragraph in italic style.
This is a paragraph in oblique style.
Font Weight :
The font-weight property specifies the weight of a font.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
Font Variant :
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
My name is Hege Refsnes.
My name is Hege Refsnes.
Font Size :
Font Size With Pixels
40px
30px
14px
Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
2.5 em
1.875 em
0.875 em
Responsive Font Size
The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
Responsive Text
Resize the browser window to see how the text size scales.
Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Google Fonts
Just add a special style sheet link in the < head> section and then refer to the font in the CSS.
Sofia Font
Lorem ipsuum dolor sit amet
Audiowide Font
Lorem ipsum dolor sit amet
Trirong Font
Lorem ipsum dolor sit amet
Google have avlso enabled different font effects that you can use.
First add effect=effectname to the Google API, then add a special class name to the element that is going to use the special effect. The class name always starts with font-effect- and ends with the effectname.
Sofia on Fire
Lorem ipsuum dolor sit amet
Audiowide Font
Lorem ipsum dolor sit amet
Trirong Font
Lorem ipsum dolor sit amet
Outline Effect
Multiple Shadow Effect
Great Font Pairings
Font Pairing Rules
1.Complement
It is always safe to find font pairings that complement one another.
A great font combination should harmonize, without being too similar or too different.
2.Use Font Superfamilies
A font superfamily is a set of fonts designed to work well together. So, using different fonts within the same superfamily is safe.
For example, the Lucida superfamily contains the following fonts: Lucida Sans, Lucida Serif, Lucida Typewriter Sans
3.Contrast is King
Two fonts that are too similar will often conflict. However, contrasts, done the right way, brings out the best in each font.
Example: Combining serif with sans serif is a well known combination.
A strong superfamily includes both serif and sans serif variations of the same font (e.g. Lucida and Lucida Sans).
4.Choose Only One Boss
One font should be the boss. This establishes a hierarchy for the fonts on your page. This can be achieved by varying the size, weight and color.
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
Beautiful Norway
Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
ICONS
Icons can easily be added to your HTML page, by using an icon library.
How To Add Icons
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like < i> or < span>).
All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)
Font Awesome Icons
Font Awesome Icons
To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the
section of your HTML page:
< script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous">
Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside the
section of your HTML page:
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Google Icons
To use the Google icons, add the following line inside the
section of your HTML page:
< link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
cloudfavoriteattachmentcomputertraffic
CSS LINKS
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
AUTO CROSSHAIR DEFAULT E-RESIZE HELP MOVE N-RESIZE NE-RESIZE NW-RESIZE POINTER progress S-RESIZE SE-RESIZE SW-RESIZE TEXT W-RESIZE WAIT
LISTS STYLES
List using IMAGE
The list-style-image property specifies an image as the list item marker:
Coffee
Tea
Coca Cola
list-style-position: outside (default):
"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default
Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves
list-style-position: inside:
"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start
Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves
Remove bullets, margin and padding:
The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to < ul> or < ol>:
Coffee
Tea
Coca Cola
List - Shorthand property
the order of the property values are:
list-style-type
list-style-position
list-style-image
Styling Lists With Colors:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
TABLES
Double Borders Remove
Notice that the table in the examples above have double borders. This is because both the table and the < th> and < td> elements have separate borders.
To remove double borders,The border-collapse property sets whether the table borders should be collapsed into a single border
border-collapse: collapse;
CSS Table Alignment
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in < th> or < td>.
By default, the content of < th> elements are center-aligned and the content of < td> elements are left-aligned.
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in < th> or < td>.
By default, the vertical alignment of the content in a table is middle (for both < th> and < td> elements).
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:
Add a container element (like
) with overflow-x:auto around the
element to make it responsive:
Good Morning
Good Afternoon
Breakfast
Lunch
Home
Office
The display property is the most important CSS property for controlling layout.
Override The Default Display Value
HTML
CSS
Javascript
Dispaly Property
A display property with a value of "block" results ina line break between the two elements.
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there
This is a visible heading
This is a hidden heading
there is an hidden element
Notice that the h1 element with display: none; does not take up any space.
visibility:hidden; also hides an element.
However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:
This is a visible heading
This is a hidden heading
Notice that the h1 element with display: none; does not take up any space.
CSS Max-width
Using max-width instead, in this situation, will improve the browsers handling of small windows. This is important when making a site usable on small devices:
This div element has width: 500px;
This div element has max-width: 500px;
Tip: Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!
Position Property
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
Position : Static
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
This div element has position: static;
Position : relative
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. Other content will not be adjusted to fit into any gap left by the element.
This div element has position: relative;
Position : Fixed
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
This div element has position: fixed;
Positon : Absolute
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
This div element has position: relative;
This div element has position: absolute;
Position : Sticky
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Try to scroll inside this frame to understand how sticky positioning works.
I am sticky!
Positioning Text In an Image
Top Left
Top Right
Centered
Bottom Left
Bottom Right
Overlapping Elements
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
This is a heading GO TO TOP OF THE PAGE
Because the image has a z-index of -1, it will be placed behind the text.
The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.
If position: relative; - the bottom property makes the element s bottom edge to move above/below its normal position.
If position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If position: static; - the bottom property has no effect.
clip Property
What happens if an image is larger than its containing element?
The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.
Note: The clip property does not work if "overflow:visible".
The Left Property
The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor.
If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
If position: sticky; - the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If position: static; - the left property has no effect.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: 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).
Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
myBox
z-index 0
z-index 1
z-index 2
z-index 3
z-index 4
myBox
z-index -1
z-index -2
z-index -3
z-index -4
z-index -5
CSS Layout
Overflow Property
The CSS overflow property controls what happens to content that is too big to fit into an area.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Float Property
The CSS float property specifies how an element should float.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
Div 1
Div 2
Div 3
Div 4
Div 5
Div 6
Clear and Clearfix Property
Without clear
div1
div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.
With left clear
div3
div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".
With right clear
div5
div6 - Here, clear: right; moves div4 down below the floating div3. The value "right" clears elements floated to the right.
If a floated element is taller than the containing element, it will "overflow" outside of its container. We can then add a clearfix hack to solve this problem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
Float Examples
Some text inside the box.
Some text inside the box.
Some text inside the box.
What is box-sizing?
You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break.
However, this is not very flexible. It is ok if you can guarantee that the boxes will always have the same amount of content in them. But many times, the content is not the same. If you try the example above on a mobile phone, you will see that the second box's content will be displayed outside of the box. This is where CSS3 Flexbox comes in handy - as it can automatically stretch boxes to be as long as the longest box
Box 1 - This is some text to make sure that the content gets really tall. This is some text to make sure that the content gets really tall.
Box 2 - My height will follow Box 1.
AliquamvenenatisAliquamvenenatisAliquamvenenatis
Center Align Elements
To horizontally center a block element (like < div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins:
Hello World!
Center image
Left and Right Align - Using position
One method for aligning elements is to use position: absolute;
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
Left and Right Align - Using float
Another method for aligning elements is to use the float property:
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
Center Vertically - Using padding
I am vertically centered.
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Center Vertically - Using line-height
I am vertically and horizontally centered.
Center Vertically - Using position & transform
I am vertically and horizontally centered.
Center Vertically - Using Flexbox
I am vertically and horizontally centered.
Combinators
A combinator is something that explains the relationship between the selectors.
There are four different combinators in CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Descendent Selector
Paragraph 1 in the div.
Paragraph 2 in the div.
Child Selector
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3 in the div.
Adjacent Sibling Selector (+)
Paragraph 1 in the div.
Paragraph 3. After a div.
Paragraph 5 in the div.
Paragraph 7. After a div.
Paragraph 8. After a div.
General Sibling Selector (~)
Paragraph 1.
Paragraph 2.
Paragraph 3.
Some code.
Paragraph 4.
Pseudo Classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
The :first-child pseudo-class matches a specified element that is the first child of another element.
This is some text
This is some text
This is some text
This is some text
Match the first < i> element in all < p> elements the selector matches the first < i> element in all < p> elements
I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
Match all < i> elements in all first child < p> elements
the selector matches all < i> elements in < p> elements that are the first child of another element
I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
The :lang Pseudo-class
Some text A quote in a paragraph Some text.
ALL PSEUDO CLASSES
Checked selector
Male
Female
I have a bike
I have a car
Empty Selector
:first-of-type Selector
The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
Last Child Selector
Last of Type Selector
Italic Bold Superscript
P element 1
P element 2
P element 3
Superscript Italic
Invalid Selector
NOT Selector
Italic Bold Superscript
P element 1
P element 2
Superscript Italic
AFTER selector
BEFORE Selector
First letter Selector
Hello World
First Line Selector
To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity
MArker Selector
The ::marker selector selects the marker of a list item.
First
Second
Third
Opacity
This is some text that is placed in the transparent box.
Try to scroll this area, and see how the sidenav sticks to the page
Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.
Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
FORMS
Counters
CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.
To work with CSS counters we will use the following properties:
counter-reset - Creates or resets a counter counter-increment - Increments a counter value content - Inserts generated content counter() or counters() function - Adds the value of a counter to an element
Using CSS Counters:
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
Nested Counters
HTML tutorials:
HTML Tutorial
CSS Tutorial
Scripting tutorials:
JavaScript
VBScript
XML tutorials:
XML
XSL
A counter can also be useful to make outlined lists because a new instance of a counter is automatically created in child elements. Here we use the counters() function to insert a string between different levels of nested counters:
item
item
item
item
item
item
item
item
item
item
item
item
item
WEBSITE lAYOUT
A website is often divided into headers, menus, content and a footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Uneven Columns
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
About Me
Image
Some text about me in culpa qui officia deserunt mollit anim..
Popular Post
Image
Image
Image
Follow Me
Some text..
Footer
CSS Units
Length Units
There are two types of length units: absolute and relative.
image with a default alignment.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
