Web design
lecture 4
Lecturer
Dr. Mohand Lokman Ahmad
Class symbol: oa6o7sx
Applying CSS Code
Cascading Style sheet is all about styling and making your website look gorgeous.
There are three ways to apply CSS code to our site.
• The first is by linking to an external file. This is the recommended method.
• You add the <link> tag to the head element, between the <head>...</head> tags.
<link rel=”stylesheet” type=”text/css” href=”style.css”>
tell the browser that this is a CSS stylesheet. You where you specify the path to the CSS file
do not need to modify them.
Applying CSS Code
• Don’t worry if the code does not make sense to you, we’ll cover them very soon.
body {
margin: 0;
background-color: green;
}
Save this code as “style.css” in the same folder as the .html file.
• The second method to add CSS rules to our site is to embed the code directly into our HTML source code, within the head element. This is done with the
<style> tag.
<head>
<style>
div {
color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
Applying CSS Code
• The last method is to use inline CSS. Inline CSS is specified in the start tag of the element you want
to apply it to, using the style attribute.
An example is:
<div style="text-decoration:underline; color:blue;">Some text</div>
• Out of the three methods, linking is the preferred method. Linking separates the HTML content from
the styling rules and makes it easier to maintain our codes. It is also extremely useful when we need
to apply the same CSS rules to multiple web pages.
• Embedded CSS, on the other hand, is commonly used when the rules only apply to one web page.
• Inline CSS is handy when you need to apply a rule to only one element, or when you want to
override other CSS rules that apply to the same element. This is because inline CSS has a higher
precedence than CSS code added using the
Syntax of a CSS rule (first & second
methods)
The syntax is:
Tag name { property : value; property : value; property : value; }
Exp:
div {
background-color: green;
font-size: 12px;
}
Selecting an Element
In the example above, the rules declared in the curly brackets will apply
to ALLelements with a <div> tag. However, most of the time, we want
greater variation. Suppose you want one <div> element to have a font
size of 12px and another to have a font size of 14px. How would you do div {
it? background-color:
Exp: green;
<div id=”para1”> }
#para1
Some text. {
</div> font-size: 12px;
<div id=”para2”> }
More text. #para2
{
</div> font-size: 14px;
• we can then select the respective id by adding a # sign in front of the id }
name.
More than one element have Same style
• If you need to apply the same CSS rules to two different elements, you can use a class. A class is similar to
an id, with the exception that a class need not be unique.
• For now, let’s consider the following code:
<div class=”myclass1”>
Some text.
</div>
<p class=”myclass1”> . myclass1
More text. {
</p> font-size: 12px;
}
<div>
Yet more text.
</div>
• you add a dot (.) in front of the class name, like this:
Case Insensitivity
• CSS selectors and rules are case-insensitive. Hence, you can either write
div {
Background-color: GREEN;
}
• or
DIV {
background-coloR: green;
}
• Both will work equally well.
Order of Precedence
• The more specific the selector, the higher the precedence
The main point to remember is that an id is considered to be more specific than a class, and a class
more specific than an element.
#myId {color: blue;}
.myClass {color: red;}
div {color: yelow; }
<div id=”myId” class=”myClass”>Some text</div>
Order of Precedence
• If no style is specified, elements inherit styles from their parent container
A child element is an element which lies entirely within the start and end tags of another element. For
instance, in the code below, <p> is a child element of the <body> element. Since the color color of
<p> is not defined, it’ll inherit this property from the <body> element for which the property is defined.
body {
color: blue;
}
<body>
<p>Some text</p>
</body>
Order of Precedence
• All else being equal, the last declared rule wins
Suppose you have the following CSS declaration in your HTML <head> element.
<head>
<style>
p { font-size: 20px; }
</style>
</head>
• Further down the HTML document, you have the following HTML code, with
• an inline CSS rule:
<p style=”font-size: 30px;”>Some text</p>
• Which rule do you think will be applied to the words “Some text”? The correct answer is the inline
rule. This is because all things being equal, the rule that is declared last has the highest
precedence.
the CSS Box Model
• All elements in CSS are treated as boxes.
CSS boxes consist of margins, borders,
padding, and the actual content as shown
below.
• The thick black line is the border. Within
the border is the padding and the actual
content. Outside the border is the margin
of the box.
example
<head>
#box1 {
margin: 20px; padding: 10px; border: 5px solid black; width: 100px; height: 100px;
text-align: justify;
}
#box2 {
margin: 40px; padding: 50px; border: 5px solid black; width: 100px; height: 100px;
text-align: justify;
}
</style>
</head>
<body>
<div id="box1">Learn CSS in One Day and Learn It Well. CSS is easy.
</div>
<div id="box2">Learn CSS in One Day and Learn It Well. CSS is easy.
</div>
</body>
</html>
Width and Height Properties
• The width and height properties of a CSS box specify the dimensions of the content area (excluding
the padding, border and margin). The values are normally given in pixels or as a percentage. For
instance, the code in our example sets the width and height of both box1 and box2 to 100px. You
can also set the width to 80%.
Overflow Property
• Sometimes, the width and height of the
content area may be too small to
accommodate the contents inside the box. By
default the content will flow out of the box
and overlap other contents. This results in a
very badly formatted web page. If you do not
want this to happen, you can use the
overflow property. The diagram below shows
how content is displayed using different
values for the overflow property (visible,
hidden, scroll and auto).
Padding and Margin Properties
• four different syntaxes for specifying margin Syntax 3
width. The same works for paddings. Just margin-top: 25px;
change the property name from margin to margin-right: 50px;
padding. margin-bottom: 60px;
• Syntax 1 margin-left: 10px;
margin: 25px; This syntax sets the individual margins
separately.
This syntax sets all four margins to 25px. Syntax 4
• Syntax 2 margin: 25px 50px 60px 10px;
This syntax is a shorthand for syntax 3.
margin: 25px 50px;
The four numbers specify the values of
• This syntax sets the top and bottom margins the individual margins, starting from the
to 25px; the left and right margins to 50px. top and continuing in a clockwise
direction. Hence top margin is 25px; right
is 50px, bottom 60px and left 10px.
Padding and Margin Properties
• Margins are also commonly used to align block elements. By default, block elements take up the full
width available. However, you can change this width using the width property. For instance, the
code below changes the width of an element to 80%. You can then center align the element by
setting the left and right margins to auto.
width: 80%;
margin: 0 auto;
Border Properties
• CSS border properties allow you to set the width, color, style and radius of an element's border.
• border-width
To set the thickness of the border
border-width: 25px;
will set all borders to 25px.
border-width: 25px thin;
will set the top and bottom width to 25px and the left and right width to thin.
border-top-width: 30px;
will set the top border to 30px.
Border Properties
• border-color
The value of this property can be set by specifying a predefined color name, such as green, red and
yellow etc.
border-color: red green;
• border-style
The acceptable values are: none, dotted, dashed, solid, double, groove, ridge, inset and outset.
For instance, if you write
border-style: solid dotted;
the top and bottom border will be solid while the left and right will be dotted. If the top and bottom
border will be solid while the left and right will be dotted. If you want to set the style individually, you
can write
border-top-style: solid;
border-left-style: dotted;
Border Properties
• border-radius
• The border-radius property is used to create borders with rounded corners. The value is normally
given in pixel or percentage.Border radius can be set individually for the four corners. The four
corners are top-left, top-right, bottom-right and bottom-left.
Examples:
border-radius: 5px;
sets the border radii of all corners to 5px.
border-radius: 10px 20px;
sets the top-left and bottom-right (i.e. the two corners diagonally opposite each other) radii to 10px
and the top-right and bottom-left radii to 20px.
border-radius: 25px 5px 20 50px;
sets the values of the individual corners, starting from the top-left corner and continuing in a
clockwise direction.
Border Properties
• Border Shorthand
• The border property is a shorthand for specifying border width, style and color in one line, instead of
doing it separately. Simply write
border: 5px solid green;
• The values are for width (5px), style (solid) and color (green) respectively. Border radius is not
included in this shorthand.
