Cours3 CSS

What is CSS?
As we said, this chapter we are going to be interested to styling, and give some good look to our
web page. The language responsible of styling is CSS.
Well in this chapter we are going to learn:
 What’s CSS?
 How to add css into html?
 How to select an html element?
 How to change the position an element?
Linking CSS to HTML:

Before starting with CSS and how it works, we should typically know, how to link the CSS to our
HTML code?
There are three possible ways to attach CSS to HTML:
 Inline : by using the style attribute in HTML elements.

 Internal : by using a < style > element in the < head > section.
 External : by using an external CSS file.
CSS Selector:
After attaching the css style, the next step is how to attach the wanted style to the proper
element?
If we want to change the style of a particular element in our HTML page, We have to select that
element.
To do so, CSS provides a set of rules, each of which consists of a selector (To indicate which
elements, you are trying to modify) , followed by a declaration block that contains a set of
properties and those properties values.
Type Selector:
In the previous slides, we learned how to pick an HTML element to apply style on it and the types
of CSS selectors.
Now, we will see, the first type of selector and use it in a real example.
Type:
Using a type selector is as simple as typing the name of the element, but when we should this
type. This kind of selectors is used when we want to apply the same rule on every element in the
page.
For example, we want every h1 title to be in red, the font will be roboto and the text-
align will be in the center
 HTML
<!DOCTYPE html>
<html lang="">
<head>
<title>Type selector</title>
</head>
<body>
<h1>Welcome to my blog</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing

elit. Blanditiis
ratione alias, eaque temporibus tenetur similique

accusamus quas
laudantium ea reiciendis itaque atque earum

provident. Ab nisi sunt quo
repellat vitae.
</p>
<h1>I am a super web developer</h1>
</body>
</html>
 CSS
h1 {
color: red;
font-family: roboto;
text-align: center;
 Output:
Descendant Combinator:
The descendant combinator typically represented by a single space character, combines two
selectors such that elements matched by the second selector are selected if they have an
ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first
selector. Selectors that utilize a descendant combinator are called descendant selectors.
 html
<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>
 CSS
.box p {
color: red;
 Output
CSS pseudo classes:
Did you ever try to put your cursor on a button and its color changes? Or did you ever click on a
link and its color changes (marked as clicked)?
Well, it’s all done with CSS pseudo-classes.
As you can see, the structure is clear. You name your SELECTOR, add : then your action.
Here are some awesome actions you can do. Try them on your editor.
/* unvisited link */
a:link {
color: tomato;
/* visited link */
a:visited {
color: tomato;
/* mouse over element */
div:hover {
color: tomato;
/* selected link */
a:active{
color: #0000FF
}
CSS box model

Every element in the web design is rectangular in a box form (even if it is a circle).
The css box model is defined through these four layers:
 Content: The content of the box, where text and images appear
 Padding: The padding is transparent, Clears an area around the content.
 Border: A border that goes around the padding and content. We already have seen it
earlier.
 Margin: Clear an area outside the border. The margin is transparent.
Also, we can determine the dimension of any html element through the width and the height
We are going to know them one by one.
Font styling:
To style the font, css gives us a large set of properties, we are going to see some of them:
Font-family
It helps us change the font family of html element, we set one or more font for this propertie.
font-family: Helvetica neue, roboto;
Color
It changes the text color, it acccept named color, hexadecimal value and rgb value.
color: rgb(0, 0, 255);
/* same as
color: blue;
color: #0000ff;
color: #00f;
color: hsl(0, 100%, 50%); */
Font-style
It's used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless
you want to turn some italic styling off for some reason).
font-style: bold;
/*
other possible value
font-style:normal;
font-style:italic;
font-style:oblique;
*/
Font-weight
It sets how bold the text is. This has many values available in case you have many font variants
available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you'll rarely use
any of them except for normal and bold.
font-weight: normal;
/*
font-weight:bold;
font-weight:bolder;
font-weight:lighter;
font-weight:100-900
*/
Text-decoration
It sets or unsets text decorations on fonts (you'll mainly use this to unset the default underline on
links when styling them.) Available values are:
text-decoration: none;
/*
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
*/
Css display:
Every element on a web page is a rectangular box. The display property in CSS determines just
how that rectangular box behaves.
The CSS display appears to be useful when :
 we need to align two HTML elements together in the same line.

 we want to display an HTML element as a block.
 we want to hide an HTML element.
In this lesson, we will see 4 types of display: none, inline, block and inline-block.
Note: the default display of an element is inline or block.
Display:none
We can hide elements by declaring a display: none value. Another way is to declare visibility:
hidden instead of display: none, but there is a difference between them.
To show the difference, let’s hide one of the boxes below:
 The code css would be:
#box-2 {
display: none;
width: 100px;
height: 100px;
background: blue;
 The code output would be:
 The code css would be:
#box-2 {
width: 100px;
height: 100px;
background: blue;
visibility: hidden;
 The output would be :
Display:inline
Like the name indicate, this feature enables you to make the specified HTML elements in the
same line. Let’s understand it with an example.
 The HTML code would be :
<p>One</p>
<p>Two</p>
<p>Three</p>
 The CSS code could be :
p {
display: inline;
 The Output code would be :
One Two Three
Display:block
 HTML elements are divided into default block elements ( automatically get back to line
without the use of <br> ) and inline elements (need <br> to get back to line).
 Block-level elements:
o Take full-width (100% width) by default.

o Each gets displayed in a new line.
o Width & height properties can be set.
o Can contain other block or inline elements.
How about forcing an inline element to act like a block?
 The CSS code would be :
div{
display: block;
p {
height: 100px;
width: 100px;
background: red;
color: white;
 The Output code would be :
Display:inline-block
In some cases, both of the display values may not be enough for better web design. At that point,
a third display behavior comes to the rescue and also makes alignment much easier: display:
inline-block.
As we can understand from its name, display: inline-block declaration shows both the
characteristics of inline and block-level elements.
In other words, we can think of an inline element, that width & height properties can be set, or we
can think of a block-level element, that doesn’t have to start with a new line.
 The HTML code would be :
<div class="test"></div>
<div class="test"></div>
 The CSS code would be :
.test {
width: 50px;
height: 50px;
border: 1px solid red;
display: inline-block;
 The Output woud be :
CSS Conclusion:
We have been learning many useful st about how to style a web page. Now, we can change the
style of our text content, change it position and manipulate the elements layout.
CSS is the language for describing the presentation of Web pages, including colors, layout, and
fonts.
It allows one to adapt the presentation to different types of devices, such as large screens, small
screens, or printers.
It's independent of HTML and can be used with any XML-based markup language.
The separation of HTML from CSS makes it easier to maintain sites, share style sheets across
pages, and tailor pages to different environments. This is referred to as the separation of
structure (or: content) from presentation.
OBJECTIVES
Remember that portfolio we have create in the last checkpoint, now it’s time to give it
some style.
INSTRUCTIONS

1. Create a file `styles.css`.

2. Link it to our html project.
3. Change the display of navbar to make it inline.
4. Change the font to roboto.
5. Add classes attributes to the html .
6. Be creative !
 Hint: You could use the Internet to search for some portfolio model.
https://drive.google.com/file/d/1W8n_KuZsacyvRUmh89tOfetDL2N1-TVw/view

Cours3 CSS

Uploaded by

Copyright:

Available Formats

Cours3 CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cours3 CSS

Uploaded by

Copyright:

Available Formats

What is CSS?

Linking CSS to HTML:

There are three possible ways to attach CSS to HTML:

 Inline : by using the style attribute in HTML elements.

Lorem ipsum dolor sit amet consectetur adipisicing

ratione alias, eaque temporibus tenetur similique

laudantium ea reiciendis itaque atque earum

<h1>I am a super web developer</h1>

<div class="box"><p>Text in .box</p></div>

<p>Text not in .box</p>

/* mouse over element */

CSS box model

The css box model is defined through these four layers:

We are going to know them one by one.

font-family: Helvetica neue, roboto;

color: rgb(0, 0, 255);

color: hsl(0, 100%, 50%); */

other possible value

other possible value

other possible value

The CSS display appears to be useful when :

 we need to align two HTML elements together in the same line.

To show the difference, let’s hide one of the boxes below:

 The code css would be:

 The code output would be:

 The code css would be:

 The output would be :

 The HTML code would be :

 The CSS code could be :

 The Output code would be :

One Two Three

o Take full-width (100% width) by default.

How about forcing an inline element to act like a block?

 The CSS code would be :

 The Output code would be :

 The HTML code would be :

 The CSS code would be :

border: 1px solid red;

 The Output woud be :

1. Create a file `styles.css`.

You might also like