Scribd
Upload
13 views8 pages

Lesson HTML Css

The document provides an overview of various HTML tags, including list tags, media elements like <video> and <audio>, and CSS properties for styling. It explains the usage of class and id attributes, CSS selectors, and the differences between them. Additionally, it covers CSS syntax, background properties, and border styles, illustrating how to apply styles to HTML elements.

Uploaded by

poloshine544
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views8 pages

Lesson HTML Css

The document provides an overview of various HTML tags, including list tags, media elements like <video> and <audio>, and CSS properties for styling. It explains the usage of class and id attributes, CSS selectors, and the differences between them. Additionally, it covers CSS syntax, background properties, and border styles, illustrating how to apply styles to HTML elements.

Uploaded by

poloshine544
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML List Tags ">

<ul> Defines an unordered list <source src="horse.mp3" type="audio/mpe


The CSS list-style-type property is used to define the style of the list item g">
marker.
<ul style="list-style-type:disc;">
Your browser does not support the audio
circle Sets the list item marker to a circle element.
square Sets the list item marker to a square </audio>
none The list items will not be marked
<ol> Defines an ordered list
<ol type="1"> <audio controls autoplay muted>
type="1" The list items will be numbered with <source src="horse.ogg" type="audio/ogg
numbers (default) ">
type="A" The list items will be numbered with
uppercase letters
<source src="horse.mp3" type="audio/mpe
type="a" The list items will be numbered with g">
lowercase letters Your browser does not support the audio
type="I" The list items will be numbered with
element.
uppercase roman numbers
type="i" The list items will be numbered with lowercase roman </audio>
numbers
<li> Defines a list item
<dl> Defines a description list HTML Block and Inline Elements
<dt> Defines a term in a description list
<dd> Describes the term in a description list
<div> Defines a section in a document (block-level)
HTML Video Tags
<video> Defines a video or movie <span> Defines a section in a document (inline)
<source> Defines multiple media resources for media elements, HTML Div Element
such as <video> and <audio>
<track> Defines text tracks in media players
The <div> element is by default a block element,
meaning that it takes all available width, and
The controls attribute adds video controls, like play, pause, comes with line breaks before and after.
and volume.

<div> as a container
It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the <div>
video loads. <h2>London</h2>
<p>London is the capital city of
The text between the <video> and </video> tags will only be England.</p>
displayed in browsers that do not support the <video>
element.
<p>London has over 9 million
inhabitants.</p>
<video width="320" height="240" controls> </div>
<source src="movie.mp4" type="video/mp4"> Center align a <div> element
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag. <style>
</video> div {
width:300px;
HTML <video> Autoplay
margin:auto;
<video width="320" height="240" autoplay>
}
<source src="movie.mp4" type="video/mp4"> </style>
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
Multiple <div> elements
</video> <div style="background-color:#FFF4A3;">
The HTML <audio> Element
<h2>London</h2>
<p>London is the capital city of
<audio controls> England.</p>
<source src="horse.ogg" type="audio/ogg <p>London has over 9 million
">
inhabitants.</p>
<source src="horse.mp3" type="audio/mpe
</div>
g">
Your browser does not support the audio
element. <div style="background-color:#FFC0C7;">
</audio> <h2>Oslo</h2>
The controls attribute adds audio controls, like <p>Oslo is the capital city of
play, pause, and volume. Norway.</p>
<p>Oslo has over 700,000
inhabitants.</p>
The <source> element allows you to specify
alternative audio files which the browser may </div>
choose from. The browser will use the first
recognized format. <div style="background-color:#D9EEE1;">
<h2>Rome</h2>
The text between the <audio> and </audio> tags <p>Rome is the capital city of
will only be displayed in browsers that do not Italy.</p>
support the <audio> element. <p>Rome has over 4 million
inhabitants.</p>
HTML <audio> Autoplay </div>

<audio controls autoplay>


<source src="horse.ogg" type="audio/ogg
.city {
The class Attribute background-color: tomato;
color: white;
The class attribute is often used to point to a padding: 10px;
class name in a style sheet. It can also be used by }
a JavaScript to access and manipulate elements .main {
with the specific class name. text-align: center;
}
In the following example we have </style>
three <div> elements with a class attribute with </head>
the value of "city". All of the three <div> elements <body>
will be styled equally according to the .city style <h2>Multiple Classes</h2>
definition in the head section: <p>Here, all three h2 elements belongs to the
<!DOCTYPE html> "city" class. In addition, London also belongs to
<html> the "main" class, which center-aligns the
<head> text.</p>
<style> <h2 class="city main">London</h2>
.city { <h2 class="city">Paris</h2>
background-color: tomato; <h2 class="city">Tokyo</h2>
color: white;
border: 2px solid black; Different Elements Can Share Same Class
margin: 20px;
padding: 20px;
Different HTML elements can point to the same
}
class name.
</style>
</head>
In the following example, both <h2> and <p> point
<body>
to the "city" class and will share the same style:
<style>
<div class="city"> .city {
<h2>London</h2> background-color: tomato;
<p>London is the capital of color: white;
England.</p> padding: 10px;
</div> }
</style>
<div class="city"> </head>
<h2>Paris</h2> <body>
<p>Paris is the capital of France.</p>
</div> <h2>Different Elements Can Share Same
Class</h2>
<div class="city">
<h2>Tokyo</h2> <p>Even if the two elements do not have
<p>Tokyo is the capital of Japan.</p> the same tag name, they can both point to
</div> the same class, and get the same CSS
styling:</p>
</body>
</html> <h2 class="city">Paris</h2>
Note: The class name is case sensitive! <p class="city">Paris is the capital of
The Syntax For Class France.</p>
To create a class; write a period (.)
HTML id Attribute
character, followed by a class name.
The HTML id attribute is used to specify a unique id
Then, define the CSS properties within
for an HTML element.
curly braces {}:
Multiple Classes
The id attribute specifies a unique id for an HTML
element. The value of the id attribute must be
HTML elements can belong to more than one unique within the HTML document.
class.
The id attribute is used to point to a specific style
To define multiple classes, separate the class declaration in a style sheet. It is also used by
names with a space, e.g. <div class="city JavaScript to access and manipulate the element
main">. The element will be styled according to with the specific id.
all the classes specified.
The syntax for id is: write a hash character (#),
In the following example, the first <h2> element followed by an id name. Then, define the CSS
belongs to both the city class and also to properties within curly braces {}.
the main class, and will get the CSS styles from
both of the classes:
In the following example we have an <h1> element
that points to the id name "myHeader".

<style>
This <h1> element will be styled according to The CSS element Selector
the #myHeader style definition in the head section:
<!DOCTYPE html> The element selector selects HTML elements based on
<html> the element name.
<head> p {
<style> text-align: center;
#myHeader { color: red;
}
background-color: lightblue;
color: black; The CSS id Selector
padding: 40px;
text-align: center; The id selector uses the id attribute of an HTML
} element to select a specific element.
</style>
</head> The id of an element is unique within a page, so the id
<body> selector is used to select one unique element!

<h1 id="myHeader">My Header</h1> To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
#para1 {
</body>
text-align: center;
</html> color: red;
Note: The id name is case sensitive! }
Note: The id name must contain at least one character,
The CSS class Selector
cannot start with a number, and must not contain
whitespaces (spaces, tabs, etc.). The class selector selects HTML elements with a
Difference Between Class and ID specific class attribute.
A class name can be used by multiple HTML elements,
while an id name must only be used by one HTML To select elements with a specific class, write a period
(.) character, followed by the class name.
element within the page .center {

What is CSS? text-align: center;


color: red;
}
 CSS stands for Cascading Style Sheets HTML elements can also refer to more than one class.
 CSS describes how HTML elements are to be
displayed on screen, paper, or in other media In this example the <p> element will be styled
CSS Syntax according to class="center" and to class="large":
<p class="center large">This paragraph refers
to two classes.</p>

The CSS Universal Selector

The universal selector (*) selects all HTML elements on


the page
The selector points to the HTML element you want to * {
style. text-align: center;
color: blue;
The declaration block contains one or more }
declarations separated by semicolons.
The CSS Grouping Selector
h1, h2, p {
Each declaration includes a CSS property name and a text-align: center;
value, separated by a colon. color: red;
}
Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded by Three Ways to Insert CSS
curly braces.
There are three ways of inserting a style sheet:
CSS Selectors
 External CSS-are defined within the <link>
CSS selectors are used to "find" (or select) the HTML element, inside the <head> section of an HTML
elements you want to style. page

We can divide CSS selectors into five categories: <link rel="stylesheet" href="mystyle.css">

 Simple selectors (select elements based on Note: Do not add a space between the property value
name, id, class) (20) and the unit (px):
 Combinator selectors (select elements based Incorrect (space): margin-left: 20 px;
on a specific relationship between them) Correct (no space): margin-left: 20px;
 Pseudo-class selectors (select elements based
on a certain state)  Internal CSS- Internal styles are defined within
 Pseudo-elements selectors (select and style a the <style> element, inside the <head>
part of an element) section of an HTML page:
 Attribute selectors (select elements based on
an attribute or attribute value)
<!DOCTYPE html>  center center
<html>  left bottom
<head>  50% 50% (same as center center)
<style>
body { CSS background-attachment
background-color: linen; The background-attachment property specifies
} whether the background image should scroll or be
fixed (will not scroll with the rest of the page):
h1 { Specify that the background image should be fixed:
color: maroon;
body {
margin-left: 40px;
background-image: url("img_tree.png");
}
</style> background-repeat: no-repeat;
</head> background-position: right top;
background-attachment: fixed;
}
 Inline CSS-An inline style may be used to apply
a unique style for a single element. Specify that the background image should scroll with
the rest of the page:
body {
<h1 style="color:blue;text-
background-image: url("img_tree.png");
align:center;">This is a heading</h1>
background-repeat: no-repeat;
<p style="color:red;">This is a
paragraph.</p> background-position: right top;
background-attachment: scroll;
CSS Backgrounds }
body {
background-color: lightblue; CSS Borders
} p.dotted {border-style: dotted;}
Other Elements p.dashed {border-style: dashed;}
h1 { p.solid {border-style: solid;}
background-color: green; p.double {border-style: double;}
} p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
div { p.inset {border-style: inset;}
background-color: lightblue; p.outset {border-style: outset;}
} p.none {border-style: none;}
p.hidden {border-style: hidden;}
p { p.mix {border-style: dotted dashed solid
background-color: yellow; double;}
}
CSS Border Width
Opacity / Transparency p.one {
The opacity property specifies the border-style: solid;
opacity/transparency of an element. It can take a value border-width: 5px;
from 0.0 - 1.0. The lower value, the more transparent: }
div {
background-color: green; p.two {
opacity: 0.3; border-style: solid;
} border-width: medium;
body { }
background-image: url("paper.gif");
} p.three {
p { border-style: dotted;
background-image: url("paper.gif"); border-width: 2px;
}
}
p.four {
CSS background-repeat
border-style: dotted;
If the image above is repeated only horizontally
border-width: thick;
(background-repeat: repeat-x;), the background }
will look better:
body { CSS Border Color
background-image: url("gradient_bg.png"); The border-color property is used to set the color of
background-repeat: repeat-x; the four borders.
}
p.one {
CSS background-repeat: no-repeat border-style: solid;
body { border-color: red;
background-image: url("img_tree.png"); }
background-repeat: no-repeat;
} p.two {
border-style: solid;
CSS background-position border-color: green;
body { }
background-image: url("img_tree.png");
p.three {
background-repeat: no-repeat;
border-style: dotted;
background-position: right top; border-color: blue;
} }
 left top
 right top CSS Border - Shorthand Property
 border-width The auto Value
 border-style (required)
 border-color
You can set the margin property to auto to horizontally
p { center the element within its container.
border: 5px solid red;
} The element will then take up the specified width, and
the remaining space will be split equally between the
Left Border left and right mar
p {
border-left: 6px solid red; div {
} width: 300px;
margin: auto;
Bottom Border border: 1px solid red;
}
p {
border-bottom: 6px solid red; CSS Padding
}
Padding is used to create space around an element's
CSS Margins content, inside of any defined borders.

Margins are used to create space around elements, Padding - Individual Sides
outside of any defined borders.
CSS has properties for specifying the padding for each
 margin-top side of an element:
 margin-right
 margin-bottom  padding-top
 margin-left  padding-right
 padding-bottom
All the margin properties can have the following  padding-left
values:
All the padding properties can have the following
 auto - the browser calculates the margin values:
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the  length - specifies a padding in px, pt, cm, etc.
containing element  % - specifies a padding in % of the width of the
 inherit - specifies that the margin should be containing element
inherited from the parent element  inherit - specifies that the padding should be
p { inherited from the parent element
margin-top: 100px;
margin-bottom: 100px;
Note: Negative values are not allowed.
margin-right: 150px;
margin-left: 80px; Padding - Shorthand Property
}

Margin - Shorthand Property To shorten the code, it is possible to specify all the
padding properties in one property.

The margin property is a shorthand property for the


following individual margin properties: The padding property is a shorthand property for the
following individual padding properties:

 margin-top
 margin-right
 padding-top
 margin-bottom
 padding-right
 margin-left
 padding-bottom
p {  padding-left
margin: 25px 50px 75px 100px;
} If the padding property has four values:

If the margin property has three values:  padding: 25px 50px 75px 100px;
o top padding is 25px
o right padding is 50px
 margin: 25px 50px 75px;
o top margin is 25px o bottom padding is 75px
o right and left margins are 50px o left padding is 100px
o bottom margin is 75px
If the padding property has two values:
If the margin property has two values:
 padding: 25px 50px;
o top and bottom paddings are 25px
 margin: 25px 50px;
o top and bottom margins are 25px o right and left paddings are 50px
o right and left margins are 50px
If the padding property has one value:
Use the margin shorthand property with one value:
 padding: 25px;
p {
o all four paddings are 25px
margin: 25px;
} Padding and Element Width
The CSS width property specifies the width of the
element's content area. The content area is the portion a:active {
inside the padding, border, and margin of an element background-color: hotpink;
(the box model). }

So, if an element has a specified width, the padding Link Buttons


added to that element will be added to the total width
of the element. This is often an undesirable result. This example demonstrates a more advanced example
where we combine several CSS properties to display
To keep the width at 300px, no matter the amount of links as boxes/buttons:
padding, you can use the box-sizing property. This a:link, a:visited {
causes the element to maintain its actual width; if you background-color: #f44336;
increase the padding, the available content space will color: white;
decrease padding: 14px 25px;
text-align: center;
div { text-decoration: none;
width: 300px; display: inline-block;
padding: 25px; }
box-sizing: border-box;
} a:hover, a:active {
background-color: red;
CSS Links }
Another example of how to create link boxes/buttons:
Styling Links a:link, a:visited {
background-color: white;
Links can be styled with any CSS property color: black;
(e.g. color, font-family, background, etc.). border: 2px solid green;
padding: 10px 20px;
a { text-align: center;
color: hotpink; text-decoration: none;
} display: inline-block;
}
The four links states are:
a:hover, a:active {
 a:link - a normal, unvisited link background-color: green;
 a:visited - a link the user has visited color: white;
 a:hover - a link when the user mouses over it }
 a:active - a link the moment it is clicked This example demonstrates the different types of cursors (can be useful for
links)
Text Decoration <span style="cursor: auto">auto</span><br>
<span style="cursor:
The text-decoration property is mostly used to remove crosshair">crosshair</span><br>
underlines from links: <span style="cursor:
default">default</span><br>
<span style="cursor: e-resize">e-
resize</span><br>
<span style="cursor: help">help</span><br>
a:link {
text-decoration: none; <span style="cursor: move">move</span><br>
} <span style="cursor: n-resize">n-
resize</span><br>
a:visited { <span style="cursor: ne-resize">ne-
text-decoration: none; resize</span><br>
} <span style="cursor: nw-resize">nw-
resize</span><br>
a:hover { <span style="cursor:
text-decoration: underline; pointer">pointer</span><br>
} <span style="cursor:
progress">progress</span><br>
a:active {
<span style="cursor: s-resize">s-
text-decoration: underline;
resize</span><br>
}
<span style="cursor: se-resize">se-
Background Color resize</span><br>
<span style="cursor: sw-resize">sw-
resize</span><br>
The background-color property can be used to specify a
<span style="cursor: text">text</span><br>
background color for links:
a:link { <span style="cursor: w-resize">w-
background-color: yellow; resize</span><br>
} <span style="cursor: wait">wait</span>
CSS Forms
a:visited { The look of an HTML form can be greatly improved with CSS:
background-color: cyan;
}
Styling Input Fields
a:hover {
background-color: lightgreen; Use the width property to determine the width of the
} input field:
input { background-position: 10px 10px;
width: 100%; background-repeat: no-repeat;
} padding-left: 40px;
}
 input[type=text] - will only select text fields
 input[type=password] - will only select password Animated Search Input
fields
 input[type=number] - will only select number fields In this example we use the CSS transition property to
animate the width of the search input when it gets
Padded Inputs focus. You will learn more about the transition property
later, in our CSS Transitions chapter.
Use the padding property to add space inside the text
field. input[type=text] {
transition: width 0.4s ease-in-out;
Tip: When you have many inputs after each other, you }
might also want to add some margin, to add more space
outside of them: input[type=text]:focus {
width: 100%;
}
input[type=text] {
width: 100%; Styling Textareas
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box; textarea {
} width: 100%;
height: 150px;
Bordered Inputs padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
Use the border property to change the border size and border-radius: 4px;
color, and use the border-radius property to add background-color: #f8f8f8;
rounded corners: resize: none;
}
input[type=text] {
border: 2px solid red; Styling Select Menus
border-radius: 4px;
} select {
width: 100%;
If you only want a bottom border, use the border- padding: 16px 20px;
bottom property: border: none;
border-radius: 4px;
background-color: #f1f1f1;
input[type=text] {
}
border: none;
border-bottom: 2px solid red;
}
Styling Input Buttons

Colored Inputs input[type=button], input[type=submit],


input[type=reset] {
background-color: #04AA6D;
Use the background-color property to add a background
border: none;
color to the input, and the color property to change the
color: white;
text color:
padding: 16px 32px;
text-decoration: none;
input[type=text] { margin: 4px 2px;
background-color: #3CBC8D; cursor: pointer;
color: white; }
}
CSS Website Layout
Focused Inputs

By default, some browsers will add a blue outline


Website Layout
around the input when it gets focus (clicked on). You
can remove this behavior by adding outline: none; to A website is often divided into headers, menus, content
the input. and a footer:

input[type=text]:focus {
background-color: lightblue;
}

Input with icon/image

If you want an icon inside the input, use the background-


image property and position it with the background-
position property. Also notice that we add a large left
padding to reserve the space of the icon:

input[type=text] { Header
background-color: white;
background-image: url('searchicon.png');
A header is usually located at the top of the website (or navigation or to specify information relevant to the
right below a top navigation menu). It often contains a main content. Change the widths as you like, only
logo or the website name: remember that it should add up to 100% in total:

.header { .column {
background-color: #F1F1F1; float: left;
text-align: center; }
padding: 20px;
}
/* Left and right column */
Navigation Bar .column.side {
width: 25%;
}
A navigation bar contains a list of links to help visitors
navigating through your website:
/* Middle column */
.column.middle {
/* The navbar container */
width: 50%;
.topnav {
overflow: hidden; }
background-color: #333;
} /* Responsive layout - makes the three
columns stack on top of each other
/* Navbar links */ instead of next to each other */
.topnav a { @media screen and (max-width: 600px) {
float: left; .column.side, .column.middle {
display: block; width: 100%;
color: #f2f2f2;
}
text-align: center;
padding: 14px 16px; }
text-decoration: none;
} Footer

/* Links - change color on hover */ The footer is placed at the bottom of your page. It
.topnav a:hover { often contains information like copyright and
background-color: #ddd; contact info:
color: black;
}
.footer {
Content background-color: #F1F1F1;
text-align: center;
The layout in this section, often depends on the target padding: 10px;
users. The most common layout is one (or combining }
them) of the following:

 1-column (often used for mobile browsers)


 2-column (often used for tablets and laptops)
 3-column layout (only used for desktops)

/* Create three equal columns that float next


to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */


.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns


stack on top of each other instead of next to
each other on smaller screens (600px wide or
less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Unequal Columns

The main content is the biggest and the most


important part of your site.

It is common with unequal column widths, so that


most of the space is reserved for the main content. The
side content (if any) is often used as an alternative

You might also like