Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Courses > CSS > Flashcards

CSS Flashcards

1
Q

What is css

A

CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

CSS Syntax

A

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q 
Explain 
p {
  color: red;
  text-align: center;
}
sintax
A

p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value</p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

A CSS selector selects the HTML element(s) you want to style.
Name the types

A 
The CSS element Selector
p {
  text-align: center;
  color: red;
}
----------------

The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

-----------------
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
--------------------
The CSS Grouping Selector
h1 {
  text-align: center;
  color: red;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Special selector cases

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

A

You can also specify that only specific HTML elements should be affected by a class.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Special selector cases

<p class="center large">This paragraph refers to two classes.</p>

A

In this example the <p> element will be styled according to class=”center” and to class=”large”:</p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

The CSS Universal Selector

A

The universal selector (*) selects all HTML elements on the page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

CSS Comments

A

/* This is a single-line comment */

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Add a background color to an grouping selector

A

<h1>Hello World</h1>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Borders styles (10)

p.dotted {border-style: dotted;}

A

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

border-width property

A

The border-width property specifies the width of the four borders.

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

border property is a shorthand property

A

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

p {
border: 5px solid red;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

CSS Margins

A

Margins are used to create space around elements, outside of any defined borders.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

CSS Padding

A

Padding is used to create space around an element’s content, inside of any defined borders.

padding-top
padding-right
padding-bottom
padding-left

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

The height and width properties may have the following values

A

auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

The CSS Box Model

A

In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

17
Q

CSS Outline

A

An outline is a line drawn outside the element’s border.

18
Q

Generic Font Families types

A

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.

19
Q

Font Families why?

A

The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems.

.p1 {
font-family: “Times New Roman”, Times, serif;
}

20
Q

Styling Links

A

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

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

21
Q

Responsive Table

A
22
Q

The display Property

A

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

23
Q

Blocklevel display

A

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container.

Using max-width instead, in this situation, will improve the browser’s handling of small windows. This is important when making a site usable on small devices

24
Q

Inline display

A

An inline element does not start on a new line and only takes up as much width as necessary.

25
Q

Override The Default Display Value

A
26
Q

The position Property

A

There are five different position values:

static
relative
fixed
absolute
sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first.
27
Q

Navigation Bars

A
28
Q

CSS Website Layout

A

Header
Navigation Bar
Content
Footer

Responsive Website Layout
By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

29
Q

3 ways to insert css in html

A

external stylesheet with link… (can be reuse)
css file save as .css
use more than one css file

@import url
not use often, takes more loading, import page load is high

----------------
inline method
direct to html element
hard to manage
p style= "style que quieras"
directo a cada elemenento.
-------------
internal css
add the styles in the head of html.
hard to reuse.
30
Q

CSS how to start

A

create a folder, no usar espacios
css-projectDolphin

dentro:
css-images
index.html (usa el web server)

—cargo el projecto a VisualStudio

31
Q

CSS Image dimentions

A
  • avoid unnecesary loads, too big pictures, because it mades page load slower.
  • risized the width, the heigh gets rezied too.
32
Q

Relative path

A

src: foldername/fileName

when the image is in the project folder.

33
Q

Create a css file in the project.
create style.css
link to html file

A

link rel=”stylesheet” href= “css/styles.css”

css/styles.css relative path
/css/styles.css absolute path

34
Q

Absolute path

A

link page outside of your website.
the whole link

-avoid hotlinked with image (the full website, you are using the page bandwidth)

Courses (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions