Scribd
Upload
12 views13 pages

Introduction to CSS Basics

The document provides information about CSS (Cascading Style Sheets), including: - CSS is used to style and lay out web pages; it allows changing colors, layouts, and fonts - There are different ways to attach CSS code to HTML pages, including inline, internal, and external stylesheets - CSS selectors are used to target specific elements and apply styles, such as type, class, and ID selectors - Common CSS properties and values are discussed for styling text, boxes, positioning elements, and more

Uploaded by

Achraf Sallem
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
12 views13 pages

Introduction to CSS Basics

The document provides information about CSS (Cascading Style Sheets), including: - CSS is used to style and lay out web pages; it allows changing colors, layouts, and fonts - There are different ways to attach CSS code to HTML pages, including inline, internal, and external stylesheets - CSS selectors are used to target specific elements and apply styles, such as type, class, and ID selectors - Common CSS properties and values are discussed for styling text, boxes, positioning elements, and more

Uploaded by

Achraf Sallem
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

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;

/*

other possible value

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;

/*

other possible value

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 `[Link]`.


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.

[Link]

Common questions

Powered by AI

Using external CSS files enhances scalability and maintainability by allowing a single CSS file to be linked across multiple HTML documents, facilitating consistent styling with minimal redundancy. This approach makes global updates more efficient, as changes in the CSS file propagate through all linked pages. It promotes cleaner HTML and easier debugging and enables styling reuse across various components or web projects .

CSS enables responsive web design using media queries, percentage-based widths, and flexible grid systems. Media queries apply styles based on viewport size, allowing for adaptable layouts on various devices. Using relative units like percentages and ems ensures elements resize appropriately across different screen dimensions. CSS flexbox and grid offer adaptable, responsive layouts by allowing elements to dynamically rearrange and resize based on container properties .

There are three main methods to incorporate CSS in an HTML document: Inline, Internal, and External. Inline CSS is applied using the style attribute directly within HTML tags, allowing for quick and specific styling of single elements. Internal CSS is placed within a <style> element located in the <head> section of the HTML document, enabling style rules to be applied more consistently across the document. Finally, External CSS involves linking an external .css file to the HTML document, which is beneficial for reusing the same styles across multiple pages, promoting separation of concerns and easier maintenance .

The CSS box model describes the structure and space of HTML elements, defined by four components: content, padding, border, and margin. The content area is where text and images appear. Padding is the transparent space that surrounds the content, providing a buffer within the element's border. The border is a line that encloses the padding and content, offering visual distinction. Margins are transparent spaces outside the border that create separation between elements .

The CSS display property dictates how elements are displayed and interact on a webpage. 'Block' elements fill the entire width of their parent container and introduce a line break before and after themselves. 'Inline' elements do not start on a new line and only occupy as much width as necessary. 'Inline-block' elements are a hybrid, they do not start on a new line, but can have their width and height set, allowing layout flexibility without breaking the line flow .

Separating structure from presentation in web design is crucial for maintainability, reusability, and adaptability. CSS allows for this separation by enabling developers to manage the design and layout (presentation) independently from the HTML content (structure). This division ensures that styling can be adjusted without altering the HTML, and it can be reused across multiple pages. It also allows sites to adapt to different devices or environments more easily .

The 'visibility: hidden' CSS property hides an element from view, but the space it occupies remains in the layout. In contrast, 'display: none' removes the element from the document flow entirely, freeing up the space it occupied. This distinction is crucial for maintaining the layout while hiding elements, or for removing elements from the page without leaving gaps .

CSS selectors function by providing rules to identify which HTML elements the styles should be applied to. A CSS selector identifies the elements to style, and the declaration block provides the styling rules. Type selectors are used when a style needs to be applied consistently to all instances of a specified type of element, such as ensuring all <h1> elements on the page are styled with the same color and font .

The CSS float property is used to position elements to the left or right, enabling text and inline elements to wrap around them. This feature is instrumental in creating multi-column layouts before the widespread adoption of flexbox and grid systems. However, common pitfalls include collapsing parent containers and unexpected behavior when elements' sizes are not managed, requiring strategies like clearfix solutions to address these issues .

CSS pseudo-classes are used to apply styles in response to user interactions or dynamic conditions. They enhance web page interactivity by allowing elements to change style based on user actions, such as ':hover' for changing styles when a user mouses over an element, ':visited' for styling links that have been clicked, and ':active' for styling elements during user interaction. These capabilities enhance usability and visual feedback, improving user experience .

You might also like