Scribd
Upload
2 views

04 CSS

The document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its purpose, syntax, and various methods for implementation. It covers key concepts such as selectors, properties, colors, and layout techniques, along with examples for better understanding. Additionally, it discusses the box model, text formatting, and navigation bar creation using CSS.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

04 CSS

The document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its purpose, syntax, and various methods for implementation. It covers key concepts such as selectors, properties, colors, and layout techniques, along with examples for better understanding. Additionally, it discusses the box model, text formatting, and navigation bar creation using CSS.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

Cascading Style Sheets

(CSS)
Dr- AlaaEddin Almabhouh
Web Programming
OUTLINE

• Motivation of CSS
• CSS Syntax
• Three Ways to Insert CSS
• CSS Colors
• CSS Properties
• CSS Layout
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 SYNTAX

 A CSS rule-set consists of a selector and a declaration block:

‒ 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.
‒ A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.
THE ELEMENT SELECTOR

 The element selector selects elements based on the element name.


 You can select all <p> elements on a page like this (in this case, all <p> elements will be
center-aligned, with a red text color):

p{
text-align: center;
color: red;
}
THE ELEMENT SELECTOR - EXAMPLE

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {color: gray;}
</style>
</head>

<body>

<h1>My Heading</h1>
<p>This is a simple paragraph</p>

</body>
</html>
THE ID SELECTOR

 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element should be unique within a page, so the id selector is used to select
one unique element!
 To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
 Example:

#para1 { <p id="para1">Hello World!</p>


text-align: center; <p> This paragraph is not affected by the style.</p>
color: red;
}
THE CLASS SELECTOR

 The class selector selects elements with a specific class attribute.


 To select elements with a specific class, write a period (.) character,
followed by the name of the class.
 Example:

.center { <h1 class="center">Red and center-aligned


text-align: center; heading</h1>
color: red; <p class="center">Red and center-aligned
} paragraph.</p>
THE CLASS SELECTOR (CONT.)

p.center {
 You can also specify that only
text-align: center;
specific HTML elements should color: red;
be affected by a class. }

 HTML elements can also refer to <p class="center large">This paragraph


more than one class. refers to two classes.</p>
GROUPING SELECTORS

 If you have elements with the same style definitions, 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;
}
CSS COMMENTS

p{
 Comments are used to explain the color: red;
code, and may help when you edit /* This is a single-line comment */
the source code at a later date. text-align: center;
}
 Comments are ignored by browsers.
 A CSS comment starts with /* and /* This is
ends with */. Comments can also span a multi-line
comment */
multiple lines
THREE WAYS TO INSERT CSS

There are three ways of inserting a style sheet:


• Inline Styles
 <p style="color: blue">
• Internal Style Sheets
 <style>
p { color: blue; }
</style>
• External Style Sheets
 <link rel="stylesheet" type="text/css" href="style.css">
CSS Colors
Colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
COLOR NAMES

<h1 style="background-color:DodgerBlue;">Hello World</h1>


 Background Color <p style="background-color:Tomato;">Lorem ipsum...</p>

<h1 style="color:Tomato;">Hello World</h1>


 Text Color <p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

<h1 style="border:2px solid Tomato;">Hello World</h1>


 Border Color <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
COLOR VALUES

In HTML, colors can also be specified using RGB values, HEX
values, and HSL values:
‒ rgb(255, 99, 71)
‒ #ff6347
‒ hsl(9, 100%, 64%)
RGB VALUE

 In HTML, a color can be specified as an RGB value, using this formula:


rgb(red, green, blue)
 Each parameter (red, green, and blue) defines the intensity of the color between
0 and 255.
 For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
 To display the color black, all color parameters must be set to 0, like this: rgb(0,
0, 0).
 To display the color white, all color parameters must be set to 255, like this:
rgb(255, 255, 255).
HEX VALUE

 In HTML, a color can be specified using a hexadecimal value in the form:


#rrggbb
 Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00
and ff (same as decimal 0-255).
 For example, #ff0000 is displayed as red, because red is set to its highest
value (ff) and the others are set to the lowest value (00).
HSL VALUE

 In HTML, a color can be specified using hue, saturation, and lightness (HSL)
in the form:
hsl(hue, saturation, lightness)
‒ Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240
is blue.
‒ Saturation (‫ )عبشتلا‬is a percentage value, 0% means a shade of gray, and 100% is
the full color.
‒ Lightness (‫ )ةءاضإ‬is also a percentage, 0% is black, 50% is neither light or dark,
100% is white
CSS Properties
CSS BACKGROUNDS

 The CSS background properties are used to define the background effects for elements.
 CSS background properties:

Property Description
background Sets all the background properties in one declaration
background- Sets whether a background image is fixed or scrolls with
attachment the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
BACKGROUND IMAGE

 By default, the background-image property repeats an image both


horizontally and vertically.
 Some images should be repeated only horizontally or vertically, or they will
look strange.
 To repeat an image horizontally, set background-repeat: repeat-x;
 To repeat an image vertically, set background-repeat: repeat-y;
CSS BORDER

 The border-style property specifies what kind of border to display.


 The following values are allowed:
‒ 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
ROUNDED BORDERS

 The border-radius property is used to add rounded borders to an element:

p{
border: 2px solid red;
border-radius: 5px;
}
CSS MARGINS

 The CSS margin properties are used to create space around elements,
outside of any defined borders.
 With CSS, you have full control over the margins. CSS has properties for
specifying the margin for each side of an element:
‒ margin-top
‒ margin-right
‒ margin-bottom
‒ margin-left
CSS MARGINS (CONT.)

 All the margin properties can have the following


div {
values:
border: 1px solid red;
‒ auto - the browser calculates the margin margin-left: 100px;
‒ length - specifies a margin in px, pt, cm, etc. }
‒ % - specifies a margin in % of the width of the
containing element p.ex1 {
margin-left: inherit;
‒ inherit - specifies that the margin should be
}
inherited from the parent element

p{
margin: 25px 50px 75px 100px;
}
CSS PADDING

 The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
 CSS has properties for specifying the padding for each side of an element:
‒ padding-top
‒ padding-right
‒ padding-bottom
‒ padding-left
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.
CSS TEXT
Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user

unicode-bidi Used together with the direction property to set or return whether the text should be overridden to
support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
CSS FONTS

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a
small-caps font
font-weight Specifies the weight of a font
CSS ICONS

 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

 To use the Font Awesome icons, add the following line inside the <head>
section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/4.7.0/css/font-awesome.min.css">
CSS Layout
CSS LAYOUT - THE POSITION PROPERTY

 The position property specifies the type of positioning method used for an
element.
• The position property:
 static: normal position
 relative: relative to the normal position
  the left and top properties specify offsets from the normal position
 absolute: relative to first non-static parent (or html)
  The element's position can be specified with the left,
 top, right, and bottomproperties
 fixed: relative to the browser window
POSITIONING TIPS

When elements overlap, use z-index property to specify which one is in


front
For absolute placements, the left, right, bottom, and top properties
specify the distance of a box side from its enclosing box
Setting bottom to 0 can be used to force a box
to fill the enclosing box
POSITION PROPERTY

Property Description
bottom Sets the bottom margin edge for a positioned box
clip Clips an absolutely positioned element
left Sets the left margin edge for a positioned box
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box
z-index Sets the stack order of an element
CSS LAYOUT - OVERFLOW

 The CSS overflow property controls what happens to content that is too big
to fit into an area.

Property Description
overflow Specifies what happens if content overflows an element's
box
overflow-x Specifies what to do with the left/right edges of the
content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the
content if it overflows the element's content area
CSS LAYOUT - FLOAT AND CLEAR

 The CSS float property specifies how an element should float.


 The float property can have one of the following values:
‒ left - The element floats to the left of its container
‒ right- The element floats to the right of its container
‒ none - The element does not float (will be displayed just where it occurs in the
text). This is default
‒ inherit - The element inherits the float value of its parent

img {
float: right;
}
CSS OPACITY / TRANSPARENCY

 The opacity property specifies the opacity/transparency of an element.


 The opacity property can take a value from 0.0 - 1.0.

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
CSS NAVIGATION BAR

 With CSS you can transform boring HTML menus into good-looking navigation
bars.
 A navigation bar needs standard HTML as a base.
 A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense.
CSS WEBSITE LAYOUT

See an attached example


REFERENCES

• W3Schools
 http://www.w3schools.com/css
• Tutorials Point
 https://www.tutorialspoint.com/css

You might also like