Web Programming
CSS
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 file.
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.
HTML was not intended to contain tags for formatting a web page, but to describe
the content of a web page. 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 Syntax
● A CSS rule 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 indicating CSS
property name, value pair, separated by semicolons.
● Multiple declaration blocks are surrounded by curly braces.
CSS Example
p { ● p is a selector in CSS (it points to the
HTML element you want to style:
color: red;
<p>).
text-align: center; ● color is a property, and red is the
property value
}
● text-align is a property, and center is
the property value
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
CSS element Selector: The element selector selects HTML elements based on the
element name.
CSS id Selector: The id selector uses the id attribute of an HTML element to select a
specific element. The id of an element is unique within a page, so the id selector is
used to select one unique element!
CSS class Selector: The class selector selects HTML elements with a specific class
attribute.
CSS Selectors Examples
CSS element Selector: CSS id Selector: CSS class Selector:
p { #para1 { .center {
Text-align: text-align: text-align:
center; center; center;
color: red; color: red; color: red;
} } }
How to Add CSS
There are three ways of inserting a style sheet:
- External CSS
- Internal CSS
- Inline CSS
When a browser reads a style sheet, it will format the HTML document according to
the information in the style sheet.
External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file. Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>...</body>
</html>
External CSS
● The [Link] is the external CSS file. This can be created using any text editor,
and it must have the .css file extension.
● The external .css file should not contain any HTML tags.
“[Link]” example:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
The internal style is defined inside the <style> element, inside the head section. It
may be used if one single HTML page has a unique style.
<head>
<style>
body {
background-color: linen;
}
h1 {
margin-left: 40px;
}
</style>
</head>
Inline CSS
To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property. It may be used to apply a unique style for a
single element.
<body>
<h1 style="color:blue;text-align:center;">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
CSS Comments
Comments are used to explain the code, and may help when you edit the source code
at a later date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */
Example:
/* This is a single-line comment */
p{
color: red;
}
CSS Colors
CSS colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
● A color can be specified by using a predefined color name (Tomato, Orange,
Violet, Gray, SlateBlue etc)
● Colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values.
○ rgb(255, 99, 71), #ff6347, hsl(9, 100%, 64%) - all of these numbers
represent the color Tomato.
● It is possible to change the transparency of a color.
○ rgba(255, 99, 71, 0.5) and hsla(9, 100%, 64%, 0.5) is Tomato, but 50%
transparent.
CSS Colors
● CSS Background Color:
○ <h1 style="background-color:DodgerBlue;">Hello
World</h1>
● CSS Text Color:
○ <p style="color:DodgerBlue;">Lorem ipsum...</p>
● CSS Border Color:
○ <h1 style="border:2px solid Violet;">Hello World</h1>
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
Some commonly used background properties are:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color
The background-color property specifies the background color of an element.
body {
background-color: lightblue;
}
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.
body {
background-image: url("[Link]");
}
CSS background-repeat
By default, the background-image property repeats an image both horizontally and
vertically.
● To repeat an image horizontally:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
● To repeat an image vertically:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
CSS background-repeat
Showing the background image only once is also specified by the background-repeat
property:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
CSS background-position
The background-position property is used to specify the position of the background
image. To position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS background-attachment
The background-attachment property specifies whether the background image
should scroll or be fixed.
Specify that the background image Specify that the background image
should be fixed: should scroll with the page:
body { body {
background-image: background-image:
url("img_tree.png"); url("img_tree.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right background-position: right
top; top;
background-attachment: fixed; background-attachment:
} scroll;
}
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border.
● border-style: specifies what kind of border to display. The allowed values are
dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.
● border-width: specifies the width of the four borders. The width can be set as a
specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick.
● border-color: used to set the color of the four borders.
CSS Border - Individual Sides
It is possible to assign a different border for each side. Each border property can also
take from one to four values.
● If the border-style property has four values:
border-style: dotted solid double dashed;
○ top border is dotted
○ right border is solid
○ bottom border is double
○ left border is dashed
● If the border-style property has three values:
border-style: dotted solid double;
CSS Border - Individual Sides
● If the border-style property has three values:
border-style: dotted solid double;
○ top border is dotted
○ right and left borders are solid
○ bottom border is double
● If the border-style property has two values:
border-style: dotted solid;
○ top and bottom borders are dotted
○ right and left borders are solid
● If the border-style property has one value:
border-style: dotted;
○ all four borders are dotted
CSS border-radius
The border-radius property is used to add rounded borders to an element:
Example:
p {
border: 2px solid red;
border-radius: 5px;
}
CSS Box Model
The CSS box model is essentially a box that wraps around every HTML element. It
consists of: content, padding, borders and margins.
● 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 Box Model
CSS Margin
The CSS margin properties 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
To shorten the code, it is possible to specify all the margin properties in one property,
which can have one to four values (similar to how CSS borders work).
CSS Margin
● The auto Value: You can set the margin property to auto to horizontally center
the element within its container. The element will then take up the specified
width, and the remaining space will be split equally between the left and right
margins.
● The inherit Value: This example lets the left margin of the <p class="ex1">
element be inherited from the parent element (<div>)
● The length value: specifies a margin in px, pt, cm, etc.
● The % value: % - specifies a margin in % of the width of the containing element.
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
CSS Padding
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
Padding has the similar shorthand property as margin.
CSS Text
Using CSS, we can format a text by adding
- Color
- Background color
- Alignment
- Decoration and transformation
- Transformation etc.
We’ve already seen how we can add color and background color to text elements.
CSS Text Alignment
● text-align: The text-align property is used to set the horizontal alignment of a
text. A text can be left or right aligned, centered, or justified.
● text-align-last: The text-align-last property specifies how to align the last line
of a text.
● vertical-align: The vertical-align property sets the vertical alignment of an
element. Allowed values are: baseline, text-top, text-bottom, sub and super.
CSS Text Spacing
● text-indent: The text-indent property is used to specify the indentation of the
first line of a text:
● letter-spacing: The letter-spacing property is used to specify the space
between the characters in a text.
● line-height: The line-height property is used to specify the space between lines.
● word-spacing: The word-spacing property is used to specify the space between
the words in a text.
CSS Fonts
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.
In CSS, we use the font-family property to specify the font of a text.
CSS Fonts
Web Safe Fonts: Web safe fonts are fonts that are universally installed across all
browsers and devices.
Fallback Fonts: There are no 100% completely web safe fonts. There is always a
chance that a font is not found or is not installed [Link], it is very
important to always use fallback fonts.
By a list of similar "backup fonts" in the font-family property, if the first font does not
work, the browser will try the next one, and the next one, and so on. Always end the
list with a generic font family name.
CSS Fonts
Best Web Safe Fonts for HTML and CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
CSS Fonts
● font-style: The font-style property is mostly used to specify italic text.
This property has three values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
● font-weight: The font-weight property specifies the weight of a font. Common
values are normal, bold etc.
CSS Fonts
● font-size: The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should
not use font size adjustments to make paragraphs look like headings, or headings
look like paragraphs.
You can set the font size using a variety of metrics such as px, em, % etc.
CSS Fonts
The font-size value can be an absolute, or relative size.
Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
CSS Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
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
CSS Lists
● Different List Item Markers: The list-style-type property specifies the type of
list item marker, like circle, square, upper-roman, lower-alpha etc.
● An Image as The List Item Marker: The list-style-image property specifies an
image as the list item marker by adding the reference inside url().
● Remove Default Settings: The list-style-type:none property can also be used to
remove the markers/bullets.
● Styling List With Colors: We can also style lists with colors, to make them look
a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:
CSS Tables
Try adding some styles yourself.
- Add or remove borders
- Add some margin and padding
- Align the texts
- Set some background colors
- Set the table size, height and width
Thank You.