CSS

Cascading Style Sheets

What is CSS
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language like HTML. CSS is a cornerstone technology of the World
Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and

content, including layout, colors, and fonts.
Why 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.

● Determines how elements will be displayed

● Makes your content look GOOD
● CSS saves time and work, can control multiple pages
● CSS can add animation
● CSS can add interaction
● Adapt the way your page looks with CSS, perfect for responsive design
Different browsers
https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)

● some browsers may have different levels of support for technology features to other
● sometimes browsers have bugs, or implement features differently.
Different Look same HTML
CSS reference
https://developer.mozilla.org/en-US/docs/Web/CSS

https://css-tricks.com/almanac/
Basics of Styling
<link rel="stylesheet" href="style1.css" />
<style>
h1 {color: blue;}
</style>
<h1><font color="green">Test Text 1</font></h1>
<h1 style="color: red;">Test Text 2</h1>
<h1>Test Text 3</h1>
<h1>Test Text 4</h1>
example1.html / style1.css
Inline styles
CSS styles to a single, specific
element. Using an attribute style you
can apply the styling to the element,
and all child elements. Notice styling
works from the element out, so less
direct styling is overwritten as it goes
out from the element. example2.html
Try it - inline
● Open you editor
● Create HTML elements
● Change the color
● Change the size
Internal styles
Use the style tag to add styling. This is where selection
is really important. As you can see much of CSS is
about making selections of the elements.

example3.html
Try it
● Open you editor
● Create HTML elements
● Within the style tag select the element
by tag and change the color and size.
● Create various different tags apply style.
● Nest tags within other tags, select the
tag to add styling
CSS Style external link
Benefits of linking to an external CSS file

● everything is stored within a single file

● once changed/updated, the changes are reflected on all
other pages that reference the stylesheet
● makes it easier to maintain larger websites

example4.html
Try it
● Open you editor
● Create HTML elements
● Link to an external CSS file
Selection Classes and ID
Classes and IDs are used for selection of
elements.

Use classes for the ability to apply styling to

multiple elements.

Use ID for applying styling to one specific

element.

example5.html
Try it
● Open you editor
● Create HTML elements
● Select elements using the class and id
attributes.
● Apply multiple classes to the same
element.
Color options
https://developer.mozilla.org/en-US/docs/Web/C
SS/color_value

http://paletton.com/

You can use :

● Keyword color ‘red’

● RGB Hex value ‘#ff0000’
● RGB value ‘rgb( 255, 0, 0)’
● RGB value ‘rgba( 255, 0, 0,.5)’

example6.html
Background Colors / Images
Using divs and spans can help with the selection of elements.

Example8.html

Background shorthand

https://developer.mozilla.org/en-US/docs/Web/CSS/background
CSS display property
https://developer.mozilla.org/en-US/docs/Web/CSS/display

Example : display.css
List items
Manipulate list items.

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

list-style: none;

display: inline-block;
Exercise #1
Fun with colors

1. Open editor
2. Open exercise1.html
3. Create new exercise1.css file
4. Apply CSS properties and values to different
element groups
5. Have fun with colors, background and text.
6. Create simple website
CSS measures and properties
https://www.w3.org/Style/Examples/007/units.en.html

Percentage (%) - expressed as a percentage in relation to the containing element.

Pixel Unit (PX) - Fixed unit size in pixels dots on your computer screen.

EM unit (EM) - Scalable unit. em unit is relative to the font-size of the parent.

REM unit (REM) - Scalable unit. The rem unit is relative to the root html element. *not used
often
Divs and Spans
Using divs and spans can help with the selection
of elements.

example7.html
Styling text
http://www.blindtextgenerator.com/snippets?
snipps=ANY-snippets-lorem

example13.html
CSS Font Family
Using divs and spans can help with the selection of elements.

Example9.html

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
Google Fonts
https://fonts.google.com/

● Text-align
● Font-style
● Font-weight
● Font-size
● font-family
Exercise #2
Fun with text

1. Open editor
2. Open exercise2.html
3. Create new exercise2.css file
4. Apply CSS properties and values to different
element groups
5. Update the fonts and colors
6. Create your mini webpage
Images CSS floats
USe float to position images inline with text.

Try max-width to limit the size of an image.

example10.html
CSS floats
Floats are not just for images.

Clearing of floats

example11.html
BOX Model
https://www.w3.org/TR/CSS2/box.html

● Border, padding, margin, width/height

● Chrome inspector
Exercise #3
1. create background of body to color #3C3176;
2. make H2 #10073B
3. make section background #867DB0 with dotted border. add small margin top/bottom only to
separate the sections. Padding for slight indent of text. Add a minimum height to the sections
4. create nav bar - using padding and colors #231858 background #FFF font;
5. make logo font color white, align center, font 6. size 1.5em and font style fantasy
import your favorite google font and add to the body
7. footer padding and centered text with grey background
8. images to max size of 150px and to be right aligned
CSS Outline
The outline-style property specifies the style of
the outline.

Example outline.css
CSS positioning
https://developer.mozilla.org/en-US/docs/Web/CSS/position

● Static : The default value places the item in the normal flow
● Relative : The item is placed in the normal flow, and then shifted or offset from that
position. Subsequent flow items are laid out as if the item had not been moved.
● Absolute : Specifies absolute positioning. The element is positioned in relation to its nearest
non-static ancestor.
● Fixed : The item is absolutely positioned in a fixed position on the screen even as the rest of
the document is scrolled

example12.html
CSS positioning
● left,top,right,bottom

example12.html
Exercise #4
Move the Box around in different positions.
CSS for hyperlinks
a:link - default - unvisited link

a:visited - visited link

a:hover - when the mouse cursor is over the link

a:active -when the link is clicked

Example links.css
CSS for tables
The way a table is styled should be done using
CSS. Lots of options to make your table look
good.

Example tables.css
Overflow and MaxWidth/Height
Overflow tells the browser how to handle
content that does not fit within the element.

Max width and height force on responsive when

available to restrict the height value to the max.

Example : overflow.css
Align Elements
Aligning of elements can be done with
several options available including
margins, padding, display positions.

Example align.css
Thank you
Thank you for taking the course, and reading this PDF. If you have any questions of suggestions
please connect with me on Udemy.

https://www.udemy.com/user/lars51/

Laurence Svekis