Week 4 Cascading Style Sheets

Week 4: Cascading Style Sheets

&nbsp &nbsp

1. CSS Syntax¶

Selection: HTML element you want to style
Declaration: includes a property name and a value, separated by a colon; one of more declarations separated by semicolons

2. Ways to use CSS¶

Inline: using the style attribute inside HTML elements
Internal: using the style element in the head sectio
External: using a link element to an external CSS file

2.1 Inline CSS¶

<h1 style="color:blue;font-size: 30px">Introduction</h1>

2.2 Internal CSS¶

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

Example: see the text color, font size and font for ALL the <h1> elements

3. Internal CSS: Selector¶

For an internal CSS, we have severl ways to specify the selector.

3.1 type selector¶

Type selector is referred to a element selector.

p {text-align: center; color: red;}

Exercise 1: Add Interval CSS based on element¶

Add internal css for <p>
Add internal css for <h1> or other heading

3.2 id selector¶

id is used to specify a unique id for an HTML element and must be unique within the HTML document.
The id of an element is better to be unique within a page
You can have multiple element with same id but functions will only return the first matching element

Exercise 2: Add Internal CSS based on id¶

Step 1: add the id for a element

<p id="intro">Hello World!</p>

Step 2: write a hash (#) then followed by an id name and define the CSS within curly braces {}

<style>#intro{text-align: center;color: red;}</style>

3.3 class selector¶

class attribute is used to asign one or more class names to an HTML element
class selector starts with a (.) dot
It allows you to apply CSS styles and JavaScript functions to multiple elements with the same class
Multiple class names can be assigned to an element by separating them with spaces
Class is used to specify a class for an HTML element
Multiple HTML elements can share the same class

In the below example, all HTML elements with class "intro" will be red and center-aligned

.intro { text-align: center; color: red; }

Exercise 3: Add Internal CSS based on class¶

Add class for a element
Add internal css for elements with same class

3.4 Targeting classess on particular element¶

<style> h1.intro{ color: red;} </style>

<h1 class="intro"> Introduction</h1>

<p class="intro"> Hi, My name is Nancy</p>

3.5 Universal selector¶

Use the universal selector by itself to set global styles for a page

*{}

Use the universal selector in combination with a descendant combinator to select all elements inside a specific ancestor elements

For example, selects all elements inside the <p> element

p *

4. Cascading order for Inline, Internal and External style sheets¶

The priority is highest to lowest from 1 to 3

Inline style
Internal style
External style

So, an inline style will override external and internal styles.

Exercise 4: Test priority of inline and internal style¶

Create inline style and internal style for same element to see the difference

5. Descendant selector¶

The descendant combinator — typically represented by a single space (" ") character

Example 1: p element under class intro .intro p

Example 2: the a element under nav element nav a

We have two list in different section (navigation bar and education section)

Try to change the style of list in navigation bar but does not influence the list in education section

See difference between nav ul li and li

6. Pseudo-classes¶

A Pseudo-class is used to define a special state of an element

For example:

Style visited and unvisited links differently

Links can be styled in many different ways

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link the user mouses over it
a:active- a link the moment it is clicked

Syntax:

7. Display property¶

The display property is the most important CSS property for controlling layout.

The display property is used to specify how an element is shown on a web page.

Example of Display Property

Attributes for <nav> tag

Attributes for <li> tag

Attributes for <a> tag

8. Margin, border and padding¶

Source

8.1 Margin property¶

margin: 25px 50px 75px 100px
padding: 25px 50px 75px 100px
- top margin is 25 px
- right margin is 50 px
- bottom margin is 75 px
- left margin is 100px
margin-top: 120px;

margin-left: 200px;

margin-right: 200px;
border

First, you can set up the border to solid to distinguish where is the margin and where is the padding

9. Float¶

The float is used for positioning and formatting content to the specific location

Demo of Different values of the display property

Exercise 8: Beautify Intro section (float, margin, padding, border)¶

set up your div into left or right

float: left;

set up margin, or padding, or border for your different section

margin-left: 200px;
margin-top: 100px;
margin-right: 200px;

Exercise 9: Beautify Figure (margin, padding, border) using external css¶

Figure is special because it contain two parts, one is img and one is Figureshare

Modify the image size

Place three Figures in a line horizontally
- display: flex;
- justify-content: center;
- gap: 250px;

Add the extra information to to footer

like address, copyright

Embead a google map

Week 4 Cascading Style Sheets